Background Single Message
This is Paragraph Background Single Message type with an image as background
Example
Rich text bg title
Dynamically enhance fully researched metrics and e-business architectures. Synergistically productize impactful synergy rather than.
Markup: components/background-single-msg/background-single-msg.twig
<section class="paragraph background-single-msg paragraph--cr-rich-text-paragraph">
<div class="background-single-msg__image">
<picture>
<source srcset="kss-assets/images/promo-header-1170-450.jpg" media="all and (min-width: 1024px)" type="image/jpeg">
<source srcset="kss-assets/images/promo-header-740-450.jpg" media="all and (min-width: 740px)" type="image/jpeg">
<source srcset="kss-assets/images/promo-header-740-450.jpg" media="(min-width: 0px)" type="image/jpeg">
<img srcset="kss-assets/images/promo-header-1170-450.jpg" alt="Africa" typeof="foaf:Image">
</picture>
</div>
<div class="background-single-msg__inner-wrap">
<div data-quickedit-entity-id="paragraph/1" class="bg--white background-single-msg__body {{modifier_class}}">
<h2>Rich text bg title</h2>
<p>Dynamically enhance fully researched metrics and e-business architectures. Synergistically productize impactful synergy rather than.</p>
</div>
</div>
</section>
Source:
_cr17-styleguide.scss
, line 110