Difficulty: beginner
Estimated Time: 10 minutes

PatternFly React is made up of components, layouts, and demos.

The PatternFly React library provides a collection of React components used to build interfaces with consistent markup, styling, and behavior. In this course, you will build a PatternFly card starting with content, adding a header and action buttons, and concluding by adding a card footer.

This tutorial will cover React, using PatternFly components to build a consistent experience, and using layouts to put components together.

Congratulations! You finished the "PatternFly React basics" course.

Please fill out a quick survey here

Learn more about PatternFly React:

PatternFly React basics

Step 1 of 5

Add a card

A card is a flexible element for containing any type of content. Cards are used on dashboards, in data displays, or for positioning content on a page.

In PatternFly, separate components are used to demarcate the different regions of a card so it can be fully customized. For example, images are placed in CardHead, actions in CardActions, and the header in CardHeader.

In this exercise, create a card with an image, action, header, body, and footer.

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 App.js.

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

This step adds the structure of the card component. The next steps fill in the structure with content.

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 {
  Brand,
  Button,
  Card,
  CardActions,
  CardHead,
  CardHeader,
  CardBody,
  CardFooter,
  Split,
  SplitItem,
  Text,
  TextContent,
  TextVariants
} from '@patternfly/react-core';
import {
  TimesIcon
} from '@patternfly/react-icons';

function App() {
  return (
    <Card>
      <CardHead>
        <CardActions>
        </CardActions>
      </CardHead>
      <CardHeader>
      </CardHeader>
      <CardBody>
      </CardBody>
      <CardFooter>
      </CardFooter>
    </Card>
  );
}

export default App;

Once the preview reloads, it should look like this: Empty card