18 #patterns Patterns

The patterns rendered here serve as integration tests and library for large patterns that are used across the site.

Source: scss/components/patterns/_patterns.scss, line 1
Example

Digital.
Innovation.
Engineers.

Markup
<section class="module module--image-large" style="background-image: url('demo-images/brand-image-01.jpg')">
  <div class="module__content">
    <div class="module__callout">
      <p class="callout callout--large">Digital.<br>Innovation.<br>Engineers.</p>
    </div>
  </div>
</section>
Source: scss/components/patterns/_patterns.scss, line 11

18.2 #patterns.illustrations Text/Illustrations

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Two column layout for medium to large amounts of text with an accompanying illustration. Columns may also be switched.

Example
mimacom company

Diese Headline über die mimacom company

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc:

Markup
<section class="module">
  <div class="module__content">
    <div class="module__kicker">mimacom company</div>
    <div class="row">
      <div class="col-md-6">
        <h1>Diese Headline über die mimacom company</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
        <p>Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc:</p>
      </div>
      <div class="col-md-6">
        <img src="demo-images/illustration-01.png">
      </div>
    </div>
  </div>
</section>
Source: scss/components/patterns/_patterns.scss, line 29
Example
News
Event

mimacom auf der CEBIT

June 1, 2017 Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.

read more
Jobs

Unbefristet: Senior Software Developer gesucht

June 1, 2017 Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.

read more
Business Development

Neuer Standort in Dubai eröffnet

June 1, 2017 Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.

read more
Cases

XY-Bank mit neuem Portal

June 1, 2017 Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.

read more
Markup
<section class="module">
  <div class="module__content">
    <div class="module__kicker">News</div>
    <div class="row">
      <div class="col-md-6">
        <div class="kicker">Event</div>
        <h1>mimacom auf der CEBIT</h1>
        <p><span class="text--techblue-medium">June 1, 2017</span> Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
        <a href="#!" class="link">read more</a>
      </div>
      <div class="col-md-6">
        <div class="kicker">Jobs</div>
        <h1>Unbefristet: Senior Software Developer gesucht</h1>
        <p><span class="text--techblue-medium">June 1, 2017</span> Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
        <a href="#!" class="link">read more</a>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="kicker">Business Development</div>
        <h1>Neuer Standort in Dubai eröffnet</h1>
        <p><span class="text--techblue-medium">June 1, 2017</span> Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
        <a href="#!" class="link">read more</a>
      </div>
      <div class="col-md-6">
        <div class="kicker">Cases</div>
        <h1>XY-Bank mit neuem Portal</h1>
        <p><span class="text--techblue-medium">June 1, 2017</span> Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.</p>
        <a href="#!" class="link">read more</a>
      </div>
    </div>
  </div>
</section>
Source: scss/components/patterns/_patterns.scss, line 56