Story

Toggle example guides Toggle HTML markup

This is the Story row component (aka fundraising journey)

Example
story image left

£####

RAISED

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.

Lives

CHANGED

This is enough to buy a bicycle ambulance that can help pregnant women in rural Malawi to reach life-saving medical services.

story image left
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: _cr19-styleguide.scss, line 162