text image

The Text image molecule can be used to show an image inside a copy text block.

table of content

description
component variations
style scss

component variations

H2 with paragraph, image with caption, paragraph

Text View h2 bold

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<div class="m-text-image">
  <div class="a-text">
    <h2>Text View h2 bold</h2>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
      sit amet.
    </p>
  </div>
  <div class="m-text-image__order-wrapper">
    <figure class="a-image">
      <div class="a-image__ratioWrapper">
        <img
          src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
          srcset="
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
          "
          alt="Lorem ipsum dolor sit amet"
        />
      </div>
      <figcaption>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor.
      </figcaption>
    </figure>
    <div class="a-text">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
        ipsum dolor sit amet.
      </p>
    </div>
  </div>
</div>

H2 without paragraph, image without caption, paragraph

Open on blank page

Text View h2 bold

<div class="m-text-image">
  <div class="a-text"><h2>Text View h2 bold</h2></div>
  <div class="m-text-image__order-wrapper">
    <figure class="a-image">
      <div class="a-image__ratioWrapper">
        <img
          src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
          srcset="
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
          "
          alt="Lorem ipsum dolor sit amet"
        />
      </div>
    </figure>
    <div class="a-text">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
        ipsum dolor sit amet.
      </p>
    </div>
  </div>
</div>

H2 with paragraph, image with caption and paragraph are ordered right to left

Open on blank page

Text View h2 bold

<div class="m-text-image">
  <div class="a-text">
    <h2>Text View h2 bold</h2>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
      sit amet.
    </p>
  </div>
  <div
    class="m-text-image__order-wrapper m-text-image__order-wrapper--right-to-left"
  >
    <figure class="a-image">
      <div class="a-image__ratioWrapper">
        <img
          src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
          srcset="
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
          "
          alt="Lorem ipsum dolor sit amet"
        />
      </div>
      <figcaption>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor.
      </figcaption>
    </figure>
    <div class="a-text">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
        ipsum dolor sit amet.
      </p>
    </div>
  </div>
</div>

H2 with paragraph, image without caption and paragraph are ordered left to right

Open on blank page

Text View h2 bold

<div class="m-text-image">
  <div class="a-text">
    <h2>Text View h2 bold</h2>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
      sit amet.
    </p>
  </div>
  <div
    class="m-text-image__order-wrapper m-text-image__order-wrapper--left-to-right"
  >
    <figure class="a-image">
      <div class="a-image__ratioWrapper">
        <img
          src="https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg"
          srcset="
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-400w.jpg   400w,
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-800w.jpg   800w,
            https://brandguide-cdn.azureedge.net/frontend-kit/example-image-1600w.jpg 1600w
          "
          alt="Lorem ipsum dolor sit amet"
        />
      </div>
    </figure>
    <div class="a-text">
      <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
        ipsum dolor sit amet.
      </p>
    </div>
  </div>
</div>

additional content

styles SCSS

.m-text-image :first-child {
  h1:last-child,
  h2:last-child,
  h3:last-child,
  h4:last-child,
  h5:last-child,
  h6:last-child {
    margin-bottom: 1rem;
  }

  p:last-child {
    margin-bottom: 2rem;
  }
}

.m-text-image__order-wrapper {
  display: flex;
  flex-direction: column;

  .a-image {
    margin-bottom: 2rem;
  }

  &--left-to-right {
    flex-direction: row;

    .a-image {
      margin-right: 2rem;
      margin-bottom: 0;
    }
  }

  &--right-to-left {
    flex-direction: row-reverse;

    .a-image {
      margin-left: 2rem;
      margin-bottom: 0;
    }
  }

  :first-child,
  :last-child {
    min-width: calc(50% - 1rem);
  }
}