component

Heading

A common heading component composed by a H1 to H3 title and a subtitle.

Basic usage H2:

    <div class="heading">
        <h2 class="heading__title">
            Lorem ipsum dolor sit amet consectetur adipiscing
        </h2>
        <p class="heading__subtitle">
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur
            sint occaecat cupidatat non proident sunt
        </p>
    </div>

Lorem ipsum dolor sit amet consectetur adipiscing

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt

This component can also include a caption title:

    <div class="heading">
        <div class="heading__caption">
            Title
        </div>
        <h2  class="heading__title">
            Lorem ipsum dolor sit amet consectetur adipiscing
        </h2>
        <p class="heading__subtitle">
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur
            sint occaecat cupidatat non proident sunt
        </p>
    </div>

Title

Lorem ipsum dolor sit amet consectetur adipiscing

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur excepteur sint occaecat cupidatat non proident sunt

Variables

    :root {
        --heading-items-gap     : var(--space-md);                    // 32px
        --heading-caption-color : var(--color-primary--40, #808d9e);
        --heading-caption-size  : .875rem;                            // 14px
        --heading-subtitle-size : var(--text-md);                     // 18px
        --heading-text-alignment: center;
    }