# Triplet Divider

Ready

- HTML
- View
- Context
- Assets
- Info
- Notes

`

    <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">
                    Fü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 ermö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">
                    Fü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 ermö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. */

`
File:

- 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:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/visual-divider/triplet-divider/triplet-divider.html

No notes defined.