app/views/styleguide/03 Typography/_typography.html
<section class="sg-body">
<section class="sg-example" id="3.1">
<h3>
<a href="#3.1">3.1</a>
</h3>
<button class="sg-button sg-view-code">HTML</button>
<div class="sg-description">
<span class="sg-filename">_typography.scss</span>
<h2>Titles <code>h1-h6</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.title-xxl</strong>
-
Hero title, ideally this style would apply only to home page elevator pitch title
</li>
<li>
<strong>.title-xl</strong>
-
Page titles
</li>
<li>
<strong>.title-l</strong>
-
Section titles, used for bold titles marking sections and subtitles accompanying Hero title
</li>
<li>
<strong>.title-m</strong>
-
Subsection titles, katalog thumb titles
</li>
<li>
<strong>.title-s</strong>
-
Thumb name titles
</li>
<li>
<strong>.title-xs</strong>
-
Mini titles, used for Weitere Daten and similar labels
</li>
<li>
<strong>.title-xs-alt</strong>
-
Mini titles, used for media entry authors
</li>
<li>
<strong>.separated</strong>
-
Separated with a bottom border
</li>
<li>
<strong>.separated.light</strong>
-
Separated with a light bottom border
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style=""> <h1 class="$modifier-class">This is a rather long title that might go onto two lines</h1></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.title-xxl</span>
<div style=""> <h1 class="title-xxl">This is a rather long title that might go onto two lines</h1></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.title-xl</span>
<div style=""> <h1 class="title-xl">This is a rather long title that might go onto two lines</h1></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.title-l</span>
<div style=""> <h1 class="title-l">This is a rather long title that might go onto two lines</h1></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.title-m</span>
<div style=""> <h1 class="title-m">This is a rather long title that might go onto two lines</h1></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.title-s</span>
<div style=""> <h1 class="title-s">This is a rather long title that might go onto two lines</h1></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.title-s-alt</span>
<div style=""> <h1 class="title-s-alt">This is a rather long title that might go onto two lines</h1></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.title-xs</span>
<div style=""> <h1 class="title-xs">This is a rather long title that might go onto two lines</h1></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.title-xs-alt</span>
<div style=""> <h1 class="title-xs-alt">This is a rather long title that might go onto two lines</h1></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.separated</span>
<div style=""> <h1 class="separated">This is a rather long title that might go onto two lines</h1></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.separated.light</span>
<div style=""> <h1 class="separated light">This is a rather long title that might go onto two lines</h1></div>
</div>
<div class="sg-html">
<pre class="prettyprint lang-html"><h1 class="">This is a rather long title that might go onto two lines</h1></pre>
</div>
</div>
</section>
<section class="sg-example" id="3.2">
<h3>
<a href="#3.2">3.2</a>
</h3>
<button class="sg-button sg-view-code">HTML</button>
<div class="sg-description">
<span class="sg-filename">_typography.scss</span>
<h2>Paragraphs <code>p</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.paragraph-l</strong>
-
Section titles, used for bold titles marking sections
</li>
<li>
<strong>.paragraph-s</strong>
-
Thumb name titles, Set description and Weitere Daten content
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style=""> <p class="$modifier-class">Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus.</p></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.paragraph-l</span>
<div style=""> <p class="paragraph-l">Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus.</p></div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.paragraph-s</span>
<div style=""> <p class="paragraph-s">Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus.</p></div>
</div>
<div class="sg-html">
<pre class="prettyprint lang-html"><p class="">Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus.</p></pre>
</div>
</div>
</section>
<section class="sg-example" id="3.3">
<h3>
<a href="#3.3">3.3</a>
</h3>
<button class="sg-button sg-view-code">HTML</button>
<div class="sg-description">
<span class="sg-filename">_typography.scss</span>
<h2>Unordered lists <code>ul</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.inline</strong>
-
Inline variant
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<ul class="$modifier-class">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.inline</span>
<div style="">
<ul class="inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div class="sg-html">
<pre class="prettyprint lang-html"><ul class="">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul></pre>
</div>
</div>
</section>
<section class="sg-example" id="3.4">
<h3>
<a href="#3.4">3.4</a>
</h3>
<button class="sg-button sg-view-code">HTML</button>
<div class="sg-description">
<span class="sg-filename">_typography.scss</span>
<h2>Ordered lists <code>ol</code></h2>
<ul class="sg-modifiers">
<li>
<strong>.inline</strong>
-
Inline variant
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<ol class="$modifier-class">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.inline</span>
<div style="">
<ol class="inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</div>
</div>
<div class="sg-html">
<pre class="prettyprint lang-html"><ol class="">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol></pre>
</div>
</div>
</section>
<section class="sg-example" id="3.5">
<h3>
<a href="#3.5">3.5</a>
</h3>
<button class="sg-button sg-view-code">HTML</button>
<div class="sg-description">
<span class="sg-filename">_tables.scss</span>
<h2>Tables</h2>
<ul class="sg-modifiers">
<li>
<strong>.borderless</strong>
-
Borderless tables
</li>
<li>
<strong>.block</strong>
-
Full width table
</li>
</ul>
</div>
<div class="sg-canvases">
<div class="align-left bg-light sg-canvas">
<div style="">
<table class="$modifier-class">
<thead>
<tr>
<td>Column Head 1</td>
<td>Column Head 2</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Tfoot 1</td>
<td>Tfoot 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1 Row 1</td>
<td>Cell 2 Row 1</td>
</tr>
<tr>
<td>Cell 1 Row 2</td>
<td>Cell 2 Row 2</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.borderless</span>
<div style="">
<table class="borderless">
<thead>
<tr>
<td>Column Head 1</td>
<td>Column Head 2</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Tfoot 1</td>
<td>Tfoot 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1 Row 1</td>
<td>Cell 2 Row 1</td>
</tr>
<tr>
<td>Cell 1 Row 2</td>
<td>Cell 2 Row 2</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="align-left bg-light sg-canvas sg-modifier">
<span class="sg-modifier-name">.block</span>
<div style="">
<table class="block">
<thead>
<tr>
<td>Column Head 1</td>
<td>Column Head 2</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Tfoot 1</td>
<td>Tfoot 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1 Row 1</td>
<td>Cell 2 Row 1</td>
</tr>
<tr>
<td>Cell 1 Row 2</td>
<td>Cell 2 Row 2</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sg-html">
<pre class="prettyprint lang-html"><table class="">
<thead>
<tr>
<td>Column Head 1</td>
<td>Column Head 2</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Tfoot 1</td>
<td>Tfoot 2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1 Row 1</td>
<td>Cell 2 Row 1</td>
</tr>
<tr>
<td>Cell 1 Row 2</td>
<td>Cell 2 Row 2</td>
</tr>
</tbody>
</table></pre>
</div>
</div>
</section>
</section>