Section Header 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/section-header.css?cb=">

<div class="section-header">
    <p class="section-header__eyebrow">Section Eyebrow text</p>
    <h2 class="section-header__title">Section Header</h2>

    <p class="section-header__subline">Section Header subline text lorem ipsum si descomado ipvarat</p>
</div>
 
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/section-header.css?cb={{cacheBuster}}">
{{/if}}

<div class="section-header">
    {{#if eyebrow}}
        <p class="section-header__eyebrow">{{eyebrow}}</p>
    {{/if}}
    <h2 class="section-header__title">{{title}}</h2>

    {{#if subline}}
        <p class="section-header__subline">{{subline}}</p>
    {{/if}}
</div>
 
{
  "theme": "default",
  "firstInstance": true,
  "eyebrow": "Section Eyebrow text",
  "title": "Section Header",
  "subline": "Section Header subline text lorem ipsum si descomado ipvarat"
}
  • Content: 
    @import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';

.section-header {
    text-align: center;

    &__eyebrow {
        @extend %p--lead;
    }

    &__title {
        @extend %heading02;
    }

    &__subline {
        @extend %p--body;
    }
}
  • URL: /components/raw/section-header/section-header.scss
  • Filesystem Path: source/patterns/03-components/text/section-header/section-header.scss
  • Size: 278 Bytes

Where to use

On any page, to structure content and add hierarchy to other components.