<div class="section-header section-header--centered">
    <div class="section-header__inner section--8">
        <h2 class="section-header__heading heading heading--4">Section heading</h2>

        <div class="section-header__description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, delectus?</div>
    </div>
</div>
<div
  {{#each attrs }}{{ @key }}='{{ this }}'{{/each}}
  class="section-header{{#if modifier}} section-header--{{ modifier }}{{/if}}">
  <div class="section-header__inner section--{{#if section}}{{ section }}{{else}}8{{/if}}">
    <h{{ type }} class="section-header__heading heading heading--{{ size }}{{#if headingclass}} {{ headingclass }}{{/if}}">{{ heading }}</h{{ type }}>
    {{#if description }}

    <div class="section-header__description">{{ description }}</div>
    {{/if}}
  </div>
</div>
heading: Section heading
description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, delectus?
type: 2
size: 4
section: 8
modifier: centered
  • Content:
    .section-header {
      padding: 0 var(--gutter--bucket);
    
      .combine-with & {
        padding: 0;
      }
    }
    
    .section-header__inner:not([class*="section--"]) {
      max-width: var(--section--8);
      margin: 0 auto;
    }
    
    .section-header--left {
      text-align: left;
    }
    
    .section-header--centered {
      text-align: center;
    }
    
    .section-header--right {
      text-align: right;
    }
    
    .section-header__heading {
      font-weight: 700;
    }
    
    .section-header__description {
      margin-top: var(--gap--2);
      color: var(--color--neutrals-7);
      font-size: var(--p--2);
    }
    
  • URL: /components/raw/section-header/section-header.scss
  • Filesystem Path: ../src/03_molecules/section-header/section-header.scss
  • Size: 524 Bytes

No notes defined.