Summary
The header pattern is used to define HTML headings. It is possible to turn a header into a subheader. A subheader is an indication that it is equally important as a normal header but instead it indicates content that is not part of the main page.
- HTML Attributes
- HTML Classes
- JavaScript Events
- JavaScript Methods
- SASS Functions
- SASS Mixins
- SASS Variables
There are no attributes defined for this pattern.
There are no classes defined for this pattern.
There are no events defined for this pattern.
There are no methods defined for this pattern.
There are no functions defined for this pattern.
| Name | Description |
|---|---|
zui-header |
A mixin that sets the properties of a header. |
| Name | Description |
|---|---|
zui-header-h1-color |
The color of an h1-element. |
zui-header-h2-color |
The color of an h2-element. |
zui-header-h3-color |
The color of an h3-element. |
zui-header-h4-color |
The color of an h4-element. |
zui-header-h5-color |
The color of an h5-element. |
zui-header-h6-color |
The color of an h6-element. |
zui-header-h1-font-size |
The font-size of an h1-element. |
zui-header-h2-font-size |
The font-size of an h2-element. |
zui-header-h3-font-size |
The font-size of an h3-element. |
zui-header-h4-font-size |
The font-size of an h4-element. |
zui-header-h5-font-size |
The font-size of an h5-element. |
zui-header-h6-font-size |
The font-size of an h6-element. |
zui-header-small-color |
The color of a small element within a header. |
zui-header-small-font-size |
The font-size of a small element within a header. |
zui-subheader-h1-color |
The subheader color of an h1-element. |
zui-subheader-h2-color |
The subheader color of an h2-element. |
zui-subheader-h3-color |
The subheader color of an h3-element. |
zui-subheader-h4-color |
The subheader color of an h4-element. |
zui-subheader-h5-color |
The subheader color of an h5-element. |
zui-subheader-h6-color |
The subheader color of an h6-element. |
zui-subheader-h1-font-size |
The font-size of an h1 subheader element. |
zui-subheader-h2-font-size |
The font-size of an h2 subheader element. |
zui-subheader-h3-font-size |
The font-size of an h3 subheader element. |
zui-subheader-h4-font-size |
The font-size of an h4 subheader element. |
zui-subheader-h5-font-size |
The font-size of an h5 subheader element. |
zui-subheader-h6-font-size |
The font-size of an h6 subheader element. |
Example
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Header 1 This is small
Header 2 This is small
Header 3 This is small
Header 4 This is small
Header 5 This is small
Header 6 This is small
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Markup
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>
<h1>Header 1 <small>This is small</small></h1>
<h2>Header 2 <small>This is small</small></h2>
<h3>Header 3 <small>This is small</small></h3>
<h4>Header 4 <small>This is small</small></h4>
<h5>Header 5 <small>This is small</small></h5>
<h6>Header 6 <small>This is small</small></h6>
<h1 class="zui-subheader">Header 1</h1>
<h2 class="zui-subheader">Header 2</h2>
<h3 class="zui-subheader">Header 3</h3>
<h4 class="zui-subheader">Header 4</h4>
<h5 class="zui-subheader">Header 5</h5>
<h6 class="zui-subheader">Header 6</h6>
