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

In this step, lay out 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 this: <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 this: <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>, and 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 this: <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 this: <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.

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 this: <div class="pf-l-stack__item pf-m-fill">

The gallery layout makes all of its children uniform in size. It also makes them display horizontally and wrap responsively.

Lay out cards using 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. 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 this: <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">
        <div class="pf-c-form__group-label">
          <label class="pf-c-form__label">
            <span class="pf-c-form__label-text">
              Name
            </span>
          </label>
        </div>
        <div class="pf-c-form__group-control">
          <input class="pf-c-form-control" required/>
        </div>
      </div>
      <div class="pf-c-form__group">
        <div class="pf-c-form__group-label">
          <label class="pf-c-form__label">
            <span class="pf-c-form__label-text">
              Email
            </span>
          </label>
        </div>
        <div class="pf-c-form__group-control">
          <input class="pf-c-form-control" required/>
        </div>
      </div>
      <div class="pf-c-form__group">
        <div class="pf-c-form__group-label">
          <label class="pf-c-form__label">
            <span class="pf-c-form__label-text">
              Phone Number
            </span>
          </label>
        </div>
        <div class="pf-c-form__group-control">
          <input class="pf-c-form-control" placeholder="555-555-555" required/>
        </div>
      </div>
      <div class="pf-c-form__group">
        <div class="pf-c-form__group-label">
          <label class="pf-c-form__label">
            <span class="pf-c-form__label-text">
              Street address
            </span>
          </label>
        </div>
        <div class="pf-c-form__group-control">
          <input class="pf-c-form-control" placeholder="123 A street" required/>
        </div>
      </div>
      <div class="pf-c-form__group">
        <div class="pf-c-form__group-label">
          <label class="pf-c-form__label">
            <span class="pf-c-form__label-text">
              State
            </span>
          </label>
        </div>
        <div class="pf-c-form__group-control">
          <input class="pf-c-form-control" placeholder="MA" required/>
        </div>
      </div>
      <div class="pf-c-form__group">
        <div class="pf-c-form__group-label">
          <label class="pf-c-form__label">
            <span class="pf-c-form__label-text">
              Zip code
            </span>
          </label>
        </div>
        <div class="pf-c-form__group-control">
          <input class="pf-c-form-control" placeholder="12345" required/>
        </div>
      </div>
      <div class="pf-c-form__group">
        <div class="pf-c-form__group-label">
          <label class="pf-c-form__label">
            <span class="pf-c-form__label-text">
              Country
            </span>
          </label>
        </div>
        <div class="pf-c-form__group-control">
          <input class="pf-c-form-control" placeholder="United States" required/>
        </div>
      </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 this: <form class="pf-c-form pf-l-grid">.

4) Locate the six form group classes.

They will look like this: <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 this: <div class="pf-c-form__group pf-l-grid__item">

6) Change the widths of the grid__items.

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 this: <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 this: <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.

Lay out 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 look like this: <div class="pf-c-card__body">

3) Lay out 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 lay out 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 this: <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 this: <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 is pf-m-justify-content-space-between.

Add this modifier to the card body. It should look like this: <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 this: <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 this: <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 this: <div class="pf-c-card__footer pf-l-flex pf-m-justify-content-space-between">