cruk-pattern-library-api
Version:
CRUK Pattern Library API
51 lines (50 loc) • 2.3 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>
<p style="font-size: 1.125rem;">Large copy 1.125rem / 18px</p>
<p style="font-size: 1rem;">Paragraph 1rem / 16px</p>
<p style="font-size: 0.8571rem;">Small copy 0.8571rem / 14px</p>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<p class="ndpl-component__description">Line height</p>
<p style="font-size: 1.125rem;">1.5</p>
<p style="font-size: 1rem;">1.5</p>
<p style="font-size: 0.8571rem;">1.5</p>
</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>
<p class="paragraph-large">Large copy 1.4375rem / 23px</p>
<p>Paragraph 1.125rem / 18px</p>
<p class="paragraph-small">Small copy 0.8571rem / 14px</p>
</div>
</div>
<div class="cr-layout__cell">
<div class="cr-pattern">
<p class="ndpl-component__description">Line height</p>
<p class="paragraph-large">1.5</p>
<p>1.5</p>
<p class="paragraph-small">1.5</p>
</div>
</div>
</div>
</div>
</div>
</div>