# Image Divider Right

Ready

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

`

    <div class="image-divider-right">
        <div class="image-divider-right-content">
            <div class="image-divider-right-textbox">
                <p class="image-divider-right-content-textbox__text">
                    Jeans shrine Chiba fluidity shoes chrome arcology nano-San Francisco singularity
                    vehicle crypto-new yen Blue Nine. Maas Biolabs hacker Freeside uplink dermatrodes
                    franchise gauntlet personality Chiba systema
                    Dex beef noodles biochip personality Chiba post-uplink euro-pop sentient.
                </p>
            </div>
            <img class="image-divider-right-image" itemprop="photo" src="../../assets/bg-images/general/visual-culture-02.webp" alt="INNOQ Mitarbeitende" />
        </div>
    </div>

`
`

    <div class="image-divider-right">
        <div class="image-divider-right-content">
            <div class="image-divider-right-textbox">
                <p class="image-divider-right-content-textbox__text">
                    Jeans shrine Chiba fluidity shoes chrome arcology nano-San Francisco singularity
                    vehicle crypto-new yen Blue Nine. Maas Biolabs hacker Freeside uplink dermatrodes
                    franchise gauntlet personality Chiba systema
                    Dex beef noodles biochip personality Chiba post-uplink euro-pop sentient.
                </p>
            </div>
            <img class="image-divider-right-image" itemprop="photo" src="{{ path '/assets/bg-images/general/visual-culture-02.webp'}}" alt="INNOQ Mitarbeitende" />
        </div>
    </div>

`
`

    /* No context defined. */

`
File:

- Content:
  `

      .image-divider-right-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .image-divider-right-image {
        width: 100%;
      }

      .image-divider-right-textbox {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: $spacer-md;
      }

      .image-divider-right-content-textbox__text {
        @extend %heading-font-bold;

        font-size: $font-size-sm;
        color: $image-divider-right-color;
      }

      //Breakpoints
      @media screen and (min-width: $grid-breakpoint-md) {
        .image-divider-right-image {
          max-width: 70%;
          margin: 0 auto;
        }

        .image-divider-right-textbox {
          padding: $spacer-lg;
        }
      }

      @media screen and (min-width: $grid-breakpoint-lg) {
        .image-divider-right-content {
          flex-direction: row;
          max-width: $default-page-layout-content-width-xl;
          margin: 0 auto;
        }

        .image-divider-right-textbox {
          flex-grow: 1;
          width: 100%;
          padding: 0 $spacer-xxl;
        }

        .image-divider-right-image {
          max-width: calc($default-page-layout-content-width-xl / 2);
          max-height: calc($default-page-layout-content-width-xl / 2);
        }

        .image-divider-right-content-textbox__text {
          font-size: $font-size-lg;
        }
      }

  `
- URL: /components/raw/image-divider-right/_image-divider-right.scss
- Filesystem Path: components/04-molecules/visual-divider/image-divider-right/_image-divider-right.scss
- Size: 1.2 KB

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

No notes defined.