PF Next

Card Migration

PatternFly 3 Cards

Preview

Card Title

Card Contents

Card Title

Card Contents

<div class="cards-pf">
  <div class="container-fluid container-cards-pf">
    <div class="row row-cards-pf">
      <div class="col-sm-3">
        <div class="card-pf">
          <div class="card-pf-heading">
            <h2 class="card-pf-title">
              Card Title
            </h2>
          </div>
          <div class="card-pf-body">
            <p>
              Card Contents
            </p>
          </div>
        </div>
      </div>
      <div class="col-sm-3">
        <div class="card-pf">
          <div class="card-pf-heading">
            <h2 class="card-pf-title">
              Card Title
            </h2>
          </div>
          <div class="card-pf-body">
            <p>
              Card Contents
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

PatternFly 4 Cards

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>

Documentation

Overview

When converting PatternFly 3 components to PatternFly 4 components, you must also take into consideration the layouts and sizings that PatternFly 3 utilized from Bootstrap 3.

Usage

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