Triplet Divider 

<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. */
  • 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: $triplet-divider-bg-color-primary;
  color: $triplet-divider-color-secondary;
}

.triplet-divider__right {
  background-color: $triplet-divider-bg-color-secondary;
  text-align: right;
  color: $triplet-divider-color-primary;
}

.triplet-divider__right,
.triplet-divider__left {
  @extend %heading-font-heavy;

  flex-grow: 1;
  font-size: $font-size-xl;
}

.triplet-divider__right,
.triplet-divider__left,
.triplet-divider__center {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: $spacer-base;
  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.1 KB
  • Handle: @triplet-divider
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/visual-divider/triplet-divider/triplet-divider.html

No notes defined.