<div class="image-divider-center bg-image-culture-03">
    <div class="image-divider-center__textbox">
        <h1 class="image-divider-center__title bg-image-culture-03">Ein Titel</h1>
        <p class="image-divider-center__textbox__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.
        </p>
        <span class="icon-svg icon-arrow-long-down icon--brand-primary"></span>
    </div>
</div>
<div class="image-divider-center bg-image-culture-03">
    <div class="image-divider-center__textbox">
        <h1 class="image-divider-center__title bg-image-culture-03">Ein Titel</h1>
        <p class="image-divider-center__textbox__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.
        </p>
        <span class="icon-svg icon-arrow-long-down icon--brand-primary"></span>
    </div>
</div>
/* No context defined. */
  • Content:
    $divider-center-textbox-offset: $spacer-xxl * 2;
    
    .image-divider-center {
      @extend %page-header;
    
      min-height: 50vh;
      padding-top: $spacer-lg;
      margin-bottom: $divider-center-textbox-offset;
    
      &__title {
        @extend %punch-in;
    
        padding: 0 $spacer-md;
        margin-bottom: $spacer-md;
        font-size: $font-size-xxl;
        text-align: center;
      }
    }
    
    .image-divider-center__textbox {
      position: relative;
      top: $divider-center-textbox-offset;
      display: flex;
      max-width: 630px;
      box-sizing: content-box;
      flex-direction: column;
      align-items: center;
      padding: $spacer-md;
      margin-top: $spacer-md;
      background-color: $image-divider-center-bg-color;
      text-align: center;
    }
    
    .image-divider-center__textbox__text {
      @extend %body-font-italic;
    
      color: $image-divider-center-color;
      font-size: $font-size-sm;
      // IE11 Hack
      @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
        max-width: 100%;
      }
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .image-divider-center {
        margin-bottom: $divider-center-textbox-offset;
      }
    
      .image-divider-center__title {
        margin-bottom: $spacer-lg;
        font-size: $font-size-xxxxl;
      }
    
      .image-divider-center__textbox {
        top: $divider-center-textbox-offset;
        width: 630px;
        padding: $spacer-lg;
      }
    
      .image-divider-center__textbox__text {
        font-size: $font-size-lg;
      }
    }
    
  • URL: /components/raw/image-divider-center/_image-divider-center.scss
  • Filesystem Path: components/04-molecules/visual-elements/visual-divider/image-divider-center/_image-divider-center.scss
  • Size: 1.4 KB
  • Handle: @image-divider-center
  • Preview:
  • Filesystem Path: components/04-molecules/visual-elements/visual-divider/image-divider-center/image-divider-center.html

No notes defined.