The level layout distributes space between children evenly and center them on the x-axis. By default, the children are placed horizontally and wrap responsively.

In this step, layout the title and button horizontally.

1) Copy code into the index.html file.

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

The card has a title component and button component inside of it.

<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) Locate the parent of the title and button components.

3) Add the level layout class to the parent identified in step 2.

The level layout class is pf-l-level.

When added to the parent it should look like: <div class="pf-c-card__body pf-l-level"

Note: The title and button should now align on the x-axis.

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

Make a simplified page header where a "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) Locate the parent container for the three divs.

It will be the <header>.

3) Add the split layout class to the parent container identified in step 2.

Add pf-l-split to <header>.

When added to the parent it should look like: <header class="pf-l-split">

4) Locate the three children inside of the parent container.

The children of the <header> are the three divs.

5) Add the class pf-l-split__item to each child.

Adding this class to each child means that the parent split container has a relationship with all of its split__items.

6) Add a modifier class to the second child.

For a child to fill the available horizontal space, add pf-m-fill to just one of the children. In this case, add it to the middle child.

It should look like: <div class="pf-l-split__item pf-m-fill">

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

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 to 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) Locate the parent container of the pf-c-title , <div> , pf-c-button classes.

It will be pf-c-card__body.

3) Add the stack layout to the parent identified in step 2.

The class for the stack layout is pf-l-stack.

When added to the parent it should look like: <div class="pf-c-card__body pf-l-stack">

4) Locate the three children inside of the parent container.

The children of the <div class="pf-c-card__body"> are <h1 class="pf-c-title"> , <div> and <button class="pf-c-button>.

5) Add the class pf-l-stack__item to each child.

Adding this class to each child means that the parent stack container has a relationship with all of its stack__items.

It should look like: <h1 class="pf-c-title pf-l-stack__item"> , <div class="pf-l-stack__item"> , <button class="pf-c-button pf-l-stack__item">.

6) Add a modifier class to the second child.

In order for a child to fill the available vertical space, add pf-m-fill to just one of the children. In this case add it to the middle child.

It should look like: <div class="pf-l-stack__item pf-m-fill">

The gallery layout makes sure all of its children are of uniform size, display horizontally and wrap responsively.

Layout cards using in the gallery format.

1) Copy code into the index.html file.

Click the Copy to Editor button below to add six card components to 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) Locate the parent of all six card components.

It will be the outermost div.

3) Add the gallery layout to the parent container located in step 2.

The gallery 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.

The gallery layout class is pf-l-gallery.

When added to the parent it should look like: <div class="pf-l-gallery">

4) Add a modifier class to the gallery layout to add space.

Add pf-m-gutter next to the pf-l-gallery class added in step 3. 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.

Organize 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) Locate the form component.

Look for <form class="pf-c-form">

3) Add the grid layout class to the form component identified in step 2.

The grid layout uses the class: pf-l-grid.

It should look like: <form class="pf-c-form pf-l-grid">.

4) Locate the six form group classes.

They will look like: <div class="pf-c-form__group">

5) For every form group class identified in step 4, add a grid item class.

Adding this class to each child means that the parent grid container has a relationship with all of its grid__items.

It should look like: <div class="pf-c-form__group pf-l-grid__item">

6) Change the widths of the grid__items.

In order to change widths, use the modifier pf-m-[0-12]-col, where 0-12 represents the number of columns that a grid column spans.

a) To the first two form-groups add pf-m-6-col next to pf-l-grid__item.

It should look like: <div class="pf-c-form__group pf-l-grid__item" pf-m-6-col>

b) To the last three form-groups add pf-m-4-col next to pf-l-grid__item.

It should look like: <div class="pf-c-form__group pf-l-grid__item" pf-m-4-col>

The flex layout is based on the CSS flex properties. The flex parent 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.

Layout items in a card using flex.

1) Copy code into the index.html file.

Click the Copy to Editor button below to add a card to 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>

2) Locate the first card body.

It will be: <div class="pf-c-card__body">

3) Layout the card body identified in step 2 to be flex row.

By laying out the card body this way, all items within its container will layout horizontally.

a) Set the layout to be flex.

The flex layout uses the class pf-l-flex.

Add this class to pf-c-card__body. It should look like: <div class="pf-c-card__body pf-l-flex">

b) Set its direction to be row using a modifier.

The modifier to set the direction of a container to be row is: pf-m-row

Add this class to pf-c-card__body. It should look like: <div class="pf-c-card__body pf-l-flex pf-m-row">

4) Add space between the text and buttons in the card body.

The modifier to add space between is pf-m-justify-content-space-between.

Add this modifier to the card body. It should look like: <div class="pf-c-card__body pf-l-flex pf-m-row pf-m-justify-content-space-between">

5) Locate the card footer.

It will look like: <div class="pf-c-card__footer">

6) Add space to the buttons in the card footer identified in step 5.

a) Set the layout to be flex.

Add pf-l-flex to the pf-c-card__footer.

It should look like: <div class="pf-c-card__footer pf-l-flex">

b) Add a modifier to add space between the buttons.

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

It should look like: <div class="pf-c-card__footer pf-l-flex pf-m-justify-content-space-between">