Portland Community College | Portland, Oregon

Features gallery

Features galleries display lists of related resources or pieces of information. They may or may not link to other pages.

Guidelines

Use features galleries:

• When there are too many items to use a callout gallery.
• When some items have more text than others (this is bad for callout galleries because some boxes have large amounts of empty space).
• When the information is less important than that in callout galleries.
• When you think this gallery works better than others aesthetically.
• When listing related items that don’t link anywhere.

Jump to a component:

• Default gallery
• Large gallery
• Right-aligned gallery
• Gallery with large icons
• Gallery with small icons

Default gallery

Default galleries use images alongside headings and descriptive text.

Styling

These galleries list the items down the page vertically rather than horizontally. They have small (90px wide), left-aligned images alongside the headings and descriptive text. The headings are slightly smaller than the default heading sizes.

How to use for Default gallery

Use the features-gallery and feature shortcodes (no option needed). There’s a full line break (enter or return) between the opening pcc-feature shortcode tag and the image.

Use images that have the same ratio (ideal but not mandatory) and are at least 90px wide. Don’t use any sizing or alignment classes on the images.

<div class="features">
  <div>
    <img src="" alt="">
    <h4><a href="">Heading link</a></h4> <!-- or <h5> or <h6> -->
    <p>Lorem ipsum.</p>
  </div>
  ...
</div>

Large gallery

Large galleries are the same as default galleries but have larger images.

Styling

Same as default galleries but the images are twice as big (200px wide). The images in this option don’t shrink on medium screens, so it isn’t ideal on pages with a sidebar – the text will get very narrow and be difficult to read.

How to use for Large gallery

Use the features-gallery and feature shortcodes with option="large". Use images that have the same ratio (ideal but not mandatory) and are at least 200px wide. Don’t use any sizing or alignment classes on the images.

<div class="features features-large">
  <div>
    <img src="" alt="">
    <h4><a href="">Heading link</a></h4> <!-- or <h5> or <h6> -->
    <p>Lorem ipsum.</p>
  </div>
  ...
</div>

Right-aligned gallery

Right-aligned galleries are good if you want larger images. This option is good for things like staff pages, where there are images of people alongside biographical text. Using a gallery eliminates any image floating/clearing issues that can happen with simple right-aligned images.

Styling

The images will be aligned to the right of the text at 200px width. Headings (with optional links) are the same size as their non-gallery counterparts, and are located to the left of the text.

How to use for Right-aligned gallery

Use the features-gallery and feature shortcodes with option="right". Use images that have the same ratio (ideal but not mandatory) and are at least 200px wide. Don’t use any sizing or alignment classes on the images.

<div class="features features-right">
  <div>
    <img src="" alt="">
    <h4><a href="">Heading link</a></h4> <!-- or <h5> or <h6> -->
    <p>Lorem ipsum.</p>
  </div>
  ...
</div>

Gallery with large icons

Galleries with large icons use round Font Awesome icons alongside headings and descriptive text.

Styling

Same as default galleries but with white icons on teal, circular backgrounds rather than images.

How to use for Gallery with large icons

Use the features-gallery and feature shortcodes (no option needed). Use the icon shortcode with class="round round-large" at the beginning of the heading, with a space between the icon shortcode and the heading text. There’s a full line break (enter or return) between the opening pcc-feature shortcode tag and the icon/heading combo.

<div class="features">
  <div>
    <h4> <!-- or <h5> or <h6> -->
      <a href="">
        <i class="fa-solid fa-icon-name round round-large"></i> Heading
      </a>
    </h4> 
    <p>Lorem ipsum.</p>
  </div>
  ...
</div>

Gallery with small icons

Same as galleries with large icons, but the icons are smaller and there are no headings. Links are optional in the description.

Styling

Same as galleries with large images but the icons are half the size.

How to use for Gallery with small icons

Use the features-gallery and feature shortcodes with option="round-small" at the beginning of the text, with a space between the icon shortcode and the text. Use the icon shortcode with class="round round-small".

Don’t use headings. Links in the accompanying text are optional.

<div class="features">
  <div>
    <p><i class="fa-solid fa-icon-name round round-small"></i> Lorem ipsum.</p>
  </div>
  ...
</div>