Header

Header shortcode arguments
Classes
Sizetiny small medium large huge tiny display small display display large display huge display
Colorred orange yellow olive green teal blue violet purple pink brown grey black
Floatleft floated right floated
Alignmentleft aligned right aligned justified center aligned
Attachmenttop attached attached bottom attached
Iconicon
Otherdividing block inverted disabled
iconName of the icon to use.
imageLink of the image to use.
image_sizeHeader image size.
altAlternate text for the image.
tagHTML header tag (h1-h6). When omitted the header is a div with role="heading" and aria-level attribute based on the header size. Headers with subheaders, icons or images are not W3C valid when using a HTML header tag.
cardSet to "true" when header is used in a card (wraps the header in additional markup: div.content > div.header > .ui.header).
Subheader shortcode arguments
Classes
Lettersnormal
Hierarchical page headers

First header

Second header

Third header

Fourth header

Fifth header
<header tag="h1">First header</header>
<header tag="h2">Second header</header>
<header tag="h3">Third header</header>
<header tag="h4">Fourth header</header>
<header tag="h5">Fifth header</header>
Notes
Result is the same as regular HTML header tags, except wpautop is disabled inside shortcodes.
Content headers
Huge header
Large header
Medium header
Small header
Tiny header
<header huge>Huge header</header>
<header large>Large header</header>
<header medium>Medium header</header>
<header small>Small header</header>
<header tiny>Tiny header</header>
Notes
Size scales based on parent container.
Display headers
Huge header
Large header
Medium header
Small header
Tiny header
<header huge display>Huge header</header>
<header large display>Large header</header>
<header medium display>Medium header</header>
<header small display>Small header</header>
<header tiny display>Tiny header</header>
Normal text display headers
Huge header
Large header
Medium header
Small header
Tiny header
<header huge normal text display>Huge header</header>
<header large normal text display>Large header</header>
<header medium normal text display>Medium header</header>
<header small normal text display>Small header</header>
<header tiny normal text display>Tiny header</header>
Sub headers
Account Settings
Manage your account settings and set e-mail preferences.
Account Settings
Manage your account settings and set e-mail preferences.
Manage your account settings and set e-mail preferences.
<header>
  Account Settings
  <subheader>Manage your account settings and set e-mail preferences.</subheader>
</header>

<header>
  Account Settings
  <subheader normal>Manage your account settings and set e-mail preferences.</subheader>
</header>

<subheader>Manage your account settings and set e-mail preferences.</subheader>
Sub header in a list
List image
Molly
Coordinator
List image
Elyse
Developer
List image
Eve
Project Manager
<list horizontal>
  <item image="/avatars/1s.png">
    <subheader>Molly</subheader>
    Coordinator
  </item>
  <item image="/avatars/2s.png">
    <subheader>Elyse</subheader>
    Developer
  </item>
  <item image="/avatars/3s.png">
    <subheader>Eve</subheader>
    Project Manager
  </item>
</list>
Icon headers
User
Account Settings
Manage your account settings and set e-mail preferences.
<header icon="user">User</header>
<header icon="settings">
  Account Settings
  <subheader>Manage your account settings and set e-mail preferences.</subheader>
</header>
Top icon header
Account Settings
Manage your account settings and set e-mail preferences.
<header huge icon icon="settings">
  Account Settings
  <subheader>Manage your account settings and set e-mail preferences.</subheader>
</header>
Notes
Adding the .icon class to the header will place the icon on top of the header.
Aligned icon headers
Account Settings
Manage your account preferences.
Account Settings
Manage your account preferences.
Account Settings
Manage your account preferences.
Mobile center aligned
Responsive.
<header left aligned icon icon="settings">
  Account Settings
  <subheader>Manage your account preferences.</subheader>
</header>
<header center aligned icon icon="settings">
  Account Settings
  <subheader>Manage your account preferences.</subheader>
</header>
<header right aligned icon icon="settings">
  Account Settings
  <subheader>Manage your account preferences.</subheader>
</header>
<header left aligned mca icon icon="mobile">
  Mobile center aligned
  <subheader>Responsive.</subheader>
</header>
Image headers
Header icon
Mini image
Default
Header icon
Mini avatar image
Header icon
Tiny image
Header icon
Small image
Header icon
Medium image
Header icon
Large image
Header icon
Big image
Header icon
Huge image
Header icon
Massive image
Header icon
Massive rounded image
Header icon
Massive bordered image
Header icon
Icons8 base64

Header icon
Icons8 base64

Header icon
Icons8 base64

Header icon
Image size: icon
<header image="//imgplaceholder.com/50x50?font-family=OpenSans">Mini image<subheader normal>Default</subheader></header>
<header image="//imgplaceholder.com/50x50?font-family=OpenSans" image_size="mini avatar">Mini avatar image</header>
<header image="//imgplaceholder.com/50x50?font-family=OpenSans" image_size="tiny">Tiny image</header>
<header image="//imgplaceholder.com/50x50?font-family=OpenSans" image_size="small">Small image</header>
<header image="//imgplaceholder.com/50x50?font-family=OpenSans" image_size="medium">Medium image</header>
<header image="//imgplaceholder.com/50x50?font-family=OpenSans" image_size="large">Large image</header>
<header image="//imgplaceholder.com/50x50?font-family=OpenSans" image_size="big">Big image</header>
<header image="//imgplaceholder.com/50x50?font-family=OpenSans" image_size="huge">Huge image</header>
<header image="//imgplaceholder.com/50x50?font-family=OpenSans" image_size="massive">Massive image</header>
<header image="//imgplaceholder.com/50x50?font-family=OpenSans" image_size="massive rounded">Massive rounded image</header>
<header image="//imgplaceholder.com/50x50?font-family=OpenSans" image_size="massive bordered">Massive bordered image</header>
<header icon image="data:image/png;base64,...">Icons8 base64</header>
<header icon image="data:image/png;base64,..." image_size="medium">Icons8 base64</header>
<header icon image="data:image/png;base64,..." image_size="massive">Icons8 base64</header>
<header icon image="//imgplaceholder.com/256x256?font-family=OpenSans" image_size="rounded icon">Image size: icon</header>
Notes
Adding the icon class to header moves the image to the top.
Image size icon tries to use full size of the image.
Supports ~40k free icons from Icons8.
Dividing headers

First header

Second header

Third header

<header dividing tag="h1">First header</header>
<header dividing tag="h2">Second header</header>
<header dividing tag="h3">Third header</header>
Block headers

First header

Second header

Third header

First header
Second header
Third header
<header block tag="h1">First header</header>
<header block tag="h2">Second header</header>
<header block tag="h3">Third header</header>

<header huge inverted block>First header</header>
<header large inverted block>Second header</header>
<header inverted block>Third header</header>
Attached headers
Top attached



Attached



Bottom attached
<header top attached block>Top attached</header>
<segment attached>...</segment>
<header attached>Attached</header>
<segment attached>...</segment>
<header bottom attached>Bottom attached</header>
Colored headers
Red header
Orange header
Yellow header
Olive header
Green header
Teal header
Blue header
Violet header
Purple header
Pink header
Brown header
Grey header
Black header
<header red>Red header</header>
<header orange>Orange header</header>
<header yellow>Yellow header</header>
<header olive>Olive header</header>
<header green>Green header</header>
<header teal>Teal header</header>
<header blue>Blue header</header>
<header violet>Violet header</header>
<header purple>Purple header</header>
<header pink>Pink header</header>
<header brown>Brown header</header>
<header grey>Grey header</header>
<header black>Black header</header>
Usage in card
Account Settings
Manage your account settings and set e-mail preferences.
Header in a card without card attribute.
Account Settings
Manage your account settings and set e-mail preferences.
Header in a card with card attribute.
<card>
  <header>
    Account Settings
    <subheader normal>Manage your account settings and set e-mail preferences.</subheader>
  </header>
  <cardextra>Header in a card without card attribute.</cardextra>
</card>
<card>
  <header card="true">
    Account Settings
    <subheader normal>Manage your account settings and set e-mail preferences.</subheader>
  </header>
  <cardextra>Header in a card with card attribute.</cardextra>
</card>
Notes
The card attribute can be used to add additional markup around the header for displaying it inside a card.

One response to “Header

Leave a comment

Your email address will not be published. Required fields are marked *