The Level Layout is designed to distribute space between children evenly and center them on the x-axis. By default the children are placed horizontally and wrap responsively.

Task: Layout title and button horizontally.

1) Copy code into the index.html file.

Click the Copy to Editor button below to add a Card component in the index.html file.

<div class="pf-c-card">
  <div class="pf-c-card__body">
    <h1 class="pf-c-title pf-m-xl">
      Large title
    </h1>
    <button class="pf-c-button pf-m-primary">
      Click me
    </button>
  </div>
</div>

2) Add pf-l-level to the parent <div> of the title and button elements.

Hint: Add it to pf-c-card__body.

The title and button should now aligned on the x-axis.

The Split Layout is designed to position items horizontally, with one item filling the available horizontal space.

Task: Make a simplified page header where the "nav" fills the available horizontal space.

1) Copy code into the index.html file.

Click the Copy to Editor button below to add code in the index.html file.

<header>
  <div>
    Align left.
  </div>
  <div>
    This element should fill the remaining space between the left and right elements.
  </div>
  <div>
    Align right.
  </div>
</header>

2) Add pf-l-split to the parent container.

Hint: Add it to <header>

3) Add the class pf-l-split__item to all of the children inside of the parent container. There are three children.

4) Add pf-m-fill to the split item in the middle. This will allow the page nav to fill the available horizontal space in the nav.

The Stack Layout is designed to position items vertically, with one item filling the available vertical space.

Task: Edit the card body so that the text fills the available vertical space.

1) Copy code into the index.html file.

Click the Copy to Editor button below to add a Card component in the index.html file.

<div class="pf-c-card" style="height: 450px; width: 300px;">
  <div class="pf-c-card__body">
    <h1 class="pf-c-title pf-m-2xl">
      This is a title
    </h1>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <button class="pf-c-button pf-m-link pf-m-inline">
      Footer Link Button
    </button>
  </div>
</div>

2) Add pf-l-stack to the parent container.

Hint: pf-c-card__body

3) Add pf-l-stack__item to all of the children inside of the container.

Hint: pf-c-title , <div> , pf-c-button.

4) To the middle <div> add the class pf-m-fill next to the pf-l-stack__item class that is already there. This will allow that div to fill the available vertical space.

The Gallery Layout is designed so that all of its children are of uniform size, displayed horizontally and wrap responsively.

Task: Layout cards using in the gallery format.

1) Copy code into the index.html file.

Click the Copy to Editor button below to add Card components in the index.html file.

<div>
  <div class="pf-c-card"> 
    <div class="pf-c-card__body">
      This is a card.
    </div>
  </div>
  <div class="pf-c-card"> 
      <div class="pf-c-card__body">
        This is a card.
      </div>
    </div>
    <div class="pf-c-card"> 
      <div class="pf-c-card__body">
        This is a card.
      </div>
    </div>
    <div class="pf-c-card"> 
      <div class="pf-c-card__body">
        This is a card.
      </div>
    </div>
    <div class="pf-c-card"> 
      <div class="pf-c-card__body">
        This is a card.
      </div>
    </div>
    <div class="pf-c-card"> 
      <div class="pf-c-card__body">
        This is a card.
      </div>
    </div>
</div>

2) Add pf-l-gallery to the parent wrapper <div>.

Note: This will structure any children inside of the gallery into a grid layout, whereby the columns don’t extend beyond 250px in width, and when this happens they add more columns and wrap.

3) Add pf-m-gutter next to the pf-l-galleryclass. This will add vertical and horizontal spacing of 24px between the card elements.

The Grid Layout is based on CSS Grid’s two-dimensional system of columns and rows. This layout styles the parent element and its children to achieve responsive column and row spans as well as gutters.

Task: Layout form components using grid.

1) Copy code into the index.html file.

Click the Copy to Editor button below to add code in the index.html file.

<div class="pf-c-card">
  <div class="pf-c-card__body">
    <form class="pf-c-form">
      <div class="pf-c-form__group">
        <label class="pf-c-form__label">Name</label>
        <input class="pf-c-form-control" required>
      </div>
      <div class="pf-c-form__group">
        <label class="pf-c-form__label">Email</label>
        <input class="pf-c-form-control" required>
      </div>
      <div class="pf-c-form__group">
        <label class="pf-c-form__label">Phone number</label>
        <input class="pf-c-form-control" placeholder="555-555-5555">
      </div>
      <div class="pf-c-form__group">
        <label class="pf-c-form__label">Street Address</label>
        <input class="pf-c-form-control" placeholder="123 A Street">
      </div>
      <div class="pf-c-form__group">
        <label class="pf-c-form__label">State</label>
        <input class="pf-c-form-control" placeholder="MA">
      </div>
      <div class="pf-c-form__group">
        <label class="pf-c-form__label">Zip Code</label>
        <input class="pf-c-form-control" placeholder="12345">
      </div>
        <div class="pf-c-form__group">
        <label class="pf-c-form__label">Country</label>
        <input class="pf-c-form-control" placeholder="United States">
      </div>
    </form>
  </div>
</div>

2) Add pf-l-grid next to the pf-c-form class.

3) For every pf-c-form__group class add pf-l-grid__item next to it so that it becomes a grid item.

4) Change the widths of pf-l-grid__item. To the first two Form Groups add pf-m-6-col next to pf-l-grid__item. For the last three Form Groups add pf-m-4-col next to pf-l-grid__item.

The Flex Layout is based on the CSS Flex properties where the layout determines how a flex item will grow or shrink to fit the space available in its container. The system relies on a default spacer value that is applied to flex items.

Task: Layout items in a card using flex.

1) Copy code into the index.html file.

Click the Copy to Editor button below to add code in the index.html file.

<div class="pf-c-card" style="width: 450px"> 
  <div class="pf-c-card__body">
    <span>
      <h2>PatternFly-Elements</h2>
      <p>Working repo for PatternFly 4</p>
    </span>
    <button class="pf-c-button pf-m-primary">
      Primary
    </button>
  </div>
  <div class="pf-c-card__footer">
    <button class="pf-c-button pf-m-secondary">
      Secondary
    </button>
    <button class="pf-c-button pf-m-secondary">
      Secondary
    </button>
    <button class="pf-c-button pf-m-secondary">
      Secondary
    </button>
  </div>
</div>

Lets make the first card body layout horizontally. For pf-c-card__body:

2) Set its layout to be flex. Add pf-l-flex to the pf-c-card__body.

3) Set its direction to be row. Add pf-m-row to the pf-c-card__body.

4) Add space between the text and the button, this can be done using the modifier: pf-m-justify-content-space-between.

Lets make the card footer layout the buttons. For pf-c-card__footer:

5) Set its layout to be flex. Add pf-l-flex to the pf-c-card__footer.

6) Add space between the buttons. Add pf-m-justify-content-space-between to the pf-c-card__footer.