Molecules
Table of content
What are Molecules?
Molecules consist of one or more nested rules, but each of them must not be more than an atom itself.
For example, using icons or buttons in molecules is valid, but using other molecules is not.
To mark an element as molecule, annotate it with the @molecule tag, followed by the name of the component.
Tables
Download Table
| Dateiname | Datum | Typ | Größe |
|---|---|---|---|
| Visus Partnercare | 22.11.2017 | 1.38 MB | |
| Visus Partnercare | 22.11.2017 | 1.38 MB | |
| Visus Partnercare | 22.11.2017 | 1.38 MB |
<table class="c-download-table">
<thead class="c-download-table__head">
<tr class="c-download-table__row c-download-table__row--heading">
<th class="c-download-table__cell c-download-table__cell--heading">Dateiname</th>
<th class="c-download-table__cell c-download-table__cell--heading">Datum</th>
<th class="c-download-table__cell c-download-table__cell--heading">Typ</th>
<th class="c-download-table__cell c-download-table__cell--heading">Größe</th>
</tr>
</thead>
<tbody class="c-download-table__body">
<tr class="c-download-table__row c-download-table__row--link">
<td class="c-download-table__cell c-download-table__cell--link"><a href="#" class="c-download-table__link">Visus Partnercare</a></td>
<td class="c-download-table__cell c-download-table__cell--link"><a href="#" class="c-download-table__link">22.11.2017</a></td>
<td class="c-download-table__cell c-download-table__cell--link"><a href="#" class="c-download-table__link">PDF</a></td>
<td class="c-download-table__cell c-download-table__cell--link"><a href="#" class="c-download-table__link">1.38 MB</a></td>
</tr>
<tr class="c-download-table__row c-download-table__row--link">
<td class="c-download-table__cell c-download-table__cell--link"><a href="#" class="c-download-table__link">Visus Partnercare</a></td>
<td class="c-download-table__cell c-download-table__cell--link"><a href="#" class="c-download-table__link">22.11.2017</a></td>
<td class="c-download-table__cell c-download-table__cell--link"><a href="#" class="c-download-table__link">PDF</a></td>
<td class="c-download-table__cell c-download-table__cell--link"><a href="#" class="c-download-table__link">1.38 MB</a></td>
</tr>
<tr class="c-download-table__row c-download-table__row--link">
<td class="c-download-table__cell c-download-table__cell--link"><a href="#" class="c-download-table__link">Visus Partnercare</a></td>
<td class="c-download-table__cell c-download-table__cell--link"><a href="#" class="c-download-table__link">22.11.2017</a></td>
<td class="c-download-table__cell c-download-table__cell--link"><a href="#" class="c-download-table__link">PDF</a></td>
<td class="c-download-table__cell c-download-table__cell--link"><a href="#" class="c-download-table__link">1.38 MB</a></td>
</tr>
</tbody>
</table>Table
| Colhead | Colhead | Colhead | |
|---|---|---|---|
| Rowhead | Value | Value | |
| Rowhead | Value | Highlight | Value |
| Rowhead | Value | Value | Value |
<table class="c-table">
<thead class="c-table__head">
<tr class="c-table__row c-table__row--heading">
<th class="c-table__cell c-table__cell--heading"></th>
<th class="c-table__cell c-table__cell--heading">Colhead</th>
<th class="c-table__cell c-table__cell--heading">Colhead</th>
<th class="c-table__cell c-table__cell--heading">Colhead</th>
</tr>
</thead>
<tbody class="c-table__body">
<tr class="c-table__row">
<th class="c-table__cell c-table__cell--heading">Rowhead</th>
<td class="c-table__cell">Value</td>
<td class="c-table__cell">Value</td>
<td class="c-table__cell"Value></td>
</tr>
<tr class="c-table__row">
<th class="c-table__cell c-table__cell--heading">Rowhead</th>
<td class="c-table__cell">Value</td>
<td class="c-table__cell c-table__cell--highlight">Highlight</td>
<td class="c-table__cell">Value</td>
</tr>
<tr class="c-table__row">
<th class="c-table__cell c-table__cell--heading">Rowhead</th>
<td class="c-table__cell">Value</td>
<td class="c-table__cell">Value</td>
<td class="c-table__cell">Value</td>
</tr>
</tbody>
<caption class="c-table__caption">Description</caption>
</table>Image Teaser and Text Teaser
<div class="o-grid o-grid--wrap">
<div class="o-grid__cell o-grid__cell--width-100 o-grid__cell--width-50@medium o-grid__cell--width-33@large">
<div class="c-teaser">
<a href="#">
<picture class="o-picture c-teaser__picture">
<source srcset="https://unsplash.it/1400/1000?random=0.7742156065401506" media="(min-width: 600px)">
<img class="o-image c-teaser__image" title="Title" alt="Alt" src="https://unsplash.it/1400/1000?random=0.4547056962696783">
</picture>
</a>
<header class="c-teaser__header">
<h3 class="c-heading">Image Teaser</h3>
</header>
<div class="c-teaser__body">
<p class="c-teaser__paragraph">amet tempor officia laborum exercitation ullamco ea minim nostrud nulla ad aute ad dolor sit officia eiusmod est officia nisi</p>
</div>
<footer class="c-teaser__footer">
<a href="#" class="c-teaser__link">Weiterlesen
<svg class="c-teaser__link-svg" xmlns="http://www.w3.org/2000/svg" width="7px" height="11px" viewBox="0 0 6 10">
<path d="M6.33,5,1.51.56a.64.64,0,0,0-.84,0,.52.52,0,0,0,0,.77L5.08,5.38.67,9.48a.5.5,0,0,0,0,.76.61.61,0,0,0,.42.16.61.61,0,0,0,.42-.16L6.33,5.76a.5.5,0,0,0,0-.76Z" transform="translate(-0.5 -0.4)"/>
</svg>
</a>
</footer>
</div>
</div>
<div class="o-grid__cell o-grid__cell--width-100 o-grid__cell--width-50@medium o-grid__cell--width-33@large">
<div class="c-teaser">
<a href="#">
<picture class="o-picture c-teaser__picture">
<source srcset="https://unsplash.it/1160/400?random=0.8481453265133734" media="(min-width: 600px)">
<img class="o-image c-teaser__image" title="Title" alt="Alt" src="https://unsplash.it/1160/400?random=0.35587313152691946">
</picture>
</a>
<header class="c-teaser__header">
<h3 class="c-heading">Image Teaser</h3>
</header>
<div class="c-teaser__body">
<p class="c-teaser__paragraph">nisi Lorem aute Lorem labore laboris eiusmod cillum culpa ad ex in consequat nisi minim incididunt ex reprehenderit ad minim</p>
</div>
<footer class="c-teaser__footer">
<a href="#" class="c-teaser__link">Weiterlesen
<svg class="c-teaser__link-svg" xmlns="http://www.w3.org/2000/svg" width="7px" height="11px" viewBox="0 0 6 10">
<path d="M6.33,5,1.51.56a.64.64,0,0,0-.84,0,.52.52,0,0,0,0,.77L5.08,5.38.67,9.48a.5.5,0,0,0,0,.76.61.61,0,0,0,.42.16.61.61,0,0,0,.42-.16L6.33,5.76a.5.5,0,0,0,0-.76Z" transform="translate(-0.5 -0.4)"/>
</svg>
</a>
</footer>
</div>
</div>
<div class="o-grid__cell o-grid__cell--width-100 o-grid__cell--width-50@medium o-grid__cell--width-33@large">
<div class="c-teaser">
<header class="c-teaser__header">
<h3 class="c-heading">Text Teaser</h3>
</header>
<div class="c-teaser__body">
<p class="c-teaser__paragraph">adipisicing enim pariatur enim cupidatat duis amet eiusmod consectetur dolor in eiusmod nostrud veniam voluptate irure aliqua et enim aute dolor veniam reprehenderit irure sunt ipsum Lorem minim dolor anim</p>
</div>
<footer class="c-teaser__footer">
<a href="#" class="c-teaser__link">Weiterlesen
<svg class="c-teaser__link-svg" xmlns="http://www.w3.org/2000/svg" width="7px" height="11px" viewBox="0 0 6 10">
<path d="M6.33,5,1.51.56a.64.64,0,0,0-.84,0,.52.52,0,0,0,0,.77L5.08,5.38.67,9.48a.5.5,0,0,0,0,.76.61.61,0,0,0,.42.16.61.61,0,0,0,.42-.16L6.33,5.76a.5.5,0,0,0,0-.76Z" transform="translate(-0.5 -0.4)"/>
</svg>
</a>
</footer>
</div>
</div>
</div>