cruk-pattern-library-api
Version:
CRUK Pattern Library API
130 lines (129 loc) • 4.08 kB
HTML
<div class="cr-layout-demo">
<div class="cr-layout__row cr-layout__row--full">
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>Full bleed</h2>
</div>
</div>
</div>
<div class="cr-layout__row cr-layout__row--100">
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>100%</h2>
</div>
</div>
</div>
<div class="cr-layout__row cr-layout__row--50-50">
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>50 | 1</h2>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>50 | 2</h2>
</div>
</div>
</div>
<div class="cr-layout__row cr-layout__row--66-33">
<div class="cr-layout__cell cr-layout__cell--has-children">
<div class="cr-layout__row cr-layout__row--100">
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>66 | 100</h2>
</div>
</div>
</div>
<div class="cr-layout__row cr-layout__row--50-50">
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>66 | 50 | 1</h2>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>66 | 50 | 2</h2>
</div>
</div>
</div>
<div class="cr-layout__row cr-layout__row--33-33-33">
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>66 | 33 | 1</h2>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>66 | 33 | 2</h2>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>6 | 33 | 3</h2>
</div>
</div>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>33</h2>
</div>
</div>
</div>
<div class="cr-layout__row cr-layout__row--33-33-33">
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>33 | 1</h2>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>33 | 2</h2>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>33 | 3</h2>
</div>
</div>
</div>
<div class="cr-layout__row cr-layout__row--25-50-25">
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>25 | 1</h2>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>50(2) | 1</h2>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>25 | 2</h2>
</div>
</div>
</div>
<div class="cr-layout__row cr-layout__row--25-25-25-25">
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>2 | 25 | 1</h2>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>2 | 25 | 2</h2>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>2 | 25 | 3</h2>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h2>2 | 25 | 4</h2>
</div>
</div>
</div>
</div>