<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>
        <img src="../../assets/arrow-long-down-white.svg">
    </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>
        <img src={context.app.uri('assets/arrow-long-down-white.svg')} />
    </div>
</header>
/* No context defined for this component. */
  • Content:
    .claim-header {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: $claim-header-bg-color;
      min-height: 100vh;
    
      &__body {
        padding: 0 $spacer-sm;
        max-width: $default-page-layout-content-width-md;
        text-align: center;
      }
    
      &__type {
        text-transform: uppercase;
        line-height: $claim-header-type-line-height-small;
        color: $claim-header-type-color;
        font-size: $claim-header-type-font-size-small;
      }
    
      &__title {
        margin-bottom: $spacer-md;
        line-height: $claim-header-title-line-height-small;
        color: $claim-header-title-color;
        font-size: $claim-header-title-font-size-small;
      }
    
      &__divider {
        margin-top: $spacer-base;
        border: 2px solid $claim-header-divider-color;
        width: ms(25);
      }
    }
    
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .claim-header__type {
        line-height: $claim-header-type-line-height;
        font-size: $claim-header-type-font-size;
      }
    
      .claim-header__title {
        margin-bottom: $spacer-base;
        line-height: $claim-header-title-line-height;
        font-size: $claim-header-title-font-size;
      }
    }
    
  • URL: /components/raw/claim-header/_claim-header.scss
  • Filesystem Path: components/02-molecules/visual-elements/header/claim-header/_claim-header.scss
  • Size: 1.1 KB
  • Handle: @claim-header
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/header/claim-header/claim-header.html

There are no notes for this item.