<header class="claim-header">
    <div class="claim-header__body">
        <h3 class="claim-header__type">Lorem Gibson</h3>
        <h1 class="claim-header__title">
            Keine Architektur <br />ohne Plan.<br />
            <hr class="claim-header__divider" />
            Keine Entwicklung ohne <br />wie und warum.<br />
            <hr class="claim-header__divider" />
            Keine Entscheidung ohne<br />guten Grund.
        </h1>
        <span class="icon-svg icon-arrow-long-down icon--brand-secondary"></span>
    </div>
</header>
<header class="claim-header">
    <div class="claim-header__body">
        <h3 class="claim-header__type">Lorem Gibson</h3>
        <h1 class="claim-header__title">
            Keine Architektur <br />
            ohne Plan.<br />
            <hr class="claim-header__divider"/>
            Keine Entwicklung ohne <br />
            wie und warum.<br />
            <hr class="claim-header__divider"/>
            Keine Entscheidung ohne<br />
            guten Grund.
        </h1>
        <span class="icon-svg icon-arrow-long-down icon--brand-secondary"></span>
    </div>
</header>
/* No context defined. */
  • Content:
    .claim-header {
      display: flex;
      min-height: 100vh;
      align-items: center;
      justify-content: center;
      background-color: $claim-header-bg-color;
    
      &__body {
        max-width: $default-page-layout-content-width-md;
        padding: 0 $spacer-sm;
        text-align: center;
      }
    
      &__type {
        color: $claim-header-type-color;
        font-size: $font-size-base;
        text-transform: uppercase;
      }
    
      &__title {
        margin-bottom: $spacer-md;
        color: $claim-header-title-color;
        font-size: $font-size-xl;
      }
    
      &__divider {
        width: ms(25);
        height: 4px;
        border: 0;
        margin-top: $spacer-base;
        background-color: $claim-header-divider-color;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .claim-header__title {
        margin-bottom: $spacer-base;
        font-size: $font-size-xxxl;
      }
    }
    
  • URL: /components/raw/claim-header/_claim-header.scss
  • Filesystem Path: components/03-organisms/header/claim-header/_claim-header.scss
  • Size: 808 Bytes
  • Handle: @claim-header
  • Preview:
  • Filesystem Path: components/03-organisms/header/claim-header/claim-header.html

No notes defined.