UI Components
Headers alpha

Page Sub-Header

Example


<UIPageSubHeader
   text='State Names and Codes (All Caps)'
   editable={true}/>

Usage

The page sub-header should appear at max 1 time per page, and should appear directly under the Page Header

Section Header

Example ⚡


<UIHeader>
  Description
  <UIHeader.Actions>
    <UIHeader.ButtonAction>
      Edit
    </UIHeader.ButtonAction>
  </UIHeader.Actions>
</UIHeader>

Optional Props for UIHeader.ButtonAction

See UIButton

Usage

Section Headers should appear at the top of every section. There should only be one Section Header per section.

Action is an optional parameter

Inherits from...

  • UISectionHeaderText (level:high)
  • UISectionSeprator (level:high)

Section Sub-Header

Example ⚡


<UIHeader
  level='medium'>
  4 Endorsements
</UIHeader>

Usage

Section Sub-Headers should appear below the Section Header. There can be many sub-headers for each section.

Inherits from...

  • UISectionHeaderText (level:medium)
  • UISectionSeprator (level:medium)

Changelog

  • December 9, 2016 - Promoted to Alpha and updated to automated docs
  • July 20, 2016 - Updated code snippets and added example images as placeholders