_sr18-styleguide.scss, line 87
Full Height Single Image
.paragraph--full-height-single-image--no-image - no image .fhsi__middle-left - middle left .paragraph--full-height-single-image--no-image.fhsi__middle-left - no image middle left .paragraph--full-height-single-image--no-image.fhsi__middle-left - no image, middle left .fhsi__middle-right - middle right .paragraph--full-height-single-image--no-image.fhsi__middle-right - no image, middle right .fhsi__top-left - top left .paragraph--full-height-single-image--no-image.fhsi__top-left - no image top left .paragraph--full-height-single-image--no-image.fhsi__top-left - no image, top left .fhsi__top-centre - top centre .paragraph--full-height-single-image--no-image.fhsi__top-centre - no image, top centre .fhsi__top-right - top right .paragraph--full-height-single-image--no-image.fhsi__top-right - no image top right .fhsi__bottom-left - bottom left .paragraph--full-height-single-image--no-image.fhsi__bottom-left - no image bottom left .fhsi__bottom-centre - bottom centre .paragraph--full-height-single-image--no-image.fhsi__bottom-centre - no image bottom centre .fhsi__bottom-right - bottom right .paragraph--full-height-single-image--no-image.fhsi__bottom-right - no image bottom right
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
FHSI - 4:3 img on mobile
Markup: components/full-height-single-image/full-height-single-image.twig
<section class="paragraph--full-height-single-image {{modifier_class}} bg--purple">
<picture>
<source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 1024px)" type="image/jpeg"/>
<source srcset="kss-assets/images/16-9-img.jpg" media="all and (min-width: 740px)" type="image/jpeg"/>
<source srcset="kss-assets/images/4-3-img.jpg" media="(min-width: 0px)" type="image/jpeg"/>
<img src="kss-assets/images/16-9-img.jpg" alt="boring" typeof="foaf:Image" />
</picture>
<div class="fhsi__text-wrapper text-align-center">
<h1>FHSI - 4:3 img on mobile</h1>
<p><a class="btn btn--white" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Button</a></p>
</div>
</section>
_sr18-styleguide.scss, line 91
PREPARE FOR A SPECTACULAR NIGHT OF COMEDY
On website image will be 4:3 on mobile
PREPARE FOR A SPECTACULAR NIGHT OF COMEDY
On website image will be 4:3 on mobile
Markup: components/full-height-single-image-single-copy/full-height-single-image-single-copy.twig
<section class="paragraph--full-height-single-image-single-copy {{modifier_class}} bg--dark-blue">
<div class="fhsisc__image-wrapper objectfit">
<img src="kss-assets/images/spice_3-4_2x.jpg">
</div>
<div class="fhsisc__text-wrapper">
<div class="fhsisc__text cr-body">
<h1 class="font--white text-align-center">
PREPARE FOR A SPECTACULAR NIGHT OF COMEDY
</h1>
<p class="text-align-center font--white">On website image will be 4:3 on mobile</p>
<p class="text-align-center"><a class="btn btn--ruby" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Sign up for pre-sale tickets</a></p>
</div>
</div>
</section>
_sr18-styleguide.scss, line 142
PREPARE FOR A SPECTACULAR NIGHT OF COMEDY
28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley
Here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things,
PREPARE FOR A SPECTACULAR NIGHT OF COMEDY
28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley
Here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things,
Markup: components/full-height-double-image-single-copy/full-height-double-image-single-copy.twig
<section class="paragraph--full-height-double-image-single-copy {{modifier_class}} bg--white-smoke">
<div class="fhdisc__image-wrapper">
<div class="fhdisc__image">
<img src="https://www.comicrelief.com/sites/default/files/styles/bg_rich_text_wide/public/2018-12/spectacular_header_v5%402x.jpg?itok=Pr8MA0UX" />
</div>
<div class="fhdisc__image">
<img src="https://www.comicrelief.com/sites/default/files/styles/bg_rich_text_wide/public/2018-08/cr_your_impact_header_l_v2.jpg?itok=x6zA5nU0" />
</div>
</div>
<div class="bg--teal fhdisc__text-wrapper">
<div class="bg--magente fhdisc__text-3">
<h1 class="text-align-center">PREPARE FOR A SPECTACULAR NIGHT OF COMEDY</h1>
<p class="text-align-center">28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley</p>
<p class="text-align-center">Here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, </p>
<p class="text-align-center"><a class="btn btn--white" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Sign up for pre-sale tickets</a></p>
</div>
</div>
</section>
_sr18-styleguide.scss, line 150
PREPARE FOR A SPECTACULAR NIGHT OF COMEDY
28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley
Here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things,
PREPARE FOR A SPECTACULAR NIGHT OF COMEDY
28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley
Here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things,
Markup: components/full-height-single-image-triple-copy/full-height-single-image-triple-copy.twig
<section class="paragraph--full-height-sing-img-triple-copy {{modifier_class}} bg--dark-blue">
<div class="fhsitc__image-text-wrapper">
<div class="fhsitc__text-1 bg--red ">
<img src="kss-assets/images/example-emoji.png">
</div>
<div class="fhsitc__image bg--yellow">
<img src="kss-assets/images/london4-3.jpg">
</div>
<div class="bg--green fhsitc__text-2 ">
<img src="kss-assets/images/example-emoji.png">
</div>
</div>
<div class="bg--teal fhsitc__text-wrapper">
<div class="fhsitc__text-3">
<h1 class="text-align-center font--white">PREPARE FOR A SPECTACULAR NIGHT OF COMEDY</h1>
<p class="text-align-center font--white">28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley</p>
<p class="text-align-center font--white">Here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, here's some long addtional copy to help break things, </p>
<p class="text-align-center"><a class="btn btn--ruby" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Sign up for pre-sale tickets</a></p>
</div>
</div>
</section>
_sr18-styleguide.scss, line 158
Red Nose Day
On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.
On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.
On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.
Red Nose Day
On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.
Red Nose Day
On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.
On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.
On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.
Red Nose Day
On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.
Red Nose Day
On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.
On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.
On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.
Red Nose Day
On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.
Markup: components/copy-copy/copy-copy.twig
<section class="paragraph--copy-copy {{modifier_class}}">
<div class="copy-copy__text-wrapper bg--ruby">
<div class="copy-copy__text cr-body">
<h1 class="text--title font--white">Red Nose Day</h1>
<p class="font--white">On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.</p>
<p class="font--white">On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.</p>
<p class="font--white">On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.</p>
<p>
<a class="btn btn--dark-blue" href="https://shop.comicrelief.com/" target="_blank">Order a fundraising pack</a>
</p>
</div>
</div>
<div class="copy-copy__text-wrapper bg--dark-blue">
<div class="copy-copy__text cr-body">
<h1 class="text--title font--white">Red Nose Day</h1>
<p class="font--white">On Friday 15 March, people across the UK will be coming together to do things big and small, that will add up to something massive. And we’d like you to join in.</p>
<p>
<a class="btn btn--ruby" href="https://shop.comicrelief.com/" target="_blank">Order a fundraising pack</a>
</p>
</div>
</div>
</section>
_sr18-styleguide.scss, line 166
Copy-Video Component: 16:9
Copy-Video Component: portrait 50vh
Copy-Video Component: portrait 100vh
Copy-Video Component: 16:9
Copy-Video Component: portrait 50vh
Copy-Video Component: portrait 100vh
Markup: components/copy-video/copy-video.twig
{% set thumbnail_img = "https://upload.wikimedia.org/wikipedia/commons/5/57/Cumulus_Clouds_over_Yellow_Prairie2.jpg" %}
{% set video_id = "epDTcPgIKgU" %}
{% set port_video_id = "rwlAhFaLzXg" %}
<section class="paragraph--copy-video {{modifier_class}}">
<div class="copy-video__video-wrapper">
<iframe class="copy-video__video" src="https://www.youtube.com/embed/{{video_id}}?enablejsapi=1&rel=0&fs=0" modestbranding="1" showtitle="0"
showinfo="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
<button class="copy-video__button"></button>
<img src="{{thumbnail_img}}" class="copy-video__thumbnail" />
</div>
<div class="bg--teal copy-video__text-wrapper">
<h1>Copy-Video Component: 16:9</h1>
</div>
</section>
<p> </p>
<section class="paragraph--copy-video paragraph--copy-video--portrait-50 {{modifier_class}}">
<div class="copy-video__video-wrapper">
<iframe class="copy-video__video" src="https://www.youtube.com/embed/{{port_video_id}}?enablejsapi=1&rel=0&fs=0" modestbranding="1" showtitle="0"
showinfo="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<button class="copy-video__button"></button>
<img src="{{thumbnail_img}}" class="copy-video__thumbnail" />
</div>
<div class="bg--coral copy-video__text-wrapper">
<h1>Copy-Video Component: portrait 50vh</h1>
</div>
</section>
<p> </p>
<section class="paragraph--copy-video paragraph--copy-video--portrait-100 {{modifier_class}}">
<div class="copy-video__video-wrapper">
<iframe class="copy-video__video" src="https://www.youtube.com/embed/{{port_video_id}}?enablejsapi=1&rel=0&fs=0" frameborder="0" showtitle="0"
showinfo="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
<button class="copy-video__button"></button>
<img src="{{thumbnail_img}}" class="copy-video__thumbnail" />
</div>
<div class="bg--yellow copy-video__text-wrapper">
<h1>Copy-Video Component: portrait 100vh</h1>
</div>
</section>
<p> </p>
_sr18-styleguide.scss, line 175
Background Video - Copy component
Background Video - Copy component
Background Video - Copy component
Background Video - Copy component
Background Video - Copy component
Background Video - Copy component
Background Video - Copy component
Background Video - Copy component
Background Video - Copy component
Background Video - Copy component
Background Video - Copy component
Markup: components/bg-video-copy/bg-video-copy.twig
<section class="paragraph--background-video-copy {{modifier_class}} bg--dark-teal">
<div class="bgvc__video-wrapper objectfit">
<video muted="true" preload="none" poster="https://upload.wikimedia.org/wikipedia/commons/5/57/Cumulus_Clouds_over_Yellow_Prairie2.jpg">
<source src="videos/SR18-promo.mp4" type="video/mp4">
</video>
</div>
<div class="bgvc__text-wrapper">
<div class="bgvc__text cr-body">
<h1 style="text-align: center;">
Background Video - Copy component
</h1>
</div>
</div>
</section>
_sr18-styleguide.scss, line 183
PREPARE FOR A SPECTACULAR NIGHT OF COMEDY
28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley
PREPARE FOR A SPECTACULAR NIGHT OF COMEDY
28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley
Markup: components/fixed-ratio-image/fixed-ratio-image.twig
<section class="paragraph--fixed-ratio-image {{modifier_class}}">
<div class="fixed-ratio-image__image-wrapper">
<img src="kss-assets/images/4-3-img.jpg" />
</div>
<div class="bg--white-smoke fixed-ratio-image__text-wrapper">
<h1>PREPARE FOR A SPECTACULAR NIGHT OF COMEDY</h1>
<p>28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley</p>
<p><a class="btn btn--ruby" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Sign up for pre-sale tickets</a></p>
</div>
</section>
_sr18-styleguide.scss, line 200
Teaser Block
Comes in 4 sizes and in a background-image and no-image versions (the latter not displayed here). Content is editable.
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>
_sr18-styleguide.scss, line 269
Markup: components/news-teaser/news-teaser.twig
<article class="article-teaser">
<a href="#" class="article-teaser__link">
<div class="article-teaser__image">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/16-9-img.jpg" alt="" typeof="foaf:Image">
</picture>
</div>
<div class="article-teaser__content-wrapper">
<div class="article-teaser__content">
<span class="article-teaser__date">28 October 2016</span>
<h2>News article</h2>
</div>
</div>
</a>
</article>
_sr18-styleguide.scss, line 365
Quote Block
Comes in 4 sizes.
Jo's Top Tip
Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.
Jo's Top Tip
Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.
Jo's Top Tip
Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.
Jo's Top Tip
Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.
Jo's Top Tip
Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.
Markup: components/quote-block/content-wall-quote.twig
<div class="cw-region">
<article class="{{ modifier_class }} clearfix">
<div class="cw-quote__outer-wrapper">
<div class="cw-quote__bg-image">
<img src="kss-assets/images/pattern.gif" alt="test" typeof="foaf:Image">
</div>
<div class="cw-quote__inner-wrapper">
<div class="cw-quote__image bg--purple">
<img src="kss-assets/images/silhouette.png" alt="test" typeof="foaf:Image">
</div>
<div class="cw-quote__body">
<h3 class="font--yellow">Jo's Top Tip</h3>
<h4 class="font--yellow">Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.</h4>
</div>
</div>
</div>
</article>
</div>
_sr18-styleguide.scss, line 346
Content Reference Block
Comes in 4 sizes.
Red Nose Day is coming soon to BBC One
Red Nose Day is coming soon to BBC One
Red Nose Day is coming soon to BBC One
Red Nose Day is coming soon to BBC One
Red Nose Day is coming soon to BBC One
Markup: components/content-block/content-block.twig
<div class="cw-region">
<article class="contextual-region block-content block-content--type-content-reference-block {{ modifier_class }} content-block clearfix">
<div class="content-block__image">
<div class="media media--blazy media--responsive media--image">
<picture>
<img property="schema:image" class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Red nose day" typeof="foaf:Image">
</picture>
</div>
</div>
<div class="content-block__content-wrapper">
<div class="content-block__content">
<span class="content-block__tag font--yellow font--font-black">News</span>
<h4>
Red Nose Day is coming soon to BBC One
</h4>
</div>
</div>
<a href="#" class="content-block__link" hreflang="en">Read more</a>
</article>
</div>
_sr18-styleguide.scss, line 248
Feature Articles block
Feature Articles by category block
Markup: components/feature-articles-block/feature-articles-block.twig
<section class="paragraph">
<h2>Max 3 items</h2>
<div class="feature-articles-block">
{% for i in 0..2 %}
{% include directory ~ '../news-teaser/news-teaser.twig' %}
{% endfor %}
</div>
<h2>Teasers always keep same 4 columns width</h2>
<div class="feature-articles-block">
{% for i in 0..1 %}
{% include directory ~ '../news-teaser/news-teaser.twig' %}
{% endfor %}
</div>
</section>
_sr18-styleguide.scss, line 377
Media Reference Block
Comes in 4 sizes.
Relive all the best bits of last Red Nose Day
20:20
Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.
Relive all the best bits of last Red Nose Day
20:20
Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.
Relive all the best bits of last Red Nose Day
20:20
Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.
Relive all the best bits of last Red Nose Day
20:20
Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.
Relive all the best bits of last Red Nose Day
20:20
Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.
Markup: components/media-block/media-block.twig
<div class="cw-region">
<article class="contextual-region block-content block-content--type-media-reference {{ modifier_class }} media-block clearfix">
<div class="media-block__image">
<div class="media media--blazy media--responsive media--image">
<picture>
<img class="media__image media__element b-lazy b-responsive b-loaded" src="kss-assets/images/original-teaser-1170-658.jpg" alt="Video background" typeof="foaf:Image">
</picture>
</div>
</div>
<div class="media-block__content-wrapper">
<div class="media-block__content">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="play-icon" viewBox="0 0 40 40" xml:space="preserve">
<path d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2 M20,0C9,0,0,9,0,20s9,20,20,20
s20-9,20-20S31,0,20,0L20,0z"></path>
<path d="M15.8,14l10.3,6l-10.3,6V14 M13.8,10.6v18.8L30.1,20L13.8,10.6L13.8,10.6z"></path>
</svg>
<div class="cr-body">
<h4>Relive all the best bits of last Red Nose Day</h4>
<p class="font--yellow"><strong>20:20</strong></p>
</div>
</div>
</div>
<a class="media-block__link" data-rel="lightcase" href="https://www.youtube.com/embed/NW12S4-KB1I?autoplay=1">media block</a>
<div class="media-block__caption">
<div class="cr-body">
<p>Raymond used to work in a mine, with no time to go to school. Now, thanks to you, he’s getting an education. To help us change more lives, simply raise cash by having fun.</p>
<p><a class="btn btn--red" href="#">See how to join in</a></p>
</div>
</div>
</article>
</div>
_sr18-styleguide.scss, line 403
Card Block
Standard Card Block
When no card background colour is selected the card content will have no left and right padding. When a background colour is selected the card content will have padding all around (see cards grid below).
Follow in Dermont's footsteps
If Dermot's hip-swivelling heroics have inspired you, why not do your bit for Red Nose Day and put on your own dance event?
Markup: components/card-block/card.twig
<div class="card">
{{ title_suffix.contextual_links }}
{# {% if field_cr_card_image['#items'].value %} #}
<div class="card__image">
<img src="{{ field_cr_card_image }}" alt="">
</div>
{# {% endif %} #}
<div class="card__content-wrapper">
<div class="card__content">
{{ field_cr_card_body }}
</div>
</div>
</div>
_sr18-styleguide.scss, line 224
Cards title
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing KitCards title
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing KitCards title
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing KitCards title
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing KitCards title
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing KitCards title
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing KitCards title
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Follow in Dermont's footsteps
Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.
Get your Dancing Kit
Markup: components/cards/cards.twig
<section class="cards {{modifier_class}}">
<h2 class="cards__title">Cards title</h2>
<div class="cards__wrapper">
{% for i in 0..8 %}
<div class="card bg--light-grey">
<div class="card__image">
<img src="kss-assets/images/1-1-img.jpg" alt="card image">
</div>
<div class="card__content-wrapper ">
<div class="card__content">
<h3>Follow in Dermont's footsteps</h3>
<p>Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.</p>
<a class="card__link link link--inline-redlink link--inline-red" href="#">Get your Dancing Kit</a>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
_sr18-styleguide.scss, line 235
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Copy Right Copy Right Copy Right: 36
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
Button
Markup: components/single-msg/single-msg.twig
<section class="single-msg paragraph {{modifier_class}} bg--light-grey" >
<div class="single-msg__outer-wrapper">
<div class="single-msg__image">
<picture>
<source srcset="kss-assets/images/1-1-img.jpg" media="all and (min-width: 1024px)" type="image/jpeg"/>
<source srcset="kss-assets/images/1-1-img.jpg" media="all and (min-width: 740px)" type="image/jpeg"/>
<source srcset="kss-assets/images/1-1-img.jpg" media="(min-width: 0px)" type="image/jpeg"/>
<img src="kss-assets/images/1-1-img.jpg" alt="boring" typeof="foaf:Image" />
</picture>
</div>
<div class="single-msg__copy_wrapper bg--white">
<div class="single-msg__copy">
<div class="single-msg__title">
<h2>
Copy Right Copy Right Copy Right: 36
</h2>
</div>
<div class="single-msg__body">
<p>
Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio. Morbi vestibulum volutpat enim.Duis vel nibh at velit scelerisque suscipit. Vivamus euismod mauris. Quisque id odio.t :325
</p>
<a class="btn btn--black" href="#">Button</a>
</div>
</div>
</div>
</div>
</section>
_sr18-styleguide.scss, line 287
Background Single Message
This is Paragraph Background Single Message type with an image as background
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>
_sr18-styleguide.scss, line 208
Story
This is the Story row component (aka fundraising journey)
£####
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>
_sr18-styleguide.scss, line 261
Partners Grid
This is the Partners Grid
Technology partners
-
PayPal -
Amazon Web Services -
Trillium -
Armakuni -
NCC Group -
Cisco -
BT MyDonate -
Worldpay
Markup: components/partners-grid/partners-grid.twig
<div class="view view-partners view-id-partners view-display-id-block_1 js-view-dom-id-7758a0e48e90dbaf2402acc9049443bff5572cab14c43ed56a1d0ea495cf197c clearfix partners-grid">
<div class="view-content clearfix">
<div class="item-list">
<h2>Technology partners</h2>
<ul>
<li>
<article role="article" about="/partners/paypal" class="node node--type-partner node--view-mode-teaser">
<span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">PayPal</span>
</span>
<div class="node__content">
<div class="partner__link">
<a href="http://www.paypal.com" title="find out more">
<img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
<span>Find out more</span>
</a>
</div>
</div>
</article>
</li>
<li>
<article role="article" about="/partners/amazon-web-services" class="node node--type-partner node--view-mode-teaser">
<span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Amazon Web Services</span>
</span>
<div class="node__content">
<div class="partner__link">
<a href="#" title="find out more">
<img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
<span>Find out more</span>
</a>
</div>
</div>
</article>
</li>
<li>
<article role="article" about="/partners/trillium" class="node node--type-partner node--view-mode-teaser">
<span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Trillium</span>
</span>
<div class="node__content">
<div class="partner__link">
<a href="#">
<img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
<span>Find out more</span>
</a>
</div>
</div>
</article>
</li>
<li>
<article role="article" about="/partners/armakuni" class="node node--type-partner node--view-mode-teaser">
<span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Armakuni</span>
</span>
<div class="node__content">
<div class="partner__link">
<a href="#">
<img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
<span>Find out more</span>
</a>
</div>
</div>
</article>
</li>
<li>
<article role="article" about="/partners/ncc-group" class="node node--type-partner node--view-mode-teaser">
<span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">NCC Group</span>
</span>
<div class="node__content">
<div class="partner__link">
<a href="#">
<img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
<span>Find out more</span>
</a>
</div>
</div>
</article>
</li>
<li>
<article role="article" about="/partners/cisco" class="node node--type-partner node--view-mode-teaser">
<span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Cisco</span>
</span>
<div class="node__content">
<div class="partner__link">
<a href="#">
<img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
<span>Find out more</span>
</a>
</div>
</div>
</article>
</li>
<li>
<article role="article" about="/partners/bt-mydonate" class="node node--type-partner node--view-mode-teaser">
<span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">BT MyDonate</span>
</span>
<div class="node__content">
<div class="partner__link">
<a href="#">
<img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
<span>Find out more</span>
</a>
</div>
</div>
</article>
</li>
<li>
<article role="article" about="/partners/worldpay" class="node node--type-partner node--view-mode-teaser">
<span class="visually-hidden"><span class="field field--name-title field--type-string field--label-hidden">Worldpay</span>
</span>
<div class="node__content">
<div class="partner__link">
<a href="#">
<img alt="PayPal" src="kss-assets/images/paypal-logo.png" width="670" height="377" typeof="foaf:Image">
<span>Find out more</span>
</a>
</div>
</div>
</article>
</li>
</ul>
</div>
</div>
</div>
_sr18-styleguide.scss, line 314
Partners row
This is the Partners Row
Our wonderful partners
Markup: components/partners-row/partners-row.twig
<div class="partners-row paragraph">
<div class="partners-row-wrapper">
<div class="partners-row__body">
<h2>Our wonderful partners</h2>
<p><a class="link link--inline-black" href="#" title="See all our partners">See all our partners</a> <a class="link link--inline-black" href="#" target="_blank">Download partners shopping list</a></p>
</div>
<div class="partners-row__logos-list">
<ul>
<li><img alt="Sainsbury's" src="kss-assets/images/sainsburys_logo.png" width="210" height="118" typeof="foaf:Image"></li>
<li><img alt="Sainsbury's" src="kss-assets/images/sainsburys_logo.png" width="210" height="118" typeof="foaf:Image"></li>
<li><img alt="Sainsbury's" src="kss-assets/images/sainsburys_logo.png" width="210" height="118" typeof="foaf:Image"></li>
<li><img alt="Sainsbury's" src="kss-assets/images/sainsburys_logo.png" width="210" height="118" typeof="foaf:Image"></li>
<li><img alt="Sainsbury's" src="kss-assets/images/sainsburys_logo.png" width="210" height="118" typeof="foaf:Image"></li>
</ul>
</div>
</div>
</div>
</div>
_sr18-styleguide.scss, line 306
Markup: components/cookie-consent/cookie-consent.twig
<div class="cookie-consent cc_banner cc_container cc_container--open cc_banner--drupal">
<p class="cc_message">Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about our use of cookies <a target="_blank" class="cc_more_info link link--white inline" href="/cookies-policy">here</a>. We also use optional cookies for marketing purposes:
</p>
<p class="cc_message">
<a href="#null" class="btn btn--white accept-cookies">Accept</a> Or click <a href="#" class="link deny-cookies link--white inline">here</a> to deny these.
</p>
</div>
_sr18-styleguide.scss, line 416
Markup: components/pagination/pagination.twig
<nav class="pager" role="navigation" aria-labelledby="pagination-heading">
<h4 id="pagination-heading" class="visuallyhidden">Pagination</h4>
<ul class="pager__items">
<li class="pager__item is-active">
<a href="#">
<span class="visuallyhidden">
Current Page
</span>1</a>
</li>
<li class="pager__item">
<a href="#">
<span class="visuallyhidden">
Page
</span>2</a>
</li>
<li class="pager__item">
<a href="" title="Current page">
<span class="visuallyhidden">
Page
</span>3</a>
</li>
<li class="pager__item pager__item--next">
<a href="#" title="Go to next page" rel="next">
<span class="visuallyhidden">Next page</span>
<span aria-hidden="true">››</span>
</a>
</li>
</ul>
</nav>
_sr18-styleguide.scss, line 371
Markup: base_header.twig
<header role="banner" class="sticky-nav__header">
<div class="header__inner-wrapper">
<div id="block-comicrelief-branding" class="block block-system block-system-branding-block">
<a href="/" title="Home" rel="home" class="site-logo" tabindex="2">
<img src="/kss-assets/images/sr18-logo-2018.svg" alt="Home"></a>
</div>
{% include directory ~ 'main-nav.twig' %}
{% include directory ~ '../../../base/components/meta-icons/meta-icons.twig' %}
</div>
</header>
_sr18-styleguide.scss, line 391
Markup: components/search/search.twig
<div class="views-exposed-form contextual-region block search-block show" data-drupal-selector="views-exposed-form-search-page-1" id="block-exposedformsearchpage-1">
<div class="search-block__wrapper">
<div class="search-block__message">
<p>So, what are you looking for?</p>
</div>
<div class="search-block__form">
<form action="/web/search" method="get" id="views-exposed-form-search-page-1" accept-charset="UTF-8" data-drupal-form-fields="edit-text">
<div class="js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-text form-item-text">
<label for="edit-text">Search</label>
<input data-drupal-selector="edit-text" type="text" id="edit-text" name="text" value="" size="30" maxlength="128" class="form-text">
</div>
<div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions"><input data-drupal-selector="edit-submit-search" type="submit" id="edit-submit-search" value="Apply" class="button js-form-submit form-submit"></div>
</form>
</div>
</div>
<a role="button" class="close-button" href="#" aria-label="close search form">
<svg class="icon" focusable="false" tabindex="-1">
<use xlink:href="#close-cross"></use>
</svg>
</a>
</div>
_sr18-styleguide.scss, line 359
Card banner
Uses card block.
Markup: components/banners/card-banner.twig
<div class="card-banner {{ bg_colour }}">
{{ title_suffix.contextual_links }}
<div class="card-banner__inner-wrapper">
{# {% if field_cr_card_image['#items'].value %} #}
<div class="card-banner__image">
{{ field_cr_card_image }}
</div>
{# {% endif %} #}
<div class="card-banner__content">
{{ field_cr_card_body }}
</div>
</div>
</div>
_sr18-styleguide.scss, line 216
Progress bar
This is Progress bar
Markup: components/progress-bar/progress-bar.twig
<div class="progress-bar">
<a class="progress-bar__back-link">back</a>
<ul class="progress-bar__steps-3">
<li class="progress-bar--done">
<a class="progress-bar__step-link" href="#">
<span class="progress-bar__step">1/3 :</span>
<span class="progress-bar__title">Login Details</span>
</a>
</li>
<li class="progress-bar--active">
<a class="progress-bar__step-link" href="#">
<span class="progress-bar__step">2/3 :</span>
<span class="progress-bar__title">Contact Details</span>
</a>
</li>
<li class="progress-bar--todo">
<a class="progress-bar__step-link" href="#">
<span class="progress-bar__step">3/3 :</span>
<span class="progress-bar__title">Complete Your Giving Page</span>
</a>
</li>
</ul>
</div>_sr18-styleguide.scss, line 330
Progress indicator
This is Progress indicator
Markup: components/progress-indicator/progress-indicator.twig
<div>
<ul class="progress-indicator__steps-3 progress-indicator">
<li class="progress-indicator--done">
<span class="progress-indicator__step-link">
<span class="progress-indicator__step progress-indicator__circle"></span>
<span class="progress-bar__title">
Email
</span>
</span>
</li>
<li class="progress-indicator--active">
<span class="progress-indicator__step-link">
<span class="progress-indicator__step progress-indicator__circle"></span>
<span class="progress-bar__title">
Account
</span>
</span>
</li>
<li class="progress-indicator--todo">
<span class="progress-indicator__step-link">
<span class="progress-indicator__step progress-indicator__circle"></span>
<span class="progress-bar__title">
Giving Page
</span>
</span>
</li>
</ul>
</div>_sr18-styleguide.scss, line 338
Set a fundraising target
Be ambitious.You can do it
Thanks to you, at least three children living and working on the streets of Liberia could go to school for an entire year.
Markup: components/fundraising-target/fundraising-target.twig
<div class="userFrTarget">
<div class="amount">
<h6>Set a fundraising target</h6>
<p class="form__subcopy">Be ambitious.You can do it</p>
<div>
<span class="pounds-typography">£</span>
<input type="text" autocomplete="on" class="form__input extra" id="userFrTarget" name="userFrTarget" value="150" maxlength="6">
</div>
</div>
<div class="copy">
<div class="digit digit-1">
<span>3</span>
</div>
<div class="digit-copy">
<div>
<p>
Thanks to you, at least <strong>three</strong> children living and
working on the streets of Liberia could go to school for an entire year.
</p>
</div>
</div>
</div>
</div>
_sr18-styleguide.scss, line 385
Markup: components/app-link-block/app-link-block.twig
<div class="paragraph paragraph--type--cr-block-reference paragraph--view-mode--default app-link-block-outerwrapper">
<div class="app-phone-number-form block block-sr-app-link block-sr-app-link-block-app-phone-number app-link-block__wrapper" id="block-sr18appphonenumberentry">
<div class="app-link-block__innerwrapper">
<form action="/" method="post" id="app-phone-number-form" class="app-link-block__form" accept-charset="UTF-8">
<div class="app-link-block__form">
<span class="app-link-block__label">Enter mobile number</span>
<div class="js-form-item form-item js-form-type-tel form-type-tel js-form-item-phone-number form-item-phone-number">
<label for="edit-phone-number" class="visually-hidden">Enter mobile number</label>
<input class="–metrika-nokeys form-tel" type="tel" id="edit-phone-number" name="phone_number" value="" size="30" maxlength="128" placeholder="E.g +447012345678">
</div>
<input type="submit" id="edit-submit" name="submit" value="Send me link" class="button js-form-submit form-submit btn btn--ruby">
<span class="phone-number-valid-message app-link-block__error-message"></span>
<input autocomplete="off" type="hidden" name="form_build_id" value="form-SgdKr14X1FDjbIEqMeDijGzv1pEl-ERAD0pvT92SNSE">
<input type="hidden" name="form_id" value="app_phone_number_form">
</div>
</form>
<div class="app-link__download">
<a href="https://itunes.apple.com/us/app/sport-relief/id1322989652?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-lrg.svg) no-repeat center ;width:135px;height:35px;background-size:contain;margin-top:8px;"></a>
<a href='https://play.google.com/store/apps/details?id=com.sportrelief.app2018&hl=en'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>
</div>
</div>
</div>
</div>
<div class="paragraph paragraph--type--cr-block-reference paragraph--view-mode--default app-link-block-outerwrapper">
<div class="app-phone-number-form block block-sr-app-link block-sr-app-link-block-app-phone-number app-link-block__wrapper" id="block-sr18appphonenumberentry">
<div class="app-link-block__innerwrapper">
<form action="/" method="post" id="app-phone-number-form" class="error" accept-charset="UTF-8">
<div class="app-link-block__form">
<span class="app-link-block__label">Enter mobile number</span>
<div class="js-form-item form-item js-form-type-tel form-type-tel js-form-item-phone-number form-item-phone-number">
<label for="edit-phone-number" class="visually-hidden">Enter mobile number</label>
<input class="–metrika-nokeys form-tel" type="tel" id="edit-phone-number" name="phone_number" value="" size="30" maxlength="128" placeholder="E.g +447012345678">
</div>
<input type="submit" id="edit-submit" name="submit" value="Send me link" class="button js-form-submit form-submit btn btn--ruby">
<span class="phone-number-valid-message app-link-block__error-message"><div>Phone number not valid.</div></span>
<input autocomplete="off" type="hidden" name="form_build_id" value="form-SgdKr14X1FDjbIEqMeDijGzv1pEl-ERAD0pvT92SNSE">
<input type="hidden" name="form_id" value="app_phone_number_form">
</div>
</form>
<div class="app-link__download">
<a href="https://itunes.apple.com/us/app/sport-relief/id1322989652?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-lrg.svg) no-repeat center ;width:135px;height:35px;background-size:contain;margin-top:8px;"></a>
<a href='http://play.google.com/store/?pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>
</div>
</div>
</div>
</div>
<div class="paragraph paragraph--type--cr-block-reference paragraph--view-mode--default app-link-block-outerwrapper">
<div class="app-phone-number-form block block-sr-app-link block-sr-app-link-block-app-phone-number app-link-block__wrapper" id="block-sr18appphonenumberentry">
<div class="app-link-block__innerwrapper">
<form action="/" method="post" id="app-phone-number-form" class="valid" accept-charset="UTF-8">
<div class="app-link-block__form">
<span class="app-link-block__label">Enter mobile number</span>
<div class="js-form-item form-item js-form-type-tel form-type-tel js-form-item-phone-number form-item-phone-number">
<label for="edit-phone-number" class="visually-hidden">Enter mobile number</label>
<input class="–metrika-nokeys form-tel" type="tel" id="edit-phone-number" name="phone_number" value="" size="30" maxlength="128" placeholder="E.g +447012345678">
</div>
<input type="submit" id="edit-submit" name="submit" value="Send me link" class="button js-form-submit form-submit">
<span class="phone-number-valid-message app-link-block__error-message"><div>Phone number is valid</div></span>
<input autocomplete="off" type="hidden" name="form_build_id" value="form-SgdKr14X1FDjbIEqMeDijGzv1pEl-ERAD0pvT92SNSE">
<input type="hidden" name="form_id" value="app_phone_number_form">
</div>
</form>
<div class="app-link__download">
<a href="https://itunes.apple.com/us/app/sport-relief/id1322989652?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-lrg.svg) no-repeat center ;width:135px;height:35px;background-size:contain;margin-top:8px;"></a>
<a href='http://play.google.com/store/?pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>
</div>
</div>
</div>
</div>
<div class="paragraph paragraph--type--cr-block-reference paragraph--view-mode--default app-link-block-outerwrapper">
<div class="app-phone-number-form block block-sr-app-link block-sr-app-link-block-app-phone-number app-link-block__wrapper" id="block-sr18appphonenumberentry">
<div class="app-link-block__innerwrapper success">
<form action="/" method="post" id="app-phone-number-form" class="success" accept-charset="UTF-8">
<div class="app-link-block__form">
<div class='sr-app-link-success-message'>
<h3>All done....</h3>
<p>Thank you, we've text you a link to download the app. So once downloaded you're all set get stepping and make difference.
</div>
</div>
</form>
<div class="app-link__download">
<a href="https://itunes.apple.com/us/app/sport-relief/id1322989652?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-lrg.svg) no-repeat center ;width:135px;height:35px;background-size:contain;margin-top:8px;"></a>
<a href='http://play.google.com/store/?pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/></a>
</div>
</div>
</div>
</div>
_sr18-styleguide.scss, line 434
Name, email and billing address: we need it to create a receipt for your payment nd send it to you.
Phone number: we collect it in case there is an issue with donation
Establishment information: we use this information to understand better which institutions raise money for us.
Markup: components/just-in-time-block/just-in-time-block.twig
<div class="form__row form__row--just-in-time-block">
<div class="form__fieldset">
<a href="#show" aria-expanded="true" class="link toggle-link show-link" aria-label="click to open" id="show">What you can expect to receive from us</a>
<a href="#hide" class="link toggle-link close-link" aria-label="click to close" aria-expanded="false" id="hide">What you can expect to receive from us</a>
<div class="just-in-time--content">
<p><strong>Name, email and billing address:</strong> we need it to create a receipt for your payment nd send it to you.</p>
<p><strong>Phone number:</strong> we collect it in case there is an issue with donation</p>
<p><strong>Establishment information:</strong> we use this information to understand better which institutions raise money for us.</p>
</div>
</div>
</div>
_sr18-styleguide.scss, line 397
Postcode lookup
This is postcode lookup
Markup: components/postcode-lookup/postcode-lookup.twig
<div class="form__row--address-lookup">
<div class="form__field--wrapper form__text form__field--postcode">
<div class="search-box form__field--wrapper">
<label class="form__field form__field--postcode form__text required" id="postcode-label" for="comicrelief_payinbundle_payment_postcode">Postcode</label>
<div class="form__field--postcode">
<input
type="text"
id="comicrelief_payinbundle_payment_postcode"
name="comicrelief_payinbundle_payment[postcode]"
required="required"
placeholder="SE1 7TP"
class="form__field form__field--text"
/>
<div class="form__btn">
<input
type="button"
id="postcode_button"
name="btnPostcodeSearch"
class="btnPostcodeSearch btn form__btn--postcode"
value="FIND ADDRESS"
/>
</div>
</div>
</div>
<a role="button" href="" class="form__btn--address-detail link">Or enter your address manually</a>
</div>
<div class="form__field--wrapper form__text form__field--postcode">
<div class="search-box form__field--wrapper">
<label class="form__field form__field--postcode form__text required" id="postcode-label" for="comicrelief_payinbundle_payment_postcode">Postcode</label>
<div class="form__field--postcode">
<input
type="text"
id="comicrelief_payinbundle_payment_postcode"
name="comicrelief_payinbundle_payment[postcode]"
required="required"
placeholder="SE1 7TP"
class="form__field form__field--text form__field--error-outline"
/>
<div class="form__btn">
<input
type="button"
id="postcode_button"
name="btnPostcodeSearch"
class="btnPostcodeSearch btn form__btn--postcode"
value="FIND ADDRESS"
/>
</div>
</div>
<div id="postcode-error" class="error-container js-error has-error" aria-live="assertive" role="status">
<span class="help-block form-error">Please enter a valid postcode</span>
</div>
</div>
<a role="button" href="" class="form__btn--address-detail link">Or enter your address manually</a>
</div>
</div>
_sr18-styleguide.scss, line 322
Markup: components/footer-app-links-block/footer-app-links-block.twig
<div class="block block-sr-footer-app-links">
<div class="footer-app-links__outer-wrapper">
<div class="footer-app-links__inner-wrapper">
<div class="footer-app-links__copy">
<h3 class="font--white">GET THE SPORT RELIEF APP</h3>
<p class="font--white font--small">Track your steps, take on celebrity challenges and create leagues to compete against friends and colleagues. Our app has everything you need to get active, take part in The Nation’s Billion Step Challenge and fundraise for Sport Relief</p>
</div>
<div class="footer-app-links__download">
<a href="https://itunes.apple.com/us/app/sport-relief/id1322989652?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/assets/shared/badges/en-us/appstore-lrg.svg) no-repeat center ;width:148px;height:46px;background-size:contain;"></a>
<a href='https://play.google.com/store/apps/details?id=com.sportrelief.app2018&hl=en'>
<img alt='Get it on Google Play' src='https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png'/>
</a>
</div>
</div>
</div>
</div>
_sr18-styleguide.scss, line 422
The nation's steps
The nation's steps
Markup: components/live-total-block/live-total-block.twig
<div class="block live-total-block">
<div class="live-total-block__outerwrapper">
<div class="live-total-block__wrapper">
<div class="live-total__progress">
<div class="progress-outer-circle" data-percentage="80">
<div class="progress-inner-circle">
<div class="progress-circle-full progress-circle__slice"></div>
<div class="progress-circle__slice">
<div class="progress-circle__bar"></div>
</div>
</div>
<div class="progress-circle__overlay"></div>
</div>
</div>
<div class="live-total__content">
<h2>The nation's steps</h2>
<div id="js-totaliser" class="live-total">810,013,162</div>
<div class="live-total__button">One billion step target</div>
</div>
</div>
</div>
</div>
<div class="block live-total-block">
<div class="live-total-block__outerwrapper">
<div class="live-total-block__wrapper">
<div class="live-total__progress">
<div class="progress-outer-circle" data-percentage="100">
<div class="progress-inner-circle">
<div class="progress-circle-full progress-circle__slice"></div>
<div class="progress-circle__slice">
<div class="progress-circle__bar"></div>
</div>
</div>
<div class="progress-circle__overlay"></div>
</div>
</div>
<div class="live-total__content">
<h2>The nation's steps</h2>
<div id="js-totaliser" class="live-total">1000000000</div>
<div class="live-total__button">One billion step target</div>
</div>
</div>
</div>
</div>
_sr18-styleguide.scss, line 428
Help someone like Jordan see a better tomorrow
Jordan owes his life to the help of group therapy. Become an insider and help save lives.
Choose your monthly donation
Help someone like Jordan see a better tomorrow
Jordan owes his life to the help of group therapy. Become an insider and help save lives.
Choose your monthly donation
Help someone like Jordan see a better tomorrow
Jordan owes his life to the help of group therapy. Become an insider and help save lives.
Choose your monthly donation
Markup: components/membership-signup/membership-signup.twig
{% set title = "Help someone like Jordan see a better tomorrow" %}
{% set sub_title = "Jordan owes his life to the help of group therapy. Become an insider and help save lives." %}
{% set form_title = "Choose your monthly donation" %}
{% set giving_type = "MONTHLY" %}
{% set currencyDisabled = (giving_type == "MONTHLY")? "disabled ='disabled'" : "" %}
{% set money_buy_1 = "5" %}
{% set money_buy_2 = "10" %}
{% set money_buy_3 = "30" %}
{% set money_buy_desc_1 = "£5 could provide 5 hot meals for a homeless person in the UK." %}
{% set money_buy_desc_2 = "£10 could fund an awareness session on harmful practices like FGM and child marriage for girls in Sierra Leone." %}
{% set money_buy_desc_3 = "£30 could pay for 7 mosquito nets to protect children in Uganda from malaria while they sleep." %}
{% set cart_id = "RND19_CHICAGOTOWN" %}
{% set client_id = "the_fix" %}
{% set randomID = random(100, 10000) %}
<section class="paragraph--membership-signup {{modifier_class}} bg--light-orange" data-current-amount="0" >
<div class="img-shadow objectfit">
<picture>
<source media="all and (min-width: 1024px)" srcset="../images/membership2-LG.jpg" type="image/jpeg"/>
<source media="all and (min-width: 740px)" srcset="../images/membership2-MD.jpg" type="image/jpeg"/>
<source media="all and (min-width: 0px)" srcset="../images/membership2-SM.jpg" type="image/jpeg"/>
<img alt="Membership" src="../images/membership2-MD.jpg" typeof="foaf:Image"/>
</picture>
</div>
<div class="membership-signup__wrapper-copy text-align-center">
<div class="membership-signup__wrapper-copy--title ">
<h3>{{ title }}</h3>
<p class="text--body-small"> {{ sub_title }}</p>
</div>
<div class="membership-signup__wrapper-copy--form">
<p>
{{ form_title }}
</p>
<form class="membership-signup__wrapper-copy--form-money" data-giving-type={{ giving_type }} data-cart-id={{ cart_id }} data-client-id={{ client_id }} >
<div class="money-buy">
<button class="select-amount-btn money-box--1 " data-position="1" data-amount={{ money_buy_1 }}>
<span class="text-align-center"> <span class="currency membership__currency-label"> £ </span>{{ money_buy_1 }}
</span>
</button>
<button class="select-amount-btn money-box--2 active " data-position="2" data-amount={{ money_buy_2 }}>
<span class="text-align-center"> <span class="currency membership__currency-label"> £ </span>{{ money_buy_2 }}
</span>
</button>
<button class="select-amount-btn money-box--3" data-position="3" data-amount={{ money_buy_3 }}>
<span class="text-align-center"> <span class="currency membership__currency-label"> £ </span>{{ money_buy_3 }}
</span>
</button>
</diV>
<div class="form__fieldset clearfix">
<label for="other-amount">Other amount</label>
<div class="form__field--wrapper form__money form__field--amount">
<span id="js-currency-label" class="currency-input-label membership__currency-label">£</span>
<input aria-describedby="field-label--amount" class="form__field form__field--amount " id="field-input--amount" max="5000" min="1" name="membership_amount" pattern="[^[1-9]+([,.][0-9]+)?$]" placeholder="0" type="number" value="">
</div>
<div class="form__field--wrapper form__choice form__field--currency ">
<select class="form__field form__field--currency" id="membership-currency-{{ randomID }}" name="comicrelief_payinbundle_payment[currency]" {{ currencyDisabled }}>
<optgroup label="currency">
<option data-currency="£" value="GBP">£ GBP
</option>
<option data-currency="$" value="USD">$ USD
</option>
<option data-currency="$" value="AUD">$ AUD
</option>
<option data-currency="€" value="EUR">€ EUR
</option>
</optgroup>
</select>
</div>
</div>
<span class="form-error" aria-message-error="field-error--amount"> Please enter a number between 1 and 5000 with only 2 numbers after the decimal. </span>
<button class="btn btn--SR19-light-blue membership--submit" type="submit">Next step
</button>
<div class="donation-copy">
<p class="font--xsmall money-buy--description">
{{ money_buy_desc_1 }}
</p>
<p class="font--xsmall money-buy--description">
{{ money_buy_desc_2 }}
</p>
<p class="font--xsmall money-buy--description">
{{ money_buy_desc_3 }}
</p>
<p class="font--xsmall other-description">
OTHER AMOUNT can lorem ipsum dolor sit amet, consectetur adipiscing.
</p>
</div>
</form>
</div>
</div>
</section>
_sr18-styleguide.scss, line 440