Source: _cr19-styleguide.scss, line 106

Teaser Block

Toggle full screen Open in new window 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: _cr19-styleguide.scss, line 170
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="/images/news-default-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 2017</span>
        <h2>News article title</h2>
      </div>
    </div>
  </a>
</article>
Source: _cr19-styleguide.scss, line 256
Examples
Default styling
test
test

Jo's Top Tip

Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.

.block-content--view-mode-cw-s.cw-quote
Small
test
test

Jo's Top Tip

Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.

.block-content--view-mode-cw-m.cw-quote
Medium
test
test

Jo's Top Tip

Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.

.block-content--view-mode-cw-mp.cw-quote
Medium Plus
test
test

Jo's Top Tip

Top-up your fundraising total with a classic, pay-to-play, 'guess the weight of the cake' competition.

.block-content--view-mode-cw-l.cw-quote
Large
test
test

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>
Source: _cr19-styleguide.scss, line 237
Examples
Default styling
Red nose day
News

Red Nose Day is coming soon to BBC One

Read more
.block-content--view-mode-cw-s
Small
Red nose day
News

Red Nose Day is coming soon to BBC One

Read more
.block-content--view-mode-cw-m
Medium
Red nose day
News

Red Nose Day is coming soon to BBC One

Read more
.block-content--view-mode-cw-mp
Medium Plus
Red nose day
News

Red Nose Day is coming soon to BBC One

Read more
.block-content--view-mode-cw-l
Large
Red nose day
News

Red Nose Day is coming soon to BBC One

Read more
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--mint-green font--family-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>
Source: _cr19-styleguide.scss, line 149
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>
Source: _cr19-styleguide.scss, line 268
Examples
Default styling
Video background

Relive all the best bits of last Red Nose Day

20:20

media block

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.

See how to join in

.block-content--view-mode-cw-s
Small
Video background

Relive all the best bits of last Red Nose Day

20:20

media block

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.

See how to join in

.block-content--view-mode-cw-m
Medium
Video background

Relive all the best bits of last Red Nose Day

20:20

media block

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.

See how to join in

.block-content--view-mode-cw-mp
Medium Plus
Video background

Relive all the best bits of last Red Nose Day

20:20

media block

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.

See how to join in

.block-content--view-mode-cw-l
Large
Video background

Relive all the best bits of last Red Nose Day

20:20

media block

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.

See how to join in

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--mint-green"><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>
Source: _cr19-styleguide.scss, line 294

Card Block

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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).

Example

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?

Get your Dancing Kit

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>
Source: _cr19-styleguide.scss, line 126
Examples
Default styling

Cards title

card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
.cards--four-grid.cards--feature-layout
Feature Layout

Cards title

card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
.cards--four-grid
Grid of four cards left aligned (default)

Cards title

card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
.cards--four-grid-centre
Grid of four cards centre align

Cards title

card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
.cards--three-grid
Grid of three cards left aligned

Cards title

card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
.cards--three-grid-centre
Grid of three cards centre align

Cards title

card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

Follow in Dermont's footsteps

Phosfluorescently recaptiualize covalent strategic theme areas rather than value-added methodologies.

Get your Dancing Kit
card image

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>
Source: _cr19-styleguide.scss, line 137
Examples
Default styling
boring

Duis vel nibh at velit scelerisque suscipit

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
boring

Duis vel nibh at velit scelerisque suscipit

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
boring

Duis vel nibh at velit scelerisque suscipit

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
boring

Feature Single Message 16x9 img on tablet

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
boring

Feature Single Message No background colour

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
.single-msg--copy-left
Copy left
boring

Duis vel nibh at velit scelerisque suscipit

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
boring

Duis vel nibh at velit scelerisque suscipit

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
boring

Duis vel nibh at velit scelerisque suscipit

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
boring

Feature Single Message 16x9 img on tablet

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
boring

Feature Single Message No background colour

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
.single-msg--copy-only
Copy only
boring

Duis vel nibh at velit scelerisque suscipit

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
boring

Duis vel nibh at velit scelerisque suscipit

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
boring

Duis vel nibh at velit scelerisque suscipit

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
boring

Feature Single Message 16x9 img on tablet

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
boring

Feature Single Message No background colour

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 {{modifier_class}} bg--light-grey">
  <div class="single-msg__outer-wrapper">
    <div class="single-msg__image">
      <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/16-9-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>
    <div class="single-msg__copy_wrapper bg--white">
      <div class="single-msg__copy">
        <div class="single-msg__title">
          <h2>Duis vel nibh at velit scelerisque suscipit</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--yellow" href="#">Button</a>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="single-msg {{modifier_class}} bg--light-grey">
  <div class="single-msg__outer-wrapper">
    <div class="single-msg__image">
      <picture>
        <source srcset="kss-assets/images/4-3-img.jpg" media="all and (min-width: 1024px)" type="image/jpeg"/>
        <source srcset="kss-assets/images/4-3-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/4-3-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>Duis vel nibh at velit scelerisque suscipit</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--yellow" href="#">Button</a>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="single-msg {{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>Duis vel nibh at velit scelerisque suscipit</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--yellow" href="#">Button</a>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="single-msg single-msg--feature-copy-right 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/16-9-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>Feature Single Message 16x9 img on tablet</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--yellow" href="#">Button</a>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="single-msg single-msg--feature-copy-right bg--light-grey">
  <div class="single-msg__outer-wrapper">
    <div class="single-msg__image">
      <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/16-9-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>
    <div class="single-msg__copy_wrapper bg--no-colour">
      <div class="single-msg__copy">
        <div class="single-msg__title">
          <h2>Feature Single Message No background colour</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--yellow" href="#">Button</a>
        </div>
      </div>
    </div>
  </div>
</section>
Source: _cr19-styleguide.scss, line 188
Example
Africa

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: _cr19-styleguide.scss, line 110
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
Example

The difference you make

There are some incredible projects, in the UK and Africa, that have found effective ways to tackle poverty and injustice. Your money means we can choose the best and then fund them.

Africa
Markup: components/promo-header/promo-header.twig
<header class="bg--black promo-header promo-header__header promo-header--default {{modifier_class}}">
   <div class="promo-header__content">
      <div class="promo-header__content-inner promo-header__content-inner--left">
         <h1 class="font--yellow">The difference you make</h1>
         <p class="font--xlarge">There are some incredible projects, in the UK and Africa, that have found effective ways to tackle poverty and injustice. Your money means we can choose the best and then fund them.</p>
      </div>
   </div>
   <div class="promo-header__bg-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>
</header>
Source: _cr19-styleguide.scss, line 313
Example

Technology partners

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="#" 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>
Source: _cr19-styleguide.scss, line 205
Example
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>&nbsp;&nbsp;&nbsp;&nbsp;<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>
Source: _cr19-styleguide.scss, line 197
Example
Markup: components/cookie-consent/cookie-consent.twig
<div class="cookie-consent cc_banner cc_container cc_container--open">
    <p class="cc_message">{{ message }}<a data-cc-if="options.link" target="{{ target }}" class="cc_more_info link link--grey inline" href="{{ link }}">{{ learn_more }}</a></p>
    <a href="#null" data-cc-event="click:dismiss" target="_blank" class="btn btn--white-ghost">{{ dismiss }}</a>
</div>
Source: _cr19-styleguide.scss, line 307
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>
Source: _cr19-styleguide.scss, line 262
Markup: components/header/base_header.twig
<header role="banner">
  <div class="header__top-wrapper">
  </div>
  <div class="header__inner-wrapper">
  	{% include directory ~ '../navigation/main-nav.twig' %}
  	{% include directory ~ '../meta-icons/meta-icons.twig' %}
  </div>
</header>
Source: _cr19-styleguide.scss, line 282
Example
Markup: components/footer/footer.twig
<footer role="contentinfo">
  
<h4 class="footer__follow">Follow us...</h4>

{# social media icons #}
{% include directory ~ '../social/social-following.twig' %}

{# footer nav #}
{% include directory ~ '../navigation/footer-nav.twig' %}


<div class="footer__copyright">
  <p>© Comic Relief {{ "now"|date("Y") }}. Comic Relief, registered charity 326568 (England/Wales); SC039730 (Scotland)</p>
</div>
<div class="footer__branding">
  <a title="Comic Relief" href="http://www.comicrelief.com/" rel="home" target="_blank">
   <svg class="icon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#crlogo"></use>
    </svg>
  </a>
</div>

  <a class="styleguide-link external-link" href="/profiles/contrib/cr/themes/custom/campaign_base/styleguide/index.html" target="_blank">Styleguide</a>
</footer>
Source: _cr19-styleguide.scss, line 319
Example
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 data-contextual-id="block:block=exposedformsearchpage_1:langcode=en|entity.view.edit_form:view=search:location=exposed_filter&amp;name=search&amp;display_id=page_1&amp;langcode=en" class="contextual" role="form">
    <button class="trigger focusable visually-hidden" type="button" aria-pressed="false">Open  configuration options</button>
    <ul class="contextual-links" hidden="">
      <li class="block-configure"><a href="/web/admin/structure/block/manage/exposedformsearchpage_1?destination=test/esu">Configure block</a></li>
      <li class="entityviewedit-form"><a href="/web/admin/structure/views/view/search/edit/page_1?destination=test/esu">Edit view</a></li>
    </ul>
  </div>

  <div class="search-block__wrapper">
    <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="#">
    <svg class="icon">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close-cross"></use>
    </svg>
  </a>
</div>
Source: _cr19-styleguide.scss, line 250
Example

Donate now and transform
lives in the UK and across Africa

Donate now
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>
Source: _cr19-styleguide.scss, line 118
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>
Source: _cr19-styleguide.scss, line 221
Example
  • Email
  • Account
  • Giving Page
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>
Source: _cr19-styleguide.scss, line 229
Example
Set a fundraising target

Be ambitious.You can do it

£
3

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>
Source: _cr19-styleguide.scss, line 276
Example
What you can expect to receive from us

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>
Source: _cr19-styleguide.scss, line 288
Example
Or enter your address manually
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>
Source: _cr19-styleguide.scss, line 213
Examples
Default styling

PREPARE FOR A SPECTACULAR NIGHT OF COMEDY

On website image will be 4:3 on mobile

Sign up for pre-sale tickets

.paragraph--full-height-single-image-single-copy--image-right
image right

PREPARE FOR A SPECTACULAR NIGHT OF COMEDY

On website image will be 4:3 on mobile

Sign up for pre-sale tickets

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--coral">
  <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">On website image will be 4:3 on mobile</p>
      <p class="text-align-center"><a class="btn btn--light-coral" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Sign up for pre-sale tickets</a></p>
    </div> 
  </div>
</section>
Source: _cr19-styleguide.scss, line 325
Examples
Default styling

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,

Sign up for pre-sale tickets

.paragraph--full-height-double-image-single-copy--image-right
image right

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,

Sign up for pre-sale tickets

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--teal">
    <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"><strong>PREPARE FOR A SPECTACULAR NIGHT OF COMEDY</strong></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>
Source: _cr19-styleguide.scss, line 333
Examples
Default styling

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,

Sign up for pre-sale tickets

.paragraph--full-height-sing-img-triple-copy--image-right
image right

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,

Sign up for pre-sale tickets

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--purple">
    <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"><strong>PREPARE FOR A SPECTACULAR NIGHT OF COMEDY</strong></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>
Source: _cr19-styleguide.scss, line 341
Examples
Default styling

PREPARE FOR A SPECTACULAR NIGHT OF COMEDY

28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley

Sign up for pre-sale tickets

.paragraph--fixed-ratio-image--image-right
image right

PREPARE FOR A SPECTACULAR NIGHT OF COMEDY

28 February 2019. One night, one stage, eight giants of comedy live at The SSE Arena, Wembley

Sign up for pre-sale tickets

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--teal 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--white" href="https://www.comicrelief.com/#newsletter" title="find out more about Spectacular">Sign up for pre-sale tickets</a></p>
    </div>
</section>
Source: _cr19-styleguide.scss, line 349
Examples
Default styling

Copy-Video Component: 16:9

 

Copy-Video Component: portrait 50vh

 

Copy-Video Component: portrait 100vh

 

.paragraph--copy-video--video-right
video right

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>&nbsp;</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>&nbsp;</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>&nbsp;</p>
Source: _cr19-styleguide.scss, line 357
Examples
Default styling
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image
no image
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__middle-left
middle left
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__middle-left
no image middle left
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__middle-right
middle right
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__middle-right
no image middle right
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__top-left
top left
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__top-left
no image top left
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__top-centre
top centre
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__top-centre
no image top centre
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__top-right
top right
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__top-right
no image top right
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__bottom-left
bottom left
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__bottom-left
no image bottom left
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__bottom-centre
bottom centre
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__bottom-centre
no image bottom centre
boring

Full Height Single Image - 4:3 img on mobile

Button

.fhsi__bottom-right
bottom right
boring

Full Height Single Image - 4:3 img on mobile

Button

.paragraph--full-height-single-image--no-image.fhsi__bottom-right
no image bottom right
boring

Full Height Single Image - 4:3 img on mobile

Button

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  {{modifier_class}} text-align-center">
        <h1 >Full Height Single Image - 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>
Source: _cr19-styleguide.scss, line 365
Examples
Default styling

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.

Order a fundraising pack

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.

Order a fundraising pack

.paragraph--copy-copy--align-top
Align top

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.

Order a fundraising pack

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.

Order a fundraising pack

.paragraph--copy-copy--align-bottom
Align bottom

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.

Order a fundraising pack

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.

Order a fundraising pack

Markup: components/copy-copy/copy-copy.twig
<section class="paragraph--copy-copy {{modifier_class}} bg--coral">
    <div class="copy-copy__text-wrapper bg--green">
        <div class="copy-copy__text cr-body">
            <h1 class="text--title">Red Nose Day</h1>
            <p>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>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>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--light-coral" href="https://shop.comicrelief.com/" target="_blank">Order a fundraising pack</a>
            </p>
        </div>
    </div>
    <div class="copy-copy__text-wrapper bg--orange">
        <div class="copy-copy__text cr-body">
            <h1 class="text--title">Red Nose Day</h1>
            <p>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--light-coral" href="https://shop.comicrelief.com/" target="_blank">Order a fundraising pack</a>
            </p>
        </div>
    </div>
</section>
Source: _cr19-styleguide.scss, line 389
Examples
Default styling

Background Video - Copy component

.paragraph--background-video-copy--video-right
Video right

Background Video - Copy component

.paragraph--background-video-copy--fullscreen.middle-centre
Fullscreen BG video middle centre

Background Video - Copy component

.paragraph--background-video-copy--fullscreen.top-left
Fullscreen BG video top-left

Background Video - Copy component

.paragraph--background-video-copy--fullscreen.top-centre
Fullscreen BG video top-centre

Background Video - Copy component

.paragraph--background-video-copy--fullscreen.top-right
Fullscreen BG video top-right

Background Video - Copy component

.paragraph--background-video-copy--fullscreen.middle-left
Fullscreen BG video middle-left

Background Video - Copy component

.paragraph--background-video-copy--fullscreen.middle-right
Fullscreen BG video middle-right

Background Video - Copy component

.paragraph--background-video-copy--fullscreen.bottom-left
Fullscreen BG video bottom-left

Background Video - Copy component

.paragraph--background-video-copy--fullscreen.bottom-centre
Fullscreen BG video bottom-centre

Background Video - Copy component

.paragraph--background-video-copy--fullscreen.bottom-right
Fullscreen BG video bottom-right

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>
Source: _cr19-styleguide.scss, line 398