# Claim Header

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

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

`
File:

- 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:
  - With layout
  - Component only
- Filesystem Path: components/03-organisms/header/claim-header/claim-header.html

No notes defined.