This is a quote block which will be used to represent some highlighted text. It comes mostly as a group of four blocks but can also be used as a standalone component.
<div class="a-quote ">
<h3 class="a-quote__text">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.
Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna</h3>
<p class="a-quote__author">- John Smith -</p>
</div>
<div class="a-quote a-quote--portrait ">
<div class="a-quote__container">
<div class="a-quote__content">
<h3 class="a-quote__text">Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.
Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna</h3>
<p class="a-quote__author">- John Smith -</p>
</div>
<div class="a-quote__author-container">
<picture class="a-quote__picture">
<img class="a-quote__image" src="/assets/images/mock/campaign.jpg" alt="John Smith" title="John Smith" />
</picture>
<p class="a-quote__author a-quote__author-mobile">- John Smith -</p>
</div>
</div>
</div>
a-quote--dark
Will give the background a dark color
a-quote--white
Will give the background a white color
a-quote--light
Will give the background a light background
a-quote--primary
Will give the background the primary color
a-quote--medium
Will reduce the padding
a-quote--small
Will reduce the padding and font size
a-quote--extra-small
Will reduce the padding and font size