[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.
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
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.
Aligned icon headers
Account Settings
Manage your account preferences.
Account Settings
Manage your account preferences.
Account Settings
Manage your account preferences.
<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>
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>

One response to “Header

Leave a comment

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