<div class="triplet-divider">
    <div class="triplet-divider__left">Die einen designen Produkte.</div>
    <div class="triplet-divider__right">Die anderen entwickeln Software.</div>
    <div class="triplet-divider__center">
        <div class="page-layout-xl--default">
            <h2>INNOQ kann beides.</h2>
            <p class="lead">Für uns kann ein ausgereiftes Produkt nur dann entstehen, wenn Design
                und Entwicklung Hand in Hand arbeiten. Deshalb haben wir Module entwickelt,
                die ein ganzheitliches Vorgehen ermöglichen. Mit Methoden, die zum richtigen
                Zeitpunkt greifen – von der ersten vagen Idee bis zum fertigen Produkt,
                die von Anfang an Nutzergruppen mit einbeziehen und Prozesse beschleunigen.</p>
        </div>
    </div>
</div>
<div class="triplet-divider">
    <div class="triplet-divider__left">
        Die einen designen Produkte.
    </div>
    <div class="triplet-divider__right">
        Die anderen entwickeln Software.
    </div>
    <div class="triplet-divider__center">
        <div class="page-layout-xl--default">
            <h2>INNOQ kann beides.</h2>
            <p class="lead">
                Für uns kann ein ausgereiftes Produkt nur dann entstehen, wenn Design
                und Entwicklung Hand in Hand arbeiten. Deshalb haben wir Module entwickelt,
                die ein ganzheitliches Vorgehen ermöglichen. Mit Methoden, die zum richtigen
                Zeitpunkt greifen – von der ersten vagen Idee bis zum fertigen Produkt,
                die von Anfang an Nutzergruppen mit einbeziehen und Prozesse beschleunigen.
            </p>
        </div>
    </div>
</div>
/* No context defined for this component. */
  • Content:
    $triplet-divider-height-sm: 2 * $spacer-xxl;
    $triplet-divider-height-md: 4 * $spacer-xxl;
    
    .triplet-divider {
      display: flex;
      flex-wrap: wrap;
    }
    
    .triplet-divider__center {
      flex-grow: 2;
      text-align: center;
    }
    
    .triplet-divider__left {
      background-color: $brand-blue;
      color: $brand-red;
    }
    
    .triplet-divider__right {
      background-color: $brand-red;
      text-align: right;
      color: $brand-blue;
    }
    
    .triplet-divider__right,
    .triplet-divider__left {
      flex-grow: 1;
      font-family: $font-family-sans-serif-heavy;
      font-size: $h2-font-size;
    }
    
    .triplet-divider__right,
    .triplet-divider__left,
    .triplet-divider__center {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: $container-spacer-x $container-spacer-y;
      min-height: $triplet-divider-height-sm;
    }
    
    @media screen and (min-width: $grid-breakpoint-md) {
      .triplet-divider__right {
        text-align: left;
      }
    
      .triplet-divider__right,
      .triplet-divider__left,
      .triplet-divider__center {
        min-height: $triplet-divider-height-md;
      }
    }
    
  • URL: /components/raw/triplet-divider/_triplet-divider.scss
  • Filesystem Path: components/02-molecules/visual-elements/visual-divider/triplet-divider/_triplet-divider.scss
  • Size: 1 KB
  • Handle: @triplet-divider
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/visual-divider/triplet-divider/triplet-divider.html

There are no notes for this item.