Files

• _headings.scss
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/elements/headings

Module Overview

Examples

Styles

<h3 class="heading">Lorem Ipsum Dolor</div>

Heading - Heavy

<h3 class="heading-heavy">Lorem Ipsum Dolor</div>

Heading - Light

<h3 class="heading-light">Lorem Ipsum Dolor</div>

Heading - Uppercase

<h3 class="heading-uppercasw">Lorem Ipsum Dolor</div>

Heading - Brand 1

<h3 class="heading-brand1">Lorem Ipsum Dolor</div>

Heading - Highlight

<h3 class="heading-highlight"><b>Lorem Ipsum Dolor</b></div>

<h3 class="heading-highlight-dark"><b>Lorem Ipsum Dolor</b></div>

Heading - Strikethrough

<h3 class="heading-strikethrough"><span>Lorem Ipsum Dolor</span></div>

Heading - Spaced

<h3 class="heading-spaced">Lorem Ipsum Dolor<</div>

Heading - Dotted

<h3 class="heading-dotted">Lorem Ipsum Dolor</div>

Heading - Flush

<h3 class="heading-flush">Lorem Ipsum Dolor</div>

Sizes

For each size in the typography module, a modifier for the headings is generated for that size.

<h3 class="heading-size-4">Lorem Ipsum Dolor</div>

Mixing & Matching

You can of course mix and match any and all of the above combinations.

<h3 class="heading-light-uppercase-size-4-brand-1-dotted">Lorem Ipsum Dolor</div>

Heading Group

<header class="heading_group">
    <h3 class="heading-size-3">Primary Heading</h3>
    <h4 class="heading-light">Secondary Heading</h4>
</header>

Heading Group - Dots

<header class="heading_group-dots text-center">
    <h4 class="heading-uppercase-light-brand-1-spaced-size-3">Our Portfolio</h4>
    <h2 class="heading-uppercase-heavy-size-6 font-2">Some Recent Work</h2>
</header>

Heading Group - Block

<header class="heading_group-block text-center">
    <h4 class="heading-uppercase-light-brand-1-spaced-size-3">Our Portfolio</h4>
    <h2 class="heading-uppercase-heavy-size-6 font-2">Some Recent Work</h2>
</header>

Heading Group - Small

<header class="heading_group-small text-center">
    <h3 class="heading-size-3">Our Portfolio</h3>
    <h4 class="heading-light">Some Recent Work</h4>
</heder>

Heading Group - Large

<header class="heading_group-large text-center">
    <h4 class="heading-uppercase-light-brand-1-spaced-size-3">Our Portfolio</h4>
    <h2 class="heading-uppercase-heavy-size-6 font-2">Some Recent Work</h2>
</heder>

Heading Group - Special Icon

<header class="heading_group text-center">
    <h4 class="heading-uppercase-light-brand-1-spaced-size-3"><span>Our Portfolio</span></h4>
    <h2 class="heading-uppercase-heavy-size-6 font-2"><span>Some Recent Work</span></h2>
    <div class="heading_icon">
        <i class="fa fa-magic"></i>
    </div>
</header>

Heading Group - Date

<header class="heading_group">
    <div class="heading_date">
        <div>Sep</div>
        <div>23</div>
    </div>
    <h2 class="heading-heavy-size-4 font-2">Lorem ipsum dolor sit amet</h2>
    <h3 class="heading-light-size-2">Posted in <a href="../../../html-themes">HTML Themes</a></h3>
</header>

Customizing

The headings can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
highlight-color	color('brand', 'primary')	The background color of text when using the 'highlight' modifier.
highlight-dark-color	color('greyscale', 'grey-6')	The background color of text when using the highlight and dark modifiers.
strikethrough-width	75px	The width of each side of the strikethrough line.
spaced-spacing	0.35em	The letter-spacing of text when using the spaced modifier.
border	1px dotted rgba(black, 0.2)	The bottom-border of a heading when using the border modifier.
group-dots-color	rgba(black, 0.4)	The color of the dots when using the dots modifier on the group component.
group-dots-size	24px	The size of the dots when using the dots modifier on the group component.
group-block-padding	6em	The padding of heading groups when using the block modifier.

To change one of the above values, pass your new value(s) to the headings() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include headings((
    'group-dots-color' : #9B58B5,
    'group-dots-size'  : 12px
));