PF Next

Card

Card

Preview

Header
Body
<div class="pf-c-card">
  <div class="pf-c-card__header">
    Header
  </div>
  <div class="pf-c-card__body">
    Body
  </div>
  <div class="pf-c-card__footer">
    Footer
  </div>
</div>

Card with no footer

Preview

Header
This card has no footer
<div class="pf-c-card">
  <div class="pf-c-card__header">
    Header
  </div>
  <div class="pf-c-card__body">
    This card has no footer
  </div>
</div>

Card with no header

Preview

This card has no header
<div class="pf-c-card">
  <div class="pf-c-card__body">
    This card has no header
  </div>
  <div class="pf-c-card__footer">
    Footer
  </div>
</div>

Card with only a content section

Preview

Body
<div class="pf-c-card">
  <div class="pf-c-card__body">
    Body
  </div>
</div>

Documentation

Overview

A card is a generic rectangular container that can be used to build other components. A card can have three optional sections: header, body, and footer.

Usage

Class Applied Outcome
.pf-c-card <div> Creates a card containing content.
.pf-c-card__header .pf-c-card Creates the header of a card.
.pf-c-card__body .pf-c-card Creates the body of a card.
.pf-c-card__footer .pf-c-card Creates the footer of a card.