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-direction: column;
}

.triplet-divider__center {
  text-align: center;
}

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

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

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

  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;

  min-height: $triplet-divider-height-sm;
  padding: $spacer-base;
}

@media screen and (min-width: $grid-breakpoint-md) {
  .triplet-divider {
    display: grid;
    grid-template-areas:
      'divider-left divider-right'
      'divider-center divider-center';
    grid-template-columns: 50% 50%;
    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
    grid-template-rows: auto;
  }

  .triplet-divider__right {
    grid-area: divider-right;
    text-align: left;
  }

  .triplet-divider__left {
    grid-area: divider-left;
  }

  .triplet-divider__center {
    grid-area: divider-center;
  }

  .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/04-molecules/visual-divider/triplet-divider/_triplet-divider.scss
  • Size: 1.5 KB
  • Handle: @triplet-divider
  • Preview:
  • Filesystem Path: components/04-molecules/visual-divider/triplet-divider/triplet-divider.html

No notes defined.