Teaser Block
Comes in 4 sizes and in a background-image and no-image versions (the latter not displayed here). Content is editable.
Examples
Default styling
.block-content--view-mode-cw-s.teaser-block
Small
.block-content--view-mode-cw-m.teaser-block
Medium
.block-content--view-mode-cw-mp.teaser-block
Medium Plus
.block-content--view-mode-cw-l.teaser-block
Large
.block-content--view-mode-cw-s.teaser-block.teaser-block--bg-image
Small Background image
.block-content--view-mode-cw-m.teaser-block.teaser-block--bg-image
Medium Background image
.block-content--view-mode-cw-mp.teaser-block.teaser-block--bg-image
Medium Plus Background image
.block-content--view-mode-cw-l.teaser-block.teaser-block--bg-image
Large Background image
Markup: components/teaser-block/teaser-block.twig
<div class="cw-region">
<article class="{{ modifier_class }} clearfix">
<a class="teaser-block__link" href="#">
<div class="teaser-block__image">
<img src="kss-assets/images/original-teaser-1170-658.jpg" alt="test">
</div>
<div class="teaser-block__body bg--white">
<div class="cr-body">
<h4>Get ideas, tips and tools to help you fundraise</h4>
<div class="teaser-block__cta">
<span class="btn btn--black">Pre-order a Kit</span>
</div>
</div>
</div>
</a>
</article>
</div>
Source:
_shop19-styleguide.scss
, line 152