# Two Column Image Divider Asymmetric

Ready

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

`

    <section class="two-column-image-divider-asymmetric">
        <figure>
            <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--hoch" src="http://via.placeholder.com/600x800" alt="Bild mit Umrandung" />
        </figure>
        <figure>
            <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--hoch" src="http://via.placeholder.com/600x800" alt="Bild mit Umrandung" />
        </figure>
    </section>

    <section class="two-column-image-divider-asymmetric">
        <figure>
            <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--quer" src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
        </figure>
        <figure>
            <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--quer" src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
        </figure>
    </section>

`
`

    <section class="two-column-image-divider-asymmetric">
        <figure>
            <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--hoch" src="http://via.placeholder.com/600x800" alt="Bild mit Umrandung" />
        </figure>
        <figure>
            <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--hoch" src="http://via.placeholder.com/600x800" alt="Bild mit Umrandung" />
        </figure>
    </section>

    <section class="two-column-image-divider-asymmetric">
        <figure>
            <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__left-image--quer" src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
        </figure>
        <figure>
            <img class="two-column-image-divider-asymmetric__left-image two-column-image-divider-asymmetric__right-image--quer" src="http://via.placeholder.com/800x600" alt="Bild mit Umrandung" />
        </figure>
    </section>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      $two-column-image-divider-height-md: 3.5 * $spacer-xxl;
      $two-column-image-divider-height-lg: 6 * $spacer-xxl;

      .two-column-image-divider-asymmetric {
        display: flex;
        flex-direction: column;
        margin: 0 auto;
      }

      .two-column-image-divider-asymmetric__left-image,
      .two-column-image-divider-asymmetric__right-image {
        max-height: 100%;
        object-fit: cover;
      }

      @media screen and (min-width: $grid-breakpoint-xl) {
        .two-column-image-divider-asymmetric {
          flex-direction: row;
          gap: $spacer-xxl;
          align-items: center;
          justify-content: space-between;

          width: 100%;
        }

        .two-column-image-divider-asymmetric__left-image--hoch {
          height: calc($two-column-image-divider-height-lg / 1.3);
        }

        .two-column-image-divider-asymmetric__right-image--hoch {
          height: $two-column-image-divider-height-lg;
        }

        .two-column-image-divider-asymmetric__left-image--quer {
          height: calc($two-column-image-divider-height-md / 1.2);
        }

        .two-column-image-divider-asymmetric__right-image--quer {
          height: $two-column-image-divider-height-md;
        }
      }

  `
- URL: /components/raw/two-column-image-divider-asymmetric/_two-column-image-divider-asymmetric.scss
- Filesystem Path: components/04-molecules/visual-divider/two-column-image-divider-asymmetric/_two-column-image-divider-asymmetric.scss
- Size: 1.1 KB

- Handle: @two-column-image-divider-asymmetric
- Preview:
  - With layout
  - Component only
- Filesystem Path: components/04-molecules/visual-divider/two-column-image-divider-asymmetric/two-column-image-divider-asymmetric.html

No notes defined.