Story
This is the Story row component (aka fundraising journey)
Example
£####
RAISEDDaniel from Worcester ducked, dived and dodged his way to raising £160 by holding a retro fancy dress dodgeball tournament at his local sport centre.
Lives
CHANGEDThis is enough to buy a bicycle ambulance that can help pregnant women in rural Malawi to reach life-saving medical services.
Markup: components/story/_story.twig
<!--Background color class on section -->
<section class="story paragraph bg--red">
<div class="story__outer-wrapper ">
<!--Background color class on fundraiser, needs to be rendered both here.. -->
<div class="story__fundraiser-wrapper bg--blue">
<!-- Fundraiser image -->
<div class="story__fundraiser-image">
<picture>
<source srcset="kss-assets/images/story-300-330.jpg" media="all and (min-width: 1024px)" type="image/jpeg"/>
<source srcset="kss-assets/images/story-340-250.jpg" media="all and (min-width: 740px)" type="image/jpeg"/>
<source srcset="kss-assets/images/story-290-220.jpg" media="(min-width: 0px)" type="image/jpeg"/>
<img src="kss-assets/images/story-290-220.jpg" alt="story image left" typeof="foaf:Image" />
</picture>
</div>
<!-- Fundraiser copy -->
<div class="story__fundraiser-copy">
<div class="story__fundraiser-title">
<h3>£####</h3>
<span>RAISED</span>
</div>
<div class="story__fundraiser-body">
<p>Daniel from Worcester ducked, dived and dodged his way to raising £160 by holding a retro fancy dress dodgeball tournament at his local sport centre.</p>
</div>
</div>
</div>
<!--Background color class on fundraiser, needs to be rendered here as well -->
<div class="story__beneficiary-wrapper bg--blue">
<!-- Beneficiary copy -->
<div class="story__beneficiary-copy">
<div class="story__beneficiary-title">
<h3>Lives</h3>
<span>CHANGED</span>
</div>
<div class="story__beneficiary-body">
<p>This is enough to buy a bicycle ambulance that can help pregnant women in rural Malawi to reach life-saving medical services.</p>
</div>
</div>
<!-- Beneficiary image -->
<div class="story__beneficiary-image">
<picture>
<source srcset="kss-assets/images/story-300-330.jpg" media="all and (min-width: 1024px)" type="image/jpeg"/>
<source srcset="kss-assets/images/story-340-250.jpg" media="all and (min-width: 740px)" type="image/jpeg"/>
<source srcset="kss-assets/images/story-290-220.jpg" media="(min-width: 0px)" type="image/jpeg"/>
<img src="kss-assets/images/story-290-220.jpg" alt="story image left" typeof="foaf:Image" />
</picture>
</div>
</div>
</div>
</section>
Source:
_cr17-styleguide.scss
, line 162