2 #type Type

Having a nice typeface is essential.

Source: scss/components/type/_type.scss, line 1

2.1 #type.headings Headings

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

Headings are restricted to two levels, namely h1 and h2. In case you cannot use a h1 or h2 element you may add either the .h1 or .h2 class any element to achieve the respective heading styling.

Example

h1. Debissim istiurest lare re, aut lant.

h2. Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.

h1. Debissim istiurest lare re, aut lant.
h2. Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.
Markup
<h1>h1. Debissim istiurest lare re, aut lant.</h1>
<h2>h2. Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.</h2>
<div class="h1">h1. Debissim istiurest lare re, aut lant.</div>
<div class="h2">h2. Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.</div>
Source: scss/components/type/_type.scss, line 41
Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Markup
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Cum sociis natoque <a href="#!">penatibus et magnis</a> dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
Source: scss/components/type/_type.scss, line 74

2.3 #type.deck Deck

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

A .deck is the introductory sentence which is visually emphasized. You may also color the first few words with .text--mimacom. A deck may also be a prominent link to another page.

Examples
Default styling

Velis cum sunt quo corem aut ulparci musanihicia sedipid que doluptiatem.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

.deck--link
Add a link to the deck.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Markup
<p class="deck [modifier class]"><a href="#!"><span class="text--mimacom">Velis cum sunt</span> quo corem aut ulparci musanihicia sedipid que doluptiatem.</a></p>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
Source: scss/components/type/_type.scss, line 111

2.4 #type.kicker Kicker

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

Kickers are placed right above a headline and typically consist of only a few words. There are two variations of the kicker element.

Examples
Default styling
Lorem ipsum dolor sit amet
.kicker--alt
adds a line in front of the kicker for enhanced visual weight
Lorem ipsum dolor sit amet
Markup
<div class="kicker [modifier class]">Lorem ipsum dolor sit amet</div>
Source: scss/components/type/_type.scss, line 307

2.6 #type.callout Callout

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

Callouts are used to present headlines or catchy teaser sentences on a colored background, preferably a meaningful image.

There are variations with different colors and font sizes. Whenever possible, the default settings of size and color should be used. In case you really need to (we urge you not to) you may use the .text-- classes to change the font color.

Examples
Default styling
Digital.
Innovation.
Enginners.
Digital Healthcare wie voluptatest milibus andit velenih icipienit molorrotem dis.
.callout--small
less intrusive
Digital.
Innovation.
Enginners.
Digital Healthcare wie voluptatest milibus andit velenih icipienit molorrotem dis.
.callout--large
more intrusive
Digital.
Innovation.
Enginners.
Digital Healthcare wie voluptatest milibus andit velenih icipienit molorrotem dis.
Markup
<div class="kss-demo-bg-grey">
  <div class="callout [modifier class]">
    Digital.<br>Innovation.<br>Enginners.
  </div>
</div>
<div class="kss-demo-bg-grey">
  <div class="callout [modifier class]">
    Digital Healthcare wie voluptatest milibus andit velenih icipienit molorrotem dis.
  </div>
</div>
Source: scss/components/type/_type.scss, line 226

2.8 #type.misc Miscellaneous

When building components, try to avoid using all styles in this misc section. Instead, try to build modules with less fine-granular design elements.

Source: scss/components/type/_type.scss, line 361
Example

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

rendered as bold text

rendered as italicized text

Markup
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>rendered as bold text</strong></p>
<p><em>rendered as italicized text</em></p>
Source: scss/components/type/_type.scss, line 370

2.8.2 #type.misc.address Address

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

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Example
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Full Name
first.last@example.com
Markup
<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">first.last@example.com</a>
</address>
Source: scss/components/type/_type.scss, line 388
Examples
Default styling

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
.blockquote-reverse
Add .blockquote-reverse for a blockquote with right-aligned content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Markup
<blockquote class="[modifier class]">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<blockquote class="[modifier class]">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Source: scss/components/type/_type.scss, line 414