[header] shortcode arguments
classes:
Size -
[tiny|small|medium|large|huge]
Color -
[red|green|blue|...]
Float -
[left floated|right floated]
Alignment -
[left aligned|right aligned|justified|center aligned]
Attachment -
[top attached|attached|bottom attached]
Icon -
[icon]
Other -
[dividing|block|inverted|disabled]
icon:
Name of the icon to use.
image:
Link to image to use.
image_size:
Image size.
alt:
Alternate text for the image.
tag:
HTML header tag.
[subheader] shortcode arguments
classes:
Letters -
[normal]
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.
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
Molly
Coordinator
Elyse
Developer
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.
Image headers
Header icon
Placeholder

Header icon
Icons8 base64
<header image="//placehold.it/50">Placeholder</header>
<header icon image="data:image/png;base64,...">Icons8 base64</header>
Notes
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>

Leave a Reply

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