Headings

/assets/modules/elements/headings

  The documentation pages are still being written, please bear with us.

Quick Look

Default Heading

Light Size-5 Heading

<h2 class="heading">Default Heading</h2>
<h3 class="heading-size-5-light">Light Heading</h3>

Sass

Load the button styles by including the headings() mixin:

@include headings();

The following options can be passed to the mixin to customize the headings:

Option Description Default
name The name used when generating the CSS selector 'heading'
group_heading-lineHeight The line-height for headings within a group component 0.8
sizes['optional-sizes'] Map of font-sizes to use typography-config('sizes')
sizes['breakpoints'] The name used when generating the CSS selector ('break-3': 0.85)

The above options can be passed to the mixin like so:

@include headings((
    'input-color': color('brand', 'brand-3'),
    'input-border': 1px solid color('brand', 'brand-3')
));

Examples

Sizes

Size-1 Heading

Size-2 Heading

Default Heading

Size-3 Heading

Size-4 Heading

Size-5 Heading

Size-6 Heading

Size-7 Heading

Size-8 Heading

Size-9 Heading

Modifiers

Heavy Heading

<h3 class="heading-heavy">Heavy Heading</h3>

Light Heading

<h3 class="heading-light">Light Heading</h3>

Uppercase Heading

<h3 class="heading-uppercase">Uppercase Heading</h3>

Light Uppercase Heading

<h3 class="heading-light-uppercase">Light Uppercase Heading</h3>

Components

Heading Group