Teaser Block

Toggle example guides Toggle HTML markup

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