PF Next

Gallery

Gallery Example

Preview

<div class="pf-l-gallery">
  <div class="pf-l-gallery__item">
    content</div>
  <div class="pf-l-gallery__item">
    content</div>
  <div class="pf-l-gallery__item">
    content</div>
  <div class="pf-l-gallery__item">
    content</div>
  <div class="pf-l-gallery__item">
    content</div>
</div>

Gallery Example with gutter

Preview

<div class="pf-l-gallery pf-m-gutter">
  <div class="pf-l-gallery__item">
    content</div>
  <div class="pf-l-gallery__item">
    content</div>
  <div class="pf-l-gallery__item">
    content</div>
  <div class="pf-l-gallery__item">
    content</div>
  <div class="pf-l-gallery__item">
    content</div>
</div>

Documentation

Overview

A Gallery layout makes all of the children a uniform size, the children are displayed horizontally, and they wrap as needed.

Usage

Class Applied To Outcome
.pf-l-gallery <div> Initializes a Gallery layout
.pf-l-gallery__item <div> Explicitly sets the child for the gallery. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers.
.pf-m-gutter .pf-l-gallery Adds space between children