Structures
Table of content
What are Structures?
Structures are the most complex types. They may even consist of multiple molecules
or other structures again. The header of this page is surely a structure.
To mark a variable or mixin as a structure, annotate it with the @structure tag, optionally followed by a sub-section.
Stage
Stage Slider
Report
Die Personifizierung
der IT
Stage Slider Modifiers
Modifier
Description
.c-stage__slide--white
White Text
.c-stage__slide--black
Black Text
<div class="c-stage c-stage--slider js-slider--stage" data-arrows="true" data-pager="false" data-autoplay="true" data-speed="6000">
<div class="c-stage__selector">
<div class="c-stage__slide c-stage__slide--white">
<picture class="c-stage__picture o-picture" title="Title Text">
<source srcset="https://unsplash.it/1920/870?random=0.4808331885092876" media="(min-width: 100rem)">
<source srcset="https://unsplash.it/1600/870?random=0.7029962238946317" media="(min-width: 75rem)">
<source srcset="https://unsplash.it/1200/870?random=0.047821732641771364" media="(min-width: 64rem)">
<source srcset="https://unsplash.it/1024/768?random=0.8025130567705641" media="(min-width: 48rem)">
<source srcset="https://unsplash.it/768/576?random=0.3706075696667792" media="(min-width: 30rem)">
<source srcset="https://unsplash.it/480/480?random=0.5940209680717747" media="(min-width: 20rem)">
<img srcset="https://unsplash.it/480/480?random=0.3952793645449133" class=" lazyload" alt="Alt" title="Title" width="100%">
</picture>
<section class="c-stage__text o-container l-page-boundary">
<div class="c-stage__hgroup">
<p class="c-stage__subheader">Report</p>
<h1 class="c-stage__header">Die Personifizierung<br />der IT</h1>
</div>
<div class="c-stage__cta">
<a href="#" class="c-stage__link">Artikel lesen
<svg class="c-stage__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>
</div>
</section>
</div>
</div>
</div>