Madek UI Elements

  1. 0 Scratchpad
  2. 1 Layout
  3. 2 Colors
  4. 3 Typography
  5. 4 Buttons & Links
  6. 5 Forms
  7. 6 Icons
  8. 7 Components
  9. 8 Combos
  10. 9 Past Spec
  11. 10 Upcoming - Actions n Stats
  12. 11 Upcoming - Relations
  13. 12 React

3 Typography

3.1

_typography.scss

Titles h1-h6

Modifiers:

  • .title-xxl – Hero title, ideally this style would apply only to home page elevator pitch title
  • .title-xl – Page titles
  • .title-l – Section titles, used for bold titles marking sections and subtitles accompanying Hero title
  • .title-m – Subsection titles, katalog thumb titles
  • .title-s – Thumb name titles
  • .title-xs – Mini titles, used for Weitere Daten and similar labels
  • .title-xs-alt – Mini titles, used for media entry authors
  • .separated – Separated with a bottom border
  • .separated.light – Separated with a light bottom border

This is a rather long title that might go onto two lines

<h1>This is a rather long title that might go onto two lines</h1>
.title-xxl

This is a rather long title that might go onto two lines

<h1 class='title-xxl'>This is a rather long title that might go onto two lines</h1>
.title-xl

This is a rather long title that might go onto two lines

<h1 class='title-xl'>This is a rather long title that might go onto two lines</h1>
.title-l

This is a rather long title that might go onto two lines

<h1 class='title-l'>This is a rather long title that might go onto two lines</h1>
.title-m

This is a rather long title that might go onto two lines

<h1 class='title-m'>This is a rather long title that might go onto two lines</h1>
.title-s

This is a rather long title that might go onto two lines

<h1 class='title-s'>This is a rather long title that might go onto two lines</h1>
.title-xs

This is a rather long title that might go onto two lines

<h1 class='title-xs'>This is a rather long title that might go onto two lines</h1>
.title-xs-alt

This is a rather long title that might go onto two lines

<h1 class='title-xs-alt'>This is a rather long title that might go onto two lines</h1>
.separated

This is a rather long title that might go onto two lines

<h1 class='separated'>This is a rather long title that might go onto two lines</h1>
.separated.light

This is a rather long title that might go onto two lines

<h1 class='separated light'>This is a rather long title that might go onto two lines</h1>

3.2

_typography.scss

Paragraphs p

Modifiers:

  • .paragraph-l – Section titles, used for bold titles marking sections
  • .paragraph-s – Thumb name titles, Set description and Weitere Daten content

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>
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>
.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 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>
.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 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>

3.3

_typography.scss

Unordered lists ul

Modifiers:

  • .inline – Inline variant
  • Item 1
  • Item 2
  • Item 3
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
.inline
  • Item 1
  • Item 2
  • Item 3
<ul class='inline'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

3.4

_typography.scss

Ordered lists ol

Modifiers:

  • .inline – Inline variant
  1. Item 1
  2. Item 2
  3. Item 3
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
.inline
  1. Item 1
  2. Item 2
  3. Item 3
<ol class='inline'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

3.5

_tables.scss

Tables table

Modifiers:

  • .borderless – Borderless tables
  • .block – Full width table
Column Head 1 Column Head 2
Tfoot 1 Tfoot 2
Cell 1 Row 1 Cell 2 Row 1
Cell 1 Row 2 Cell 2 Row 2 
<table>
<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>
.borderless
Column Head 1 Column Head 2
Tfoot 1 Tfoot 2
Cell 1 Row 1 Cell 2 Row 1
Cell 1 Row 2 Cell 2 Row 2 
<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>
.block
Column Head 1 Column Head 2
Tfoot 1 Tfoot 2
Cell 1 Row 1 Cell 2 Row 1
Cell 1 Row 2 Cell 2 Row 2 
<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>