PF Next

List

Preview

  • First
  • Second
  • Third
<ul class="pf-c-list">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

List Inline

Preview

  • First
  • Second
  • Third
<ul class="pf-c-list pf-m-inline">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

List Grid

Preview

  • First
  • Second
  • Third
  • Fourth
  • Fifth
  • Sixth
<ul class="pf-c-list pf-m-grid">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
  <li>Sixth</li>
</ul>

Documentation

Overview

Typically used with a modifier class.

Usage

Class Applied To Outcome
.pf-c-list <ul> Initiates a list with the same styling as lists in the content component. Required
.pf-m-inline .pf-c-list Modifies for inline list style.
.pf-m-grid .pf-c-list Modifies for grid list style.