layout

The layout component e-container is a useful CSS class to get a good first layout in terms of how to center content. It provides a max-width for certain viewport and is keeping a small margin on tablet and mobile viewport.

If a full width container is needed, the modifier -full-width can be added, e.g to colorize the background. That said, the content of the container, will still not grow over 1120px.

table of content

component variations

layout with image

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div class="e-container">
  <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>

layout with text image

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div class="e-container">
  <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>
</div>

layout with text image full width

This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div class="e-container -full-width -contrast">
  <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>
</div>

additional content

styles SCSS

/* container for on-grid design without full width background color */
.e-container {
  width: calc(100% - 2rem);
  max-width: 70.75rem;
  margin: 0 1rem;

  /* all direct descendent get styles for max-width */
  > * {
    max-width: 70.75rem;
    margin: 0 auto;
  }
}

/* 1120 + 2 * 2rem from margin/padding */
@media (min-width: 1152px) {
  .e-container {
    margin: 0 auto;
  }
}

/* container which is full width to color background on full width */
.e-container.-full-width {
  width: 100%;
  max-width: unset;
  margin: 0;
  padding: 0 1rem;

  > * {
    margin: 0 auto;
  }
}

// breakpoint definitions
@mixin tablet-and-up {

  @media (min-width: 768px) { @content; }
}

@mixin desktop-and-up {

  @media (min-width: 1194px) { @content; }
}

// transitions

$default-transition-easing: cubic-bezier(.38, .04, .35, .96);
$default-transition-timing: 250ms;