PDJ Brandbox

section-header: centered 

<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.