DOTD Component Library

Section Header: Center 

<div class="c-section-header c-section-header--center l-container--md">
      <div class="c-section-header__title">
          <span class="o-kicker c-section-header__kicker">
              Kicker
          </span>
          <h2 class="o-heading o-heading--xl c-section-header__heading">
              Heading
          </h2>
      </div>
      <div class="o-dek c-section-header__dek">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget urna vitae ligula rutrum consequat. Sed hendrerit mollis tellus.
      </div>
      <a class="o-button c-section-header__button" href="#">
          <span class="o-button__label">
              Button
          </span>
      </a>
  </div>
 
{% set base_class = section_header.base_class|default('c-section-header') %}
{% if section_header %}
  <div class="{{ bem(base_class, section_header.element, section_header.modifiers, section_header.extra) }} l-container--md">
    <div class="{{ bem(base_class, 'title') }}">
      {% include "@kicker" with {
        "kicker": {
          "text": section_header.kicker,
          "extra": bem(base_class, 'kicker')
        }
      } %}
      {% include "@heading" with {
        "heading": {
          "level": "2",
          "size": "xl",
          "text": section_header.heading,
          "extra": bem(base_class, 'heading')
        }
      } %}
    </div>
    {% include "@dek" with {
      "dek": {
        "text": section_header.dek,
        "extra": bem(base_class, 'dek')
      }
    } %}
    {% include "@button" with {
      "button": {
        "url": section_header.button.url,
        "text": section_header.button.text,
        "target": section_header.button.target,
        "icon": section_header.button.icon,
        "extra": bem(base_class, 'button')
      }
    } %}
  </div>
{% endif %}
 
{
  "section_header": {
    "kicker": "Kicker",
    "heading": "Heading",
    "dek": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget urna vitae ligula rutrum consequat. Sed hendrerit mollis tellus.",
    "button": {
      "text": "Button",
      "url": "#"
    },
    "modifiers": "center"
  }
}
  • Content: 
    /* ------------------------------------*\
  $SECTION-HEADER
\*------------------------------------ */

.c-section-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--dotd-space);
  position: relative;

  &__title {
    display: flex;
    flex-direction: column;
    gap: var(--dotd-space-xs);
  }

  &--center {
    align-items: center;
    text-align: center;
  }

  &--split {
    @include media(">medium") {
      max-width: 100% !important;
      margin-left: 0;

      .c-section-header__title,
      .c-section-header__dek {
        max-width: var(--dotd-layout-max-width-sm);
      }

      .c-section-header__button {
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
}
  • URL: /components/raw/section-header/_section-header.scss
  • Filesystem Path: components/02-molecules/section-header/_section-header.scss
  • Size: 747 Bytes

No notes defined.