.new-typography.xs-p2
.layout
.layout__item
%p.meta-text meta text
%h1.d1 display 1
.layout
.layout__item.xs-12of12
.layout
.layout__item.xs-4of12
%h1 header 1
%h2 header 2
%h3 header 3
%h4 header 4
%h5 header 5
%h6 header 6
.layout__item.xs-8of12
%h1.subhead subhead 1
%h2.subhead subhead 2
%h3.subhead subhead 3
.layout
.layout__item.xs-3of12
.copy.copy--lead copy lead
.layout__item.xs-5of12
.copy.copy--lead.copy--secondary copy lead secondary
.layout__item.xs-4of12
%div
%a.copy.copy--lead link lead
.layout
.layout__item.xs-3of12
.copy copy default
.layout__item.xs-5of12
.copy.copy--secondary copy default secondary
.layout__item.xs-4of12
%div
%a.copy link default
.layout
.layout__item.xs-3of12
.copy.copy--mini copy mini
.layout__item.xs-5of12
.copy.copy--mini.copy--secondary copy mini secondary
.layout__item.xs-4of12
%div
%a.copy.copy--mini link mini
.layout__item.xs-6of12
<div class='new-typography xs-p2'>
<div class='layout'>
<div class='layout__item'>
<p class='meta-text'>meta text</p>
<h1 class='d1'>display 1</h1>
</div>
</div>
<div class='layout'>
<div class='layout__item xs-12of12'>
<div class='layout'>
<div class='layout__item xs-4of12'>
<h1>header 1</h1>
<h2>header 2</h2>
<h3>header 3</h3>
<h4>header 4</h4>
<h5>header 5</h5>
<h6>header 6</h6>
</div>
<div class='layout__item xs-8of12'>
<h1 class='subhead'>subhead 1</h1>
<h2 class='subhead'>subhead 2</h2>
<h3 class='subhead'>subhead 3</h3>
<div class='layout'>
<div class='layout__item xs-3of12'>
<div class='copy copy--lead'>copy lead</div>
</div>
<div class='layout__item xs-5of12'>
<div class='copy copy--lead copy--secondary'>copy lead secondary</div>
</div>
<div class='layout__item xs-4of12'>
<div>
<a class='copy copy--lead'>link lead</a>
</div>
</div>
</div>
<div class='layout'>
<div class='layout__item xs-3of12'>
<div class='copy'>copy default</div>
</div>
<div class='layout__item xs-5of12'>
<div class='copy copy--secondary'>copy default secondary</div>
</div>
<div class='layout__item xs-4of12'>
<div>
<a class='copy'>link default</a>
</div>
</div>
</div>
<div class='layout'>
<div class='layout__item xs-3of12'>
<div class='copy copy--mini'>copy mini</div>
</div>
<div class='layout__item xs-5of12'>
<div class='copy copy--mini copy--secondary'>copy mini secondary</div>
</div>
<div class='layout__item xs-4of12'>
<div>
<a class='copy copy--mini'>link mini</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='layout__item xs-6of12'></div>
</div>
</div>
.new-typography
.background-dark.xs-p2
.layout
.layout__item
%p.meta-text meta text
%h1.d1.text--white display 1
.layout
.layout__item.xs-12of12
.layout
.layout__item.xs-4of12
%h1.text--white header 1
%h2.text--white header 2
%h3.text--white header 3
%h4.text--white header 4
%h5.text--white header 5
%h6.text--white header 6
.layout__item.xs-8of12
%h1.subhead.text--white subhead 1
%h2.subhead.text--white subhead 2
%h3.subhead.text--white subhead 3
.layout
.layout__item.xs-3of12
.copy.copy--lead.text--white copy lead
.layout__item.xs-5of12
.copy.copy--lead.copy--secondary.text--white copy lead secondary
.layout__item.xs-4of12
%div
%a.copy.copy--lead link lead
.layout
.layout__item.xs-3of12
.copy.text--white copy default
.layout__item.xs-5of12
.copy.copy--secondary.text--white copy default secondary
.layout__item.xs-4of12
%div
%a.copy link default
.layout
.layout__item.xs-3of12
.copy.copy--mini.text--white copy mini
.layout__item.xs-5of12
.copy.copy--mini.copy--secondary.text--white copy mini secondary
.layout__item.xs-4of12
%div
%a.copy.copy--mini link mini
<div class='new-typography'>
<div class='background-dark xs-p2'>
<div class='layout'>
<div class='layout__item'>
<p class='meta-text'>meta text</p>
<h1 class='d1 text--white'>display 1</h1>
</div>
</div>
<div class='layout'>
<div class='layout__item xs-12of12'>
<div class='layout'>
<div class='layout__item xs-4of12'>
<h1 class='text--white'>header 1</h1>
<h2 class='text--white'>header 2</h2>
<h3 class='text--white'>header 3</h3>
<h4 class='text--white'>header 4</h4>
<h5 class='text--white'>header 5</h5>
<h6 class='text--white'>header 6</h6>
</div>
<div class='layout__item xs-8of12'>
<h1 class='subhead text--white'>subhead 1</h1>
<h2 class='subhead text--white'>subhead 2</h2>
<h3 class='subhead text--white'>subhead 3</h3>
<div class='layout'>
<div class='layout__item xs-3of12'>
<div class='copy copy--lead text--white'>copy lead</div>
</div>
<div class='layout__item xs-5of12'>
<div class='copy copy--lead copy--secondary text--white'>copy lead secondary</div>
</div>
<div class='layout__item xs-4of12'>
<div>
<a class='copy copy--lead'>link lead</a>
</div>
</div>
</div>
<div class='layout'>
<div class='layout__item xs-3of12'>
<div class='copy text--white'>copy default</div>
</div>
<div class='layout__item xs-5of12'>
<div class='copy copy--secondary text--white'>copy default secondary</div>
</div>
<div class='layout__item xs-4of12'>
<div>
<a class='copy'>link default</a>
</div>
</div>
</div>
<div class='layout'>
<div class='layout__item xs-3of12'>
<div class='copy copy--mini text--white'>copy mini</div>
</div>
<div class='layout__item xs-5of12'>
<div class='copy copy--mini copy--secondary text--white'>copy mini secondary</div>
</div>
<div class='layout__item xs-4of12'>
<div>
<a class='copy copy--mini'>link mini</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>