Header
Header shortcode arguments
| Classes |
| ||||||||||||||
icon | Name of the icon to use. | ||||||||||||||
image | Link of the image to use. | ||||||||||||||
image_size | Header image size. | ||||||||||||||
alt | Alternate text for the image. | ||||||||||||||
tag | HTML 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. | ||||||||||||||
card | Set 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 |
|
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 using icons, images or subheaders inside these headers is not W3C valid HTML.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.Subheader attribute
First headerLorem ipsum dolor sit amet
Second headerLorem ipsum dolor sit amet
Third headerLorem ipsum dolor sit amet
Fourth headerLorem ipsum dolor sit amet
Fifth headerLorem ipsum dolor sit amet
Huge header
Lorem ipsum dolor sit amet
Large header
Lorem ipsum dolor sit amet
Medium header
Lorem ipsum dolor sit amet
Small header
Lorem ipsum dolor sit amet
Tiny header
Lorem ipsum dolor sit amet
<header tag="h1" subheader="Lorem ipsum dolor sit amet">First header</header>
<header tag="h2" subheader="Lorem ipsum dolor sit amet">Second header</header>
<header tag="h3" subheader="Lorem ipsum dolor sit amet">Third header</header>
<header tag="h4" subheader="Lorem ipsum dolor sit amet">Fourth header</header>
<header tag="h5" subheader="Lorem ipsum dolor sit amet">Fifth header</header>
<header huge subheader="Lorem ipsum dolor sit amet">Huge header</header>
<header large subheader="Lorem ipsum dolor sit amet">Large header</header>
<header medium subheader="Lorem ipsum dolor sit amet">Medium header</header>
<header small subheader="Lorem ipsum dolor sit amet">Small header</header>
<header tiny subheader="Lorem ipsum dolor sit amet">Tiny header</header>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 subheader="Manage your account settings and set e-mail preferences.">
Account Settings
</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.
Click here
Go to checkout
<header icon="user">User</header>
<header icon="settings">
Account Settings
<subheader>Manage your account settings and set e-mail preferences.</subheader>
</header>
<header url="#">
<content left>
Click here
<subheader normal>Go to checkout</subheader>
</content>
<icon right arrow />
</header>Top icon header
Account Settings
Manage your account settings and set e-mail preferences.
<header huge icon icon="settings" subheader="Manage your account settings and set e-mail preferences.">
Account Settings
</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.