<div class="two-column-image-divider">
    <figure class="two-column-image-divider__left-image">
        <img src="../../assets/visual-trainings-03.jpg">
    </figure>
    <figure class="two-column-image-divider__right-image">
        <img src="../../assets/visual-trainings-04.jpg">
    </figure>
</div>
<div class="two-column-image-divider">
  <figure class="two-column-image-divider__left-image">
    <img src={context.app.uri('assets/visual-trainings-03.jpg')} />
  </figure>
  <figure class="two-column-image-divider__right-image">
    <img src={context.app.uri('assets/visual-trainings-04.jpg')} />
  </figure>
</div>
/* No context defined for this component. */
  • 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 {
      flex-basis: 50%;
      flex-grow: 1;
      margin: 0;
      overflow: hidden;
    
      > 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/02-molecules/visual-elements/visual-divider/two-column-image-divider/_two-column-image-divider.scss
  • Size: 620 Bytes
  • Handle: @two-column-image-divider
  • Preview:
  • Filesystem Path: components/02-molecules/visual-elements/visual-divider/two-column-image-divider/two-column-image-divider.html

There are no notes for this item.