6 #module Modules

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

Each page is built by composing several modules below each other. The module class defined here is used to layout the individual modules with proper spacing and backgrounds.

Examples
Default styling
Oeder Technopnsde et aut aut qui inusament qui que illigen dipsum ut odis dolum. Erovidebit officiet aut que dolorpor und des loder reium quo qui restem ist das qunet into.
.module--mimacom
use mimacom brand color as background
Oeder Technopnsde et aut aut qui inusament qui que illigen dipsum ut odis dolum. Erovidebit officiet aut que dolorpor und des loder reium quo qui restem ist das qunet into.
.module--petrol
use a petrol background
Oeder Technopnsde et aut aut qui inusament qui que illigen dipsum ut odis dolum. Erovidebit officiet aut que dolorpor und des loder reium quo qui restem ist das qunet into.
.module--techblue-medium
techblue medium
Oeder Technopnsde et aut aut qui inusament qui que illigen dipsum ut odis dolum. Erovidebit officiet aut que dolorpor und des loder reium quo qui restem ist das qunet into.
.module--techblue-light
techblue light
Oeder Technopnsde et aut aut qui inusament qui que illigen dipsum ut odis dolum. Erovidebit officiet aut que dolorpor und des loder reium quo qui restem ist das qunet into.
Markup
<section class="module [modifier class]">
  <div class="module__content">
    Oeder Technopnsde et aut aut qui inusament qui que illigen dipsum ut odis dolum. Erovidebit officiet aut que dolorpor und des loder reium quo qui restem ist das qunet into.
  </div>
</section>
Source: scss/components/module/_module.scss, line 11

6.1 #module.image Image Module

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

A module may use an image as background image by adding the .module--image class to the module and setting the background image with an inline style.

An image may optionally use the .module__callout to add a catchy overlay to the image.

Examples
Default styling
Lorem ipsum dolor sit amet

Are you creative and passionate about software development? Do you think unconventionally and act with initiative? Do you want to achieve great things within our team?

.module--image
to add background image support to the module
Lorem ipsum dolor sit amet

Are you creative and passionate about software development? Do you think unconventionally and act with initiative? Do you want to achieve great things within our team?

.module--image-large
to have an extra high image module
Lorem ipsum dolor sit amet

Are you creative and passionate about software development? Do you think unconventionally and act with initiative? Do you want to achieve great things within our team?

Markup
<section class="module [modifier class]" style="background-image: url('demo-images/brand-image-01.jpg')">
  <div class="module__content">
    <div class="module__kicker">Lorem ipsum dolor sit amet</div>
    <div class="module__callout">
      <p class="callout callout--mimacom">Are you creative and passionate about software development? Do you think unconventionally and act with initiative? Do you want to achieve great things within our team?</p>
    </div>
  </div>
</section>
Source: scss/components/module/_module.scss, line 213
Examples
Default styling
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

.module--key-visual
a light key visual
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

.module--key-visual-petrol
a petrol key visual
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

.module--key-visual-dark
a dark key visual
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet.

Markup
<section class="module [modifier class]">
  <div class="module__content">
    <div class="module__kicker">Lorem ipsum dolor sit amet</div>
    <div class="module__callout">
      <p class="callout callout--mimacom">Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</section>
Source: scss/components/module/_module.scss, line 273

6.3 #module.title Module Kickers

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

A module may specify a title, which is automatically adjusted to the background of the module.

Examples
Default styling
Lorem ipsum dolor sit amet
Oeder Technopnsde et aut aut qui inusament qui que illigen dipsum ut odis dolum. Erovidebit officiet aut que dolorpor und des loder reium quo qui restem ist das qunet into.
.module--petrol
use a petrol background
Lorem ipsum dolor sit amet
Oeder Technopnsde et aut aut qui inusament qui que illigen dipsum ut odis dolum. Erovidebit officiet aut que dolorpor und des loder reium quo qui restem ist das qunet into.
.module--mimacom
use mimacom brand color as background
Lorem ipsum dolor sit amet
Oeder Technopnsde et aut aut qui inusament qui que illigen dipsum ut odis dolum. Erovidebit officiet aut que dolorpor und des loder reium quo qui restem ist das qunet into.
.module--techblue
techblue
Lorem ipsum dolor sit amet
Oeder Technopnsde et aut aut qui inusament qui que illigen dipsum ut odis dolum. Erovidebit officiet aut que dolorpor und des loder reium quo qui restem ist das qunet into.
Markup
<section class="module [modifier class]">
  <div class="module__content">
    <div class="module__kicker">Lorem ipsum dolor sit amet</div>
    Oeder Technopnsde et aut aut qui inusament qui que illigen dipsum ut odis dolum. Erovidebit officiet aut que dolorpor und des loder reium quo qui restem ist das qunet into.
  </div>
</section>
Source: scss/components/module/_module.scss, line 93

6.4 #module.anchor Module Anchors

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

A module may define an anchor that can be linked to. The anchor is artificially placed above the module so that when the user jumps to the module, the module appears below the fixed header navigation and is not overlain.

Example
Lorem ipsum dolor sit amet
The contents go here indeed.
Markup
<section class="module module--techblue-light">
  <a id="anchor" class="module__anchor"></a>
  <div class="module__content">
    <div class="module__kicker">Lorem ipsum dolor sit amet</div>
    The contents go here indeed.
  </div>
</section>
Source: scss/components/module/_module.scss, line 326