Chap WordPress theme
Chap

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
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.

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

Mini image
Default

Mini avatar image

Tiny image

Small image

Medium image

Large image

Big image

Huge image

Massive image

Massive rounded image

Massive bordered image

Icons8 base64


Icons8 base64


Icons8 base64


Image size: icon

[header image="//placehold.co/50x50"]Mini image[subheader normal]Default[/subheader][/header]
[header image="//placehold.co/50x50" image_size="mini avatar"]Mini avatar image[/header]
[header image="//placehold.co/50x50" image_size="tiny"]Tiny image[/header]
[header image="//placehold.co/50x50" image_size="small"]Small image[/header]
[header image="//placehold.co/50x50" image_size="medium"]Medium image[/header]
[header image="//placehold.co/50x50" image_size="large"]Large image[/header]
[header image="//placehold.co/50x50" image_size="big"]Big image[/header]
[header image="//placehold.co/50x50" image_size="huge"]Huge image[/header]
[header image="//placehold.co/50x50" image_size="massive"]Massive image[/header]
[header image="//placehold.co/50x50" image_size="massive rounded"]Massive rounded image[/header]
[header image="//placehold.co/50x50" 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="//placehold.co/256x256" 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.