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.

Styling

Features galleries use images or round Font Awesome icons alongside headings and descriptive text. They list down the page vertically rather than horizontally.

For all features gallery types, it isn’t mandatory to use images that have the same height – but it does look better.

Features gallery options
  • Left-aligned (default) – most features galleries are left-aligned, meaning the images are to the left of the text.
    • Maximum image width: 90px (make sure your images look good at that small size!)
    • This option can use round Font Awesome icons instead of images.
  • Right-aligned – if you want larger images, you can use a right-aligned gallery. Images will be aligned to the right of the text.
    • Maximum image width: 200px
  • Left-aligned with large images – just like the default left-aligned gallery, but with larger images.
    • Maximum image width: 200px
    • The images don’t shrink on medium screens, so using this option on pages with a sidebar isn’t ideal – the text will get very narrow and be difficult to read.
Responsive behavior

Images are inline and aligned to the right or left of their accompanying text on large and medium screens. On small screens, the images move above their text and become as large as they can up to 100% of the width of the screen.

Right-aligned gallery images shrink to 50% width on medium screens, to make more room for the text. However, the images in left-aligned galleries with large images don’t shrink on medium screens. Using this option on pages with a sidebar isn’t ideal – the text will get very narrow and be difficult to read.

Development info
  • Stylesheet location: /_source/styles/components/_media.scss
  • In WordPress, use the features shortcode.
  • With icons: learn more about Font Awesome icons and using icons in WordPress.
  • <div class="features"> <!-- optional: class="features features-right" or 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>
        <i class="icon-pencil round round-large"></i> <!-- icon instead of an image -->
        <h4><a href="">Heading link</a></h4>
        <p>Lorem ipsum.</p>
      </div>
      <div>
        <img src="" alt="">
        <h4><a href="">Heading link</a></h4>
        <p>Lorem ipsum.</p>
      </div>
    </div>

Features gallery examples

Default

PCC building

Convenient locations

Four comprehensive campuses, eight centers, and dozens of independent locations throughout the community offer courses and provide student services. Online Learning offers classes online, on television, and through other distance learning methods.

Woman

College commitments

Every year, nearly 73,000 students enroll at PCC, making it the largest educational institution in Oregon. These are the values that guide PCC in creating a better future for the community.

Right-aligned

PCC building

Convenient locations

Four comprehensive campuses, eight centers, and dozens of independent locations throughout the community offer courses and provide student services. Online Learning offers classes online, on television, and through other distance learning methods.

Woman

College commitments

Every year, nearly 73,000 students enroll at PCC, making it the largest educational institution in Oregon. These are the values that guide PCC in creating a better future for the community.

Left-aligned large images

PCC building

Convenient locations

Four comprehensive campuses, eight centers, and dozens of independent locations throughout the community offer courses and provide student services. Online Learning offers classes online, on television, and through other distance learning methods.

Woman

College commitments

Every year, nearly 73,000 students enroll at PCC, making it the largest educational institution in Oregon. These are the values that guide PCC in creating a better future for the community.

With icons
pencil Lorem ipsum dolor sit amet

Sed odio lacus, volutpat non malesuada varius, rhoncus scelerisque leo.

calendar Suspendisse eu eros tellus

Quisque ut ipsum rhoncus, gravida neque in, efficitur nulla.

comments Nunc pellentesque ligula

Curabitur bibendum neque nibh, at dapibus lacus aliquam eu.