Text Header 

<header class="text-header">
    <div class="text-header__body">
        <h1 class="text-header__title">
            Gemeinsam neue Wege gehen.
            <hr class="text-header__divider" />
            Dinge tun, die etwas bewirken.
            <hr class="text-header__divider" />
            Mit Technologie die Zukunft gestalten.
        </h1>
        <div class="text-header__text">
            Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
            ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
            prosciutto buffalo drumstick strip steak capicola short loin.
            Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
            chuck doner. Pig venison pork chop shoulder corned beef capicola
            meatball.
        </div>
        <span class="icon icon-arrow-long-down icon--brand-primary"></span>
    </div>
</header>
 
<header class="text-header">
    <div class="text-header__body">
        <h1 class="text-header__title">
            Gemeinsam neue Wege gehen.
            <hr class="text-header__divider"/>
            Dinge tun, die etwas bewirken.
            <hr class="text-header__divider"/>
            Mit Technologie die Zukunft gestalten.
        </h1>
        <div class="text-header__text">
            Filet mignon sausage tongue, hamburger porchetta fatback kielbasa flank
            ribeye. Pastrami t-bone pork chop sirloin ham swine cupim brisket
            prosciutto buffalo drumstick strip steak capicola short loin.
            Frankfurter fatback turkey pork chop prosciutto pork ground round tongue
            chuck doner. Pig venison pork chop shoulder corned beef capicola
            meatball.
        </div>
        <span class="icon icon-arrow-long-down icon--brand-primary"></span>
    </div>
</header>
 
/* No context defined. */
  • Content: 
    .text-header {
  background-color: $text-header-bg-color;

  &__body {
    max-width: $default-page-layout-content-width-md;
    margin: $spacer-lg auto;
    padding: $spacer-sm;
    text-align: center;
  }

  &__title {
    margin-bottom: $spacer-base;
    font-size: $font-size-xl;
    color: $text-header-color;
  }

  &__text {
    @extend %body-font-italic;

    margin-bottom: $spacer-base;
    font-size: $font-size-sm;
    line-height: $paragraph-line-height;
    color: $text-header-color;
  }

  &__divider {
    width: ms(25);
    height: 4px;
    margin-top: $spacer-base;
    margin-bottom: $spacer-base;

    background-color: $text-header-color;
    border: 0;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .text-header__body {
    margin: $spacer-xl auto;
  }

  .text-header__title {
    margin-bottom: $spacer-lg;
    font-size: $font-size-2xl;
  }

  .text-header__text {
    font-size: $font-size-lg;
  }
}
  • URL: /components/raw/text-header/_text-header.scss
  • Filesystem Path: components/03-organisms/header/text-header/_text-header.scss
  • Size: 943 Bytes
  • Handle: @text-header
  • Preview:
  • Filesystem Path: components/03-organisms/header/text-header/text-header.html

No notes defined.