# Two Column Image Divider

Ready

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

`

    <div class="two-column-image-divider">
        <figure class="two-column-image-divider__left-image">
            <img src="../../assets/bg-images/general/visual-trainings-03.webp" />
        </figure>
        <figure class="two-column-image-divider__right-image">
            <img src="../../assets/bg-images/general/visual-trainings-04.webp" />
        </figure>
    </div>

`
`

    <div class="two-column-image-divider">
        <figure class="two-column-image-divider__left-image">
            <img src="{{ path '/assets/bg-images/general/visual-trainings-03.webp'}}" />
        </figure>
        <figure class="two-column-image-divider__right-image">
            <img src="{{ path '/assets/bg-images/general/visual-trainings-04.webp'}}" />
        </figure>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      $two-column-image-divider-height-sm: 2 * $spacer-xxl;
      $two-column-image-divider-height-md: 4 * $spacer-xxl;

      .two-column-image-divider {
        display: flex;
      }

      .two-column-image-divider__left-image,
      .two-column-image-divider__right-image {
        overflow: hidden;
        flex-basis: 50%;
        flex-grow: 1;
        margin: 0;

        > img {
          max-width: 100%;
          height: $two-column-image-divider-height-sm;
          object-fit: cover;
        }
      }

      @media screen and (min-width: $grid-breakpoint-md) {
        .two-column-image-divider__left-image > img,
        .two-column-image-divider__right-image > img {
          height: $two-column-image-divider-height-md;
        }
      }

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

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

No notes defined.