cruk-pattern-library-api
Version:
CRUK Pattern Library API
64 lines (62 loc) • 2.95 kB
HTML
<div class="cr-layout__row cr-layout__row--50-50">
<div class="cr-layout__cell">
<div class="cr-pattern">
<h3 class="ndpl-component__description">Mobile & Tablet (xs, sm)</h3>
<hr />
<div class="cr-layout__row cr-layout__row--66-33">
<div class="cr-layout__cell">
<div class="cr-pattern">
<p class="ndpl-component__description">Size</p>
<h1 style="font-size: 1.4rem;">H1 heading 1.4375rem / 23px </h1>
<h2 style="font-size: 1.1875rem;">H2 heading 1.1875rem / 19px</h2>
<h3 style="font-size: 1rem">H3 heading 1rem / 16px</h3>
<h4 style="font-size: 0.875rem">H4 heading 0.875rem / 14px</h4>
<h5 style="font-size: 0.875rem">H5 heading 0.875rem / 14px</h5>
<h6 style="font-size: 0.75rem">H6 heading 0.75rem / 12px </h6>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<p class="ndpl-component__description">Line height</p>
<h1 style="font-size: 1.4rem;">1.5</h1>
<h2 style="font-size: 1.1875rem;">1.5</h2>
<h3 style="font-size: 1rem">1.5</h3>
<h4 style="font-size: 0.875rem">1.5</h4>
<h5 style="font-size: 0.875rem">1.5</h5>
<h6 style="font-size: 0.75rem">2</h6>
</div>
</div>
</div>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<h3 class="ndpl-component__description">Desktop & Larger (md, lg)</h3>
<hr />
<div class="cr-layout__row cr-layout__row--66-33">
<div class="cr-layout__cell">
<div class="cr-pattern">
<p class="ndpl-component__description">Size</p>
<h1>H1 2rem / 32px </h1>
<h2>H2 heading 1.4375rem / 23px</h2>
<h3>H3 heading 1.1875rem / 19px</h3>
<h4>H4 heading 1rem / 16px</h4>
<h5>H5 heading 1rem / 16px</h5>
<h6>H6 heading 0.875rem / 14px </h6>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<p class="ndpl-component__description">Line height</p>
<h1>1.5</h1>
<h2>1.5</h2>
<h3>1.5</h3>
<h4>1.5</h4>
<h5>1.5</h5>
<h6>2</h6>
</div>
</div>
</div>
</div>
</div>
</div>