10 #summary Summary

A summary is used to display a set of links to other pages in form of a summarized list of items. Each item in the summary may use text and an icon to display its target. Different design variations exist for the summary module.

Source: scss/components/summary/_summary.scss, line 1

10.1 #summary.icons-top-condensed Icons with Short Text

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

To be used if the text to be displayed is very short (only a few words).

This is the ICONS_TOP_CONDENSED design.

Examples
Default styling
Services
Digitalstrategie, Beratung
Mehr dazu
Digitalstrategie, Beratung
Mehr dazu
Wir packen an und schaffen Lösungen
Mehr dazu
Wir packen an und schaffen Lösungen
Mehr dazu
.summary--icons-top-condensed
This is the ICONS_TOP_CONDENSED design
Services
Digitalstrategie, Beratung
Mehr dazu
Digitalstrategie, Beratung
Mehr dazu
Wir packen an und schaffen Lösungen
Mehr dazu
Wir packen an und schaffen Lösungen
Mehr dazu
.summary--icons-top-condensed-no-link
This is the ICONS_TOP_CONDENSED_NO_LINK design
Services
Markup
<section class="module module--techblue-light">
  <div class="module__content">
    <div class="module__kicker">Services</div>
    <div class="summary [modifier class]">
      <div class="summary__item">
        <div class="summary__item-icon"><i class="icon-digital-strategy-circle"></i></div>
        <div class="summary__item-text">Digitalstrategie, Beratung</div>
        <a href="#!" class="link">Mehr dazu</a>
      </div>
      <div class="summary__item">
        <div class="summary__item-icon"><i class="icon-digital-strategy-circle"></i></div>
        <div class="summary__item-text">Digitalstrategie, Beratung</div>
        <a href="#!" class="link">Mehr dazu</a>
      </div>
      <div class="summary__item">
        <div class="summary__item-icon"><i class="icon-digital-strategy-circle"></i></div>
        <div class="summary__item-text">Wir packen an und schaffen Lösungen</div>
        <a href="#!" class="link">Mehr dazu</a>
      </div>
      <div class="summary__item">
        <div class="summary__item-icon"><i class="icon-digital-strategy-circle"></i></div>
        <div class="summary__item-text">Wir packen an und schaffen Lösungen</div>
        <a href="#!" class="link">Mehr dazu</a>
      </div>
    </div>
  </div>
</section>
Source: scss/components/summary/_summary.scss, line 61

10.2 #summary.icons-with-long-text Icons with Long Text

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

To be used if the text to be displayed is longer (1-2 sentences) and you have an icon for each item.

Note: Do not use the default styling!

Examples
Default styling
.summary--icons-top
This is the ICONS_TOP design.
.summary--icons-left
This is the ICONS_LEFT design.
.summary--icons-left-condensed
This is the ICONS_LEFT_CONDENSED design.
Markup
<section class="module module--techblue-light">
  <div class="module__content">
    <div class="module__kicker">Services</div>
    <div class="summary [modifier class]">
      <div class="summary__item">
        <div class="summary__item-icon"><i class="icon-digital-strategy-circle"></i></div>
        <div class="summary__item-text"><a href="#!">Digital Platforms officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a></div>
        <a href="#!" class="link">Mehr dazu</a>
      </div>
      <div class="summary__item">
        <div class="summary__item-icon"><i class="icon-digital-strategy-circle"></i></div>
        <div class="summary__item-text"><a href="#!">Cloud-native Apps officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a></div>
        <a href="#!" class="link">Mehr dazu</a>
      </div>
      <div class="summary__item">
        <div class="summary__item-icon"><i class="icon-digital-strategy-circle"></i></div>
        <div class="summary__item-text"><a href="#!">Cloud systems officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a></div>
        <a href="#!" class="link">Mehr dazu</a>
      </div>
      <div class="summary__item">
        <div class="summary__item-icon"><i class="icon-digital-strategy-circle"></i></div>
        <div class="summary__item-text"><a href="#!">Enterprise search officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a></div>
        <a href="#!" class="link">Mehr dazu</a>
      </div>
    </div>
  </div>
</section>
Source: scss/components/summary/_summary.scss, line 129

10.3 #summary.text-only Text Only

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

To be used if the text to be displayed is longer (1-5 sentences) and you don't want icons.

Note: Do not use the default styling!

Examples
Default styling
.summary--text-only
This is the TEXT_ONLY design.
.summary--text-only-condensed
This is the TEXT_ONLY_CONDENSED design.
Markup
<section class="module module--techblue-light">
  <div class="module__content">
    <div class="module__kicker">Services</div>
    <div class="summary [modifier class]">
      <div class="summary__item">
        <h3 class="summary__item-title"><a href="#!">mimacom consulting</a></h3>
        <div class="summary__item-text"><a href="#!">Digital Platforms officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a></div>
        <a href="#!" class="link">Mehr dazu</a>
      </div>
      <div class="summary__item">
        <h3 class="summary__item-title"><a href="#!">mimacom consulting</a></h3>
        <div class="summary__item-text"><a href="#!">Cloud-native Apps officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a></div>
        <a href="#!" class="link">Mehr dazu</a>
      </div>
      <div class="summary__item">
        <h3 class="summary__item-title"><a href="#!">mimacom consulting</a></h3>
        <div class="summary__item-text"><a href="#!">Cloud systems officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a></div>
        <a href="#!" class="link">Mehr dazu</a>
      </div>
      <div class="summary__item">
        <h3 class="summary__item-title"><a href="#!">mimacom consulting</a></h3>
        <div class="summary__item-text"><a href="#!">Enterprise search officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a></div>
        <a href="#!" class="link">Mehr dazu</a>
      </div>
    </div>
  </div>
</section>
Source: scss/components/summary/_summary.scss, line 290
Markup
<section class="module module--techblue-light">
  <div class="module__content">
    <div class="module__kicker">References</div>
    <div class="summary summary--image [modifier class]">
      <div class="summary__item summary__item--large" style="background-image: url('demo-images/brand-image-01.jpg')">
        <div class="summary__item-text">
          <a href="#!" class="callout callout--small callout--link">Digital Platforms officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a><br>
          <a href="#!" class="link link--solid">Mehr dazu</a>
        </div>
      </div>
      <div class="summary__item" style="background-image: url('demo-images/brand-image-01.jpg')">
        <div class="summary__item-text">
          <a href="#!" class="callout callout--small callout--link">Cloud-native Apps officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a><br>
          <a href="#!" class="link link--solid">Mehr dazu</a>
        </div>
      </div>
      <div class="summary__item" style="background-image: url('demo-images/brand-image-01.jpg')">
        <div class="summary__item-text">
          <a href="#!" class="callout callout--small callout--link">Cloud systems officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a><br>
          <a href="#!" class="link link--solid">Mehr dazu</a>
        </div>
      </div>
      With logo
      <div class="summary__item summary__item--large" style="background-image: url('demo-images/brand-image-01.jpg')">
        <div class="summary__item-logo" style="background-image: url('key-visual/logo_flowable.svg');"></div>
        <div class="summary__item-text">
          <a href="#!" class="callout callout--small callout--link">Digital Platforms officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a><br>
          <a href="#!" class="link link--solid">Mehr dazu</a>
        </div>
      </div>
      <div class="summary__item" style="background-image: url('demo-images/brand-image-01.jpg')">
        <div class="summary__item-logo" style="background-image: url('key-visual/logo_flowable.svg');"></div>
        <div class="summary__item-text">
          <a href="#!" class="callout callout--small callout--link">Cloud-native Apps officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a><br>
          <a href="#!" class="link link--solid">Mehr dazu</a>
        </div>
      </div>
      <div class="summary__item" style="background-image: url('demo-images/brand-image-01.jpg')">
        <div class="summary__item-logo" style="background-image: url('key-visual/logo_flowable.svg');"></div>
        <div class="summary__item-text">
          <a href="#!" class="callout callout--small callout--link">Cloud systems officiet aut que dolorpor reium quo qui restem quisin. Und wenn lorem, dann ipsum.</a><br>
          <a href="#!" class="link link--solid">Mehr dazu</a>
        </div>
      </div>
    </div>
  </div>
</section>
Source: scss/components/summary/_summary.scss, line 394