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

No notes defined.