Quote Block
Comes in 4 sizes.
Examples
Default styling
Jo's Top Tip
Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.
.block-content--view-mode-cw-s.cw-quote
Small
Jo's Top Tip
Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.
.block-content--view-mode-cw-m.cw-quote
Medium
Jo's Top Tip
Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.
.block-content--view-mode-cw-mp.cw-quote
Medium Plus
Jo's Top Tip
Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.
.block-content--view-mode-cw-l.cw-quote
Large
Jo's Top Tip
Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.
Markup: components/quote-block/content-wall-quote.twig
<div class="cw-region">
<article class="{{ modifier_class }} clearfix">
<div class="cw-quote__outer-wrapper">
<div class="cw-quote__bg-image">
<img src="kss-assets/images/pattern.gif" alt="test" typeof="foaf:Image">
</div>
<div class="cw-quote__inner-wrapper">
<div class="cw-quote__image bg--purple">
<img src="kss-assets/images/silhouette.png" alt="test" typeof="foaf:Image">
</div>
<div class="cw-quote__body">
<h3 class="font--yellow">Jo's Top Tip</h3>
<h4 class="font--yellow">Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.</h4>
</div>
</div>
</div>
</article>
</div>
Source:
_shop19-styleguide.scss
, line 219