Card

Introduction#

Cards are used to apply a container around a related grouping of information. The card body accommodates any layout or design, as long as its a grouping of related information.

Examples#

Default card#

A card is made up of 2 sections, a header and a body.

The card header can have a title and actions. The title is located on the left, while the actions row is located on the right side of the card header. A small secondary button is used to display a single action, such as creating, editing, or deleting. If there are multiple actions, an action overflow menu would be used instead.

The header has limitations, but the body section can accommodate any layout of related information.

The card structure parts can be removed to prevent the part from displaying.

<Card>
  <Card.Header>
    <Card.Title>
      Card Title
    </Card.Title>
    <Button variant="secondary" size="small">Action</Button>
  </Card.Header>
  <Card.Body>
    <p>Body content</p>
    <Button variant="primary">Button</Button>
  </Card.Body>
</Card>

<Card>
  <Card.Header>
    <Card.Title>
      Card Title
    </Card.Title>
    <Dropdown alignRight>
      <Dropdown.Toggle className="u-textLight u-lineHeightNone">
        <Icon name="more" size="small" />
      </Dropdown.Toggle>
      <Dropdown.Container className="u-paddingExtraSmall">
      Dropdown Container
      </Dropdown.Container>
    </Dropdown>
  </Card.Header>
  <Card.Body>
    <p>Body content</p>
  </Card.Body>
</Card>

No padding image#

<Card>
  <img
    className="u-maxWidthFull"
    src="holder.js/100px180"
    alt=""
  />
  <Card.Body>
    <p>Body content</p>
    <Button variant="primary">Button</Button>
  </Card.Body>
</Card>

No header card#

The card header can be removed to prevent the card header from displaying.In some cases, using text in the body part to create Card title.

Use <Card.Body> to pad content inside a <Card>.

<Card>
  <Card.Body>This is some text within a card body.</Card.Body>
</Card>

Alternatively, you can use this shorthand version for Cards with body only, and no other children

<Card body>This is some text within a card body.</Card>

Design Reference#

Use the correct button size.Don’t use the medium or large button on Card.Header

Do

Don't

API#

Card#