Pagebar

Pagebars are used to show the page title, secondary information as well as page-wide actions.

<div className="c-pagebar">
  <div className="c-pagebar__icon">
    <div className="c-icon-box">
      <FontAwesomeIcon icon={faStroopwafel} />
    </div>
  </div>
  <div className="c-pagebar__header">
    <div className="c-pagebar__title">
      Page title
    </div>
    <div className="c-pagebar__subtitle">
      Secondary information
    </div>
  </div>
  <div className="c-pagebar__actions">
    <button className="c-button c-button--sm c-button--white">
      Action
    </button>
  </div>
</div>

Implementation

Types	Name
Elements
Wrapper	`.c-pagebar`
Icon	`.c-pagebar__icon`
Header	`.c-pagebar__header`
Title	`.c-pagebar__title`
Subtitle	`.c-pagebar__subtitle`	Optional
Actions	`.c-pagebar__actions`	Optional
States	None
Modifiers	None