Difficulty: intermediate
Estimated Time: 5 minutes

PatternFly React is made up of components, layouts and demos. The PatternFly React library provides a collection of React demos to build more complex interfaces with consistent markup, styling, and behavior.

In this course, we are going to build a PatternFly page together, starting with a demo, adding cards, and concluding with modifying the cards and their content. You will learn how to use PatternFly components together to build a consistent experience.

Customize PatternFly

Step 1 of 4

Add a page demo

In PatternFly, demos are used to show how PatternFly’s components and layouts can be put together to build more complex structures. They are made entirely from components and layouts.

In this exercise, use a page demo to create a new page for a web application.

Katacoda is setting up a new React application. Begin coding once the server starts and "Welcome to PatternFly" appears on the lower pane.

1) Navigate to the src folder and open src/App.js

2) Set up the general structure of the demo and the necessary import statements.

Copy the following code into the App.js file, replacing all of the content there:

import React from 'react';
import "@patternfly/react-core/dist/styles/base.css";
import "./app.css";
import {
  Brand,
  Button,
  Card,
  CardActions,
  CardHeaderMain,
  CardTitle,
  CardHeader,
  CardBody,
  CardFooter,
  Gallery,
  GalleryItem,
  Text,
  TextContent,
  TextVariants
} from '@patternfly/react-core';
import {
  TimesIcon
} from '@patternfly/react-icons';
import AppPage from './components/page';

class PageLayoutSimpleNav extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <React.Fragment>
        <AppPage>
        </AppPage>
      </React.Fragment>
    );
  }
}

export default PageLayoutSimpleNav;

3) Add a gallery of cards.

Gallery is a PatternFly layout that arranges content in a responsive grid. Set a gutter by adding a hasGutter property.

Add the gallery inside of <AppPage>, it should look like this:

<Gallery hasGutter>
</Gallery>

4) Add multiple cards inside of the gallery.

For the purpose of this example, make every card the same. Each Card should be wrapped in a GalleryItem.

<GalleryItem>
  <Card>
    <CardBody>This is a card</CardBody>
  </Card>
</GalleryItem>

To add cards to the layout programatically, use Array.apply and Array.map to iterate over the collection and produce a GalleryItem for each item in the list. The result should look like this:

{Array.apply(0, Array(9)).map((x, i) => (
  <GalleryItem key={i}>
    <Card>
      <CardBody>This is a card</CardBody>
    </Card>
  </GalleryItem>
))}

Once the preview reloads, it should look like this: Page demo