Source: _cr19-styleguide.scss, line 5
Example

Comic Relief uses Montserrat and Anton; the latter for headings, the former of body copy, labels etc.

Fonts



Type Sizes

All type sizes and line heights come from a typographic scale, using multiples of 8.



Headings

There are a range of heading sizes from H1 to H3, using the font size and line height. According to the typographic scale set the heading change sizes responsively for different media devices.

'Title' Header 1

.text--title (Used for headers and landing pages, noted as 'Title' H1 in the Design System)
Current breakpoint: LG - font-size: 100px / line-height: 104px Current breakpoint: MD - font-size: 100px / line-height: 104px Current breakpoint: SM - font-size: 54px / line-height: 62px


Header 1

Current breakpoint: LG - font-size: 64px / line-height: 72px Current breakpoint: MD - font-size: 64px / line-height: 72px Current breakpoint: SM - font-size: 42px / line-height: 48px


Header 2

Current breakpoint: LG - font-size: 42px / line-height: 48px Current breakpoint: MD - font-size: 42px / line-height: 48px Current breakpoint: SM - font-size: 34px / line-height: 40px


Header 3

Current breakpoint: LG - font-size: 26px / line-height: 32px Current breakpoint: MD - font-size: 26px / line-height: 32px Current breakpoint: SM - font-size: 26px / line-height: 32px



Copy, labels etc.

I am a standard paragraph, also p.text--body for CMS reasons: lorem ipsum dolor sit amet, consectetur adipiscing elit.

Standard paragraph, p.text--body
Current breakpoint: LG - font-size: 20px / line-height: 32px Current breakpoint: MD - font-size: 20px / line-height: 32px Current breakpoint: SM - font-size: 15px / line-height: 24px



I am a small paragraph, p.text--body-small: lorem ipsum dolor sit amet, consectetur adipiscing elit.

Standard paragraph, p.text--body-small
Current breakpoint: LG - font-size: 15px / line-height: 24px Current breakpoint: MD - font-size: 15px / line-height: 24px Current breakpoint: SM - font-size: 15px / line-height: 24px



I am a Subtitle: lorem ipsum dolor sit amet, consectetur adipiscing elit.

'Subtitle' .text--subtitle
Current breakpoint: LG - font-size: 36px / line-height: 48px Current breakpoint: MD - font-size: 36px / line-height: 48px Current breakpoint: SM - font-size: 27px / line-height: 40px




I am a Subtitle Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.

'Subtitle small' .text--subtitle--small
Current breakpoint: LG - font-size: 36px / line-height: 48px Current breakpoint: MD - font-size: 36px / line-height: 48px Current breakpoint: SM - font-size: 27px / line-height: 40px




I am a Label: lorem ipsum dolor sit amet, consectetur adipiscing elit.

'Label' .text--label
Current breakpoint: LG - font-size: 15px / line-height: 24px Current breakpoint: MD - font-size: 15px / line-height: 24px Current breakpoint: SM - font-size: 11px / line-height: 16px


I am a Label Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.

'Label' .text--label
Current breakpoint: LG - font-size: 11px / line-height: 16px Current breakpoint: MD - font-size: 11px / line-height: 16px Current breakpoint: SM - font-size: 11px / line-height: 16px


I am a Footnote: lorem ipsum dolor sit amet, consectetur adipiscing elit.

'Footnote' .text--footnote
Current breakpoint: LG - font-size: 11px / line-height: 16px Current breakpoint: MD - font-size: 11px / line-height: 16px Current breakpoint: SM - font-size: 11px / line-height: 16px


Markup: components/typography/typography.twig
<style>
.breakpoint-lg, .breakpoint-md{display:none}
.breakpoint-sm{display:inline-block}
@media (min-width: 740px){
  .breakpoint-md{display:inline-block}
  .breakpoint-sm, .breakpoint-lg {display:none}
}
@media (min-width: 1024px){
  .breakpoint-lg {display:inline-block}
  .breakpoint-sm, .breakpoint-md{display:none}
}
</style>
<p>Comic Relief uses Montserrat and Anton; the latter for headings, the former of body copy, labels etc.</p>

<h1>Fonts</h1>
<br/>
<br/>
<h3>Type Sizes</h3>
<p>All type sizes and line heights come from a typographic scale, using multiples of 8.</p>
<br/>
<br/>
<h3>Headings</h3>
<p>There are a range of heading sizes from H1 to H3, using the font size and line height. According to the typographic scale set the heading change sizes responsively for different media devices.</p>

<h1 class="text--title">'Title' Header 1</h1>
  <span class="font--red"><b>.text--title</b> (Used for headers and landing pages, noted as 'Title' H1 in the Design System)</span><br/>
  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 100px / line-height: 104px</span>
  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 100px / line-height: 104px</span>
  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 54px / line-height: 62px</span>
<br/>
<br/>
<br/>

<h1>Header 1</h1>
 <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 64px / line-height: 72px</span>
 <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 64px / line-height: 72px</span>
 <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 42px / line-height: 48px</span>
<br/>
<br/>
<br/>

<h2>Header 2</h2>
  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 42px / line-height: 48px</span>
  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 42px / line-height: 48px</span>
  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 34px / line-height: 40px</span>
<br/>
<br/>
<br/>

<h3>Header 3</h3>
  <span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 26px / line-height: 32px</span>
  <span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 26px / line-height: 32px</span>
  <span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 26px / line-height: 32px</span>
<br/>
<br/>
<br/>
<br/>

<h3>Copy, labels etc.</h3>

<p>I am a standard paragraph, also p.text--body for CMS reasons: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>Standard paragraph, p.text--body </b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 20px / line-height: 32px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 20px / line-height: 32px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 15px / line-height: 24px</span>
<br/>
<br/>
<br/>
<br/>

<p class="text--body-small">I am a small paragraph, p.text--body-small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>Standard paragraph, p.text--body-small </b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 15px / line-height: 24px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 15px / line-height: 24px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 15px / line-height: 24px</span>
<br/>
<br/>
<br/>
<br/>

<p class="text--subtitle">I am a Subtitle: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Subtitle' .text--subtitle</b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 36px / line-height: 48px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 36px / line-height: 48px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 27px / line-height: 40px</span>
</p>
<br/>
<br/>
<br/>

<p class="text--subtitle-small">I am a Subtitle Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Subtitle small' .text--subtitle--small</b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 36px / line-height: 48px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 36px / line-height: 48px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 27px / line-height: 40px</span>
</p>
<br/>
<br/>
<br/>

<p class="text--label">I am a Label: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Label' .text--label</b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 15px / line-height: 24px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 15px / line-height: 24px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
<br/>
<br/>
<br/>

<p class="text--label">I am a Label Small: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Label' .text--label</b></span><br/>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 11px / line-height: 16px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 11px / line-height: 16px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
<br/>
<br/>
<br/>


<p class="text--footnote">I am a Footnote: lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<span class="font--red"><b>'Footnote' .text--footnote</b><br/></span>
<span class="breakpoint-lg font--red"><b>Current breakpoint: LG </b> - font-size: 11px / line-height: 16px</span>
<span class="breakpoint-md font--red"><b>Current breakpoint: MD </b> - font-size: 11px / line-height: 16px</span>
<span class="breakpoint-sm font--red"><b>Current breakpoint: SM </b> - font-size: 11px / line-height: 16px</span>
<br/>
<br/>
<br/>

Source: _cr19-styleguide.scss, line 9
Example

Primary buttons

Buttons have multiple variations that can be used for styling or functional purposes. The are used in conjunction with the base button .btn .btn--dark-purple class

Link

Red variation .btn--red

Link

Deep violet variation .btn--deep-violet

Link

Grey variation .btn--grey

Link

Coral variation .btn--coral

Link

Orange variation .btn--orange

Link

Yellow variation .btn--yellow

Link

Green variation .btn--green

Link

Blue variation .btn--blue

Link

Purple variation .btn--purple

Link

Magenta variation .btn--magenta

Link

Teal variation .btn--teal

Link

Light grey variation .btn--light-grey

Link

Light coral variation .btn--light-coral

Link

Light orange variation .btn--light-orange

Link

Light yellow variation .btn--light-yellow

Link

Light green variation .btn--light-green

Link

Light blue variation .btn--light-blue

Link

Light purple variation .btn--light-purple

Link

Light magenta variation .btn--light-

Link

Light teal variation .btn--light-teal

Link

Dark grey variation .btn--dark-grey

Link

Dark coral variation .btn--dark-coral

Link

Dark orange variation .btn--dark-orange

Link

Dark yellow variation .btn--dark-yellow

Link

Dark green variation .btn--dark-green

Link

Dark blue variation .btn--dark-blue

Link

Dark magenta variation .btn--dark-

Link

Dark purple variation .btn--dark-purple

Link

Dark teal variation .btn--dark-teal

Link

White variation .btn--white

Markup: components/buttons/buttons.twig
<h3>Primary buttons</h3>
<p>Buttons have multiple variations that can be used for styling or functional purposes. The are used in conjunction with the base button <b>.btn .btn--dark-purple</b> class</p>


<a class="btn btn--red" href="#">Link</a>
<button class="btn btn--red">Button</button>
<p style="margin-top: 10px;">Red variation <i>.btn--red</i></p>

<a class="btn btn--deep-violet" href="#">Link</a>
<button class="btn btn--deep-violet">Button</button>
<p style="margin-top: 10px;">Deep violet variation <i>.btn--deep-violet</i></p>

<a class="btn btn--grey" href="#">Link</a>
<button class="btn btn--grey">Button</button>
<p style="margin-top: 10px;">Grey variation <i>.btn--grey</i></p>

<a class="btn btn--coral" href="#">Link</a>
<button class="btn btn--coral">Button</button>
<p style="margin-top: 10px;">Coral variation <i>.btn--coral</i></p>

<a class="btn btn--orange" href="#">Link</a>
<button class="btn btn--orange">Button</button>
<p style="margin-top: 10px;">Orange variation <i>.btn--orange</i></p>

<a class="btn btn--yellow" href="#">Link</a>
<button class="btn btn--yellow">Button</button>
<p style="margin-top: 10px;">Yellow variation <i>.btn--yellow</i></p>

<a class="btn btn--green" href="#">Link</a>
<button class="btn btn--green">Button</button>
<p style="margin-top: 10px;">Green variation <i>.btn--green</i></p>

<a class="btn btn--blue" href="#">Link</a>
<button class="btn btn--blue">Button</button>
<p style="margin-top: 10px;">Blue variation <i>.btn--blue</i></p>

<a class="btn btn--purple" href="#">Link</a>
<button class="btn btn--purple">Button</button>
<p style="margin-top: 10px;">Purple variation <i>.btn--purple</i></p>

<a class="btn btn--magenta" href="#">Link</a>
<button class="btn btn--magenta">Button</button>
<p style="margin-top: 10px;">Magenta variation <i>.btn--magenta</i></p>

<a class="btn btn--teal" href="#">Link</a>
<button class="btn btn--teal">Button</button>
<p style="margin-top: 10px;">Teal variation <i>.btn--teal</i></p>


{# LIGHT BUTTONS #}
<a class="btn btn--light-grey" href="#">Link</a>
<button class="btn btn--light-grey">Button</button>
<p style="margin-top: 10px;">Light grey variation <i>.btn--light-grey</i></p>

<a class="btn btn--light-coral" href="#">Link</a>
<button class="btn btn--light-coral">Button</button>
<p style="margin-top: 10px;">Light coral variation <i>.btn--light-coral</i></p>

<a class="btn btn--light-orange" href="#">Link</a>
<button class="btn btn--light-orange">Button</button>
<p style="margin-top: 10px;">Light orange variation <i>.btn--light-orange</i></p>

<a class="btn btn--light-yellow" href="#">Link</a>
<button class="btn btn--light-yellow">Button</button>
<p style="margin-top: 10px;">Light yellow variation <i>.btn--light-yellow</i></p>

<a class="btn btn--light-green" href="#">Link</a>
<button class="btn btn--light-green">Button</button>
<p style="margin-top: 10px;">Light green variation <i>.btn--light-green</i></p>

<a class="btn btn--light-blue" href="#">Link</a>
<button class="btn btn--light-blue">Button</button>
<p style="margin-top: 10px;">Light blue variation <i>.btn--light-blue</i></p>

<a class="btn btn--light-purple" href="#">Link</a>
<button class="btn btn--light-purple">Button</button>
<p style="margin-top: 10px;">Light purple variation <i>.btn--light-purple</i></p>

<a class="btn btn--light-magenta" href="#">Link</a>
<button class="btn btn--light-magenta">Button</button>
<p style="margin-top: 10px;">Light magenta variation <i>.btn--light-</i></p>

<a class="btn btn--light-teal" href="#">Link</a>
<button class="btn btn--light-teal">Button</button>
<p style="margin-top: 10px;">Light teal variation <i>.btn--light-teal</i></p>

{# DARK BUTTONS #}
<a class="btn btn--dark-grey" href="#">Link</a>
<button class="btn btn--dark-grey">Button</button>
<p style="margin-top: 10px;">Dark grey variation <i>.btn--dark-grey</i></p>

<a class="btn btn--dark-coral" href="#">Link</a>
<button class="btn btn--dark-coral">Button</button>
<p style="margin-top: 10px;">Dark coral variation <i>.btn--dark-coral</i></p>

<a class="btn btn--dark-orange" href="#">Link</a>
<button class="btn btn--dark-orange">Button</button>
<p style="margin-top: 10px;">Dark orange variation <i>.btn--dark-orange</i></p>

<a class="btn btn--dark-yellow" href="#">Link</a>
<button class="btn btn--dark-yellow">Button</button>
<p style="margin-top: 10px;">Dark yellow variation <i>.btn--dark-yellow</i></p>

<a class="btn btn--dark-green" href="#">Link</a>
<button class="btn btn--dark-green">Button</button>
<p style="margin-top: 10px;">Dark green variation <i>.btn--dark-green</i></p>

<a class="btn btn--dark-blue" href="#">Link</a>
<button class="btn btn--dark-blue">Button</button>
<p style="margin-top: 10px;">Dark blue variation <i>.btn--dark-blue</i></p>

<a class="btn btn--dark-magenta" href="#">Link</a>
<button class="btn btn--dark-magenta">Button</button>
<p style="margin-top: 10px;">Dark magenta variation <i>.btn--dark-</i></p>

<a class="btn btn--dark-purple" href="#">Link</a>
<button class="btn btn--dark-purple">Button</button>
<p style="margin-top: 10px;">Dark purple variation <i>.btn--dark-purple</i></p>

<a class="btn btn--dark-teal" href="#">Link</a>
<button class="btn btn--dark-teal">Button</button>
<p style="margin-top: 10px;">Dark teal variation <i>.btn--dark-teal</i></p>

<div class="bg--black" style="padding: 20px; margin-bottom: 20px;">
  <a class="btn btn--white" href="#">Link</a>
  <button class="btn btn--white">Button</button>
  <p style="margin-top: 10px;">White variation <i>.btn--white</i></p>
</div>
Source: _cr19-styleguide.scss, line 25
Example

Primary colours

white
Deep violet
Red

Secondary colours

grey
coral
Orange
yellow
green
blue
magenta
purple
teal

Secondary light colours

Light grey
Light coral
Light orange
Light yellow
Light green
Light blue
Light magenta
Light purple
Light teal

Secondary dark colours

Dark grey
Dark coral
Dark orange
Dark yellow
Dark green
Dark blue
Dark magenta
Dark purple
Dark teal
Markup: variables/colour.twig
<h3>Primary colours</h3>

<div style="display: inline-block; margin: 10px">
	<div class="bg--white" style="height: 100px; margin-bottom: 10px; display:block; width: 100px; border: 1px solid black;"></div>
	<h5>white</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--deep-violet" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Deep violet</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--red" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Red</h5>
</div>


<h3>Secondary colours</h3>
<div style="display: inline-block; margin: 10px">
	<div class="bg--grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>grey</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>coral</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Orange</h5>
</div>


<div style="display: inline-block; margin: 10px">
	<div class="bg--yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>yellow</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>green</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>blue</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>magenta</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>purple</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>teal</h5>
</div>



<h3>Secondary light colours</h3>
<div style="display: inline-block; margin: 10px">
	<div class="bg--light-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light grey</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light coral</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light orange</h5>
</div>


<div style="display: inline-block; margin: 10px">
	<div class="bg--light-yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light yellow</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light green</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light blue</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light magenta</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light purple</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--light-teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Light teal</h5>
</div>


<h3>Secondary dark colours</h3>
<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark grey</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-coral" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark coral</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-orange" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark orange</h5>
</div>


<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-yellow" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark yellow</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark green</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark blue</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-magenta" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark magenta</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark purple</h5>
</div>

<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-teal" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5>Dark teal</h5>
</div>

Source: _cr19-styleguide.scss, line 37
Example


Primary colour backgrounds

.bg--white

.bg--red

.bg--deep-violet

Secondary colour backgrounds

.bg--grey

.bg--coral

.bg--orange

.bg--yellow

.bg--green

.bg--blue

.bg--magenta

.bg--purple

.bg--teal

Secondary light colour backgrounds

.bg--light-grey

.bg--light-coral

.bg--light-orange

.bg--light-yellow

.bg--light-green

.bg--light-blue

.bg--light-magenta

.bg--light-purple

.bg--light-teal

Secondary dark colour backgrounds

.bg--dark-grey

.bg--dark-coral

.bg--orange

.bg--dark-yellow

.bg--dark-green

.bg--dark-blue

.bg--dark-magenta

.bg--dark-purple

.bg--dark-teal

Markup: components/background-colours/background-colours.twig

<br/>
<br/>

<h3>Primary colour backgrounds</h3>
<div class="bg--white" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--white</p>

<div class="bg--red" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--red</p>

<div class="bg--deep-violet" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--deep-violet</p>


<h3>Secondary colour backgrounds</h3>
<div class="bg--grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--grey</p>

<div class="bg--coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--coral</p>

<div class="bg--orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--orange</p>

<div class="bg--yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--yellow</p>

<div class="bg--green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--green</p>

<div class="bg--blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--blue</p>

<div class="bg--magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--magenta</p>

<div class="bg--purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--purple</p>

<div class="bg--teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--teal</p>


<h3>Secondary light colour backgrounds</h3>
<div class="bg--light-grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-grey</p>

<div class="bg--light-coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-coral</p>

<div class="bg--light-orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-orange</p>

<div class="bg--light-yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-yellow</p>

<div class="bg--light-green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-green</p>

<div class="bg--light-blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-blue</p>

<div class="bg--light-magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-magenta</p>

<div class="bg--light-purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-purple</p>

<div class="bg--light-teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--light-teal</p>


<h3>Secondary dark colour backgrounds</h3>
<div class="bg--dark-grey" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-grey</p>

<div class="bg--dark-coral" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-coral</p>

<div class="bg--dark-orange" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--orange</p>

<div class="bg--dark-yellow" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-yellow</p>

<div class="bg--dark-green" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-green</p>

<div class="bg--dark-blue" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-blue</p>

<div class="bg--dark-magenta" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-magenta</p>

<div class="bg--dark-purple" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-purple</p>

<div class="bg--dark-teal" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>.bg--dark-teal</p>
Source: _cr19-styleguide.scss, line 43
Example
Markup
<a href="#" class="external-link">External Link</a>
Source: _cr19-styleguide.scss, line 51
Example
  • Item 1
  • Item 2
  • Item 3
  • Item 4
Markup
<div class="cr-body">
 <ul>
   <li>Item 1</li>
	  <li>Item 2</li>
	  <li>Item 3</li>
	  <li>Item 4</li>
 </ul>
</div>
Source: _cr19-styleguide.scss, line 58
Example

Who is reporting

Type of issue

How to report

Employee (or equivalent)

Any

Comic Relief designated contact or Public Concern at Work

Service Provider/Partner (those who Comic Relief enters into contracts for services or goods)

Any

Comic Relief designated contact

Grantees (those who Comic Relief supports through its funding activities)

Concerns about Comic Relief’s organisation or operations, fraud, or potential fraud

Comic Relief designated contact

Markup: components/table/table.twig
<table border="2" cellpadding="10" cellspacing="2" width="100%">
	<tbody>
		<tr>
			<td>
			<p><strong>Who is reporting</strong></p>
			</td>
			<td>
			<p><strong>Type of issue</strong></p>
			</td>
			<td>
			<p><strong>How to report</strong></p>
			</td>
		</tr>
		<tr>
			<td>
			<p>Employee (or equivalent)</p>
			</td>
			<td>
			<p>Any</p>
			</td>
			<td>
			<p>Comic Relief designated contact or&nbsp;<a class="link link--red inline" href="http://www.pcaw.org.uk/" target="_blank">Public Concern at Work</a></p>
			</td>
		</tr>
		<tr>
			<td>
			<p>Service Provider/Partner (those who Comic Relief enters into contracts for services or goods)</p>
			</td>
			<td>
			<p>Any</p>
			</td>
			<td>
			<p>Comic Relief designated contact</p>
			</td>
		</tr>
		<tr>
			<td>
			<p>Grantees (those who Comic Relief supports through its funding activities)</p>
			</td>
			<td>
			<p>Concerns about Comic Relief’s organisation or operations, fraud, or potential fraud</p>
			</td>
			<td>
			<p>Comic Relief designated contact</p>
			</td>
		</tr>
	</tbody>
</table>
Source: _cr19-styleguide.scss, line 74
Example

This is support text, for example information on how long the password should be

This is an error message
This is a error message
This is a error message

List of radio buttons

 

Here's some additional text

List of checkboxes

Single checkbox with paragraph text (optional)

This block also reiterates that we don’t use asterisks but the (optional) indication for fields that are not mandatory.

Markup: form.twig
<form novalidate>
	<div id="field-wrapper--standard" class="form__fieldset form__field--wrapper form__field-wrapper--text">
		<label id="field-label--standard" for="field-input--standard" class="form__field-label required">Input required with paragraph text and hint</label>
		<p class="form-help-text">This is support text, for example information on how long the password should be</p>
		<input 
			type="text" 
			id="field-input--standard" 
			name="standard" 
			class="form__field form__field--text" 
			required="required" 
			placeholder="This is hint text" 
			pattern="" 
			aria-describedby="field-label--standard"
		>
	</div>
	<div id="field-wrapper--standard-error" class="form__fieldset form__field--wrapper form__field-wrapper--text">
		<label id="field-label--firstname" for="field-input--firstname" class="form__field-label required">Input with error mesaage</label>
		<input 
			type="text" 
			id="field-input--standard-error" 
			name="firstname" 
			class="form__field form__field--text form__field--error-outline" 
			required="" 
			placeholder="Field completed incorrectly" 
			pattern="" 
			aria-describedby="field-label--standard"
		>
		<div id="field-error--standard-error" class="form__field-error-container form__field-error-container--text" aria-live="assertive" role="status">
			<span class="form-error">This is an error message</span>
		</div>
	</div>
	<div id="field-wrapper--standard-optional" class="form__fieldset form__field--wrapper form__field-wrapper--text">
		<label id="field-wrapper--standard-optional" for="field-input--standard" class="form__field-label">Simple input <span>(optional)</span></label>
		<input 
			type="text" 
			id="field-wrapper--standard-optional" 
			name="standard" 
			class="form__field form__field--text error-border" 
			placeholder="" 
			pattern="" 
			aria-describedby="field-label--standard"
		>
	</div>
	<div class="form__field--wrapper form__choice form__field--select">
		<label class="form__field form__field--country form__choice required" for="field-input--select">Dropdown menu</label>
		<select 
			id="field-input--select" 
			name="select-1" 
			class="form__field form__field--select"
		> 
			<option >Please select</option>
			<option value="GB">United Kingdom</option>
			<option disabled="disabled">-------------------</option>
		</select>
	</div>

	<div class="form__field--wrapper form__choice form__field--select">
		<label class="form__field form__field--country form__choice required" for="field-input--select">Dropdown menu</label>
		<select 
			id="field-input--select" 
			name="select-2" 
			class="form__field form__field--country form__field--error-outline"
		> 
			<option >Please select</option>
			<option value="GB">United Kingdom</option>
			<option disabled="disabled">-------------------</option>
		</select>
		</select>
		<div class="form__field--error" aria-live="assertive" role="status">
			<span class="form-error">This is a error message</span>
		</div>
	</div>
	<div class="form__field--wrapper form__textarea">
        <label class="form__texarea required" for="comicrelief_payin_general_permissionEmail require">Long copy/Message field</label>
        <textarea class="form__field">This is text area</textarea>
    </div>
	<div class="form__field--wrapper form__textarea">
        <label class="form__texarea required" for="comicrelief_payin_general_permissionEmail">Long copy/Message field</label>
        <textarea class="form__field form__field--error-outline">This is text area</textarea>
		<div class="form__field--error" aria-live="assertive" role="status">
			<span class="form-error">This is a error message</span>
		</div>
    </div>
	<div class="form__row form__field--wrapper form__field-wrapper--radio">
		<p class="form__fieldset--label"> List of radio buttons </p>
		<div class="form__field--wrapper form__radio form__radio--inline">
			<label class="form__field-label" for="radio-1">Option 1</label>
			<input type="radio" id="radio-1" name="radio-group" value="1" checked/>
			<span></span>
		</div>
		<div class="form__field--wrapper form__radio form__radio--inline">
			<label class="form__field-label" for="radio-2">Option 2</label>
			<input type="radio" id="radio-2" name="radio-group" value="2" />
			<span>&nbsp;</span>
			<div class="form__fieldset form__field--wrapper form__field-additional-text">
			 <div>
			 	<p>Here's some additional text </p>
			 	</div>
			</div>
		</div>
	</div>
	<div class="form__row form__field--wrapper form__field-wrapper--checkbox">
		<p class="form__fieldset--label"> List of checkboxes </p>
		<div class="form__field--wrapper form__checkbox form__checkbox--inline">
			<label class="form__field-label" for="checkbox-1">Option 1</label>
			<input type="checkbox" id="checkbox-1" name="group-checkbox" value="1" checked />
			<span></span>
		</div>
		<div class="form__field--wrapper form__checkbox form__checkbox--inline">
			<label class="form__field-label" for="checkbox-2">Option 2</label>
			<input type="checkbox" id="checkbx-2" name="group-checkbox" value="2" />
			<span></span>
		</div>
	</div>
	<div class="form__field--wrapper form__field-wrapper--checkbox form__checkbox-paragraph">
		<p class="form__fieldset--label">Single checkbox with paragraph text (optional)</p>
		<p>This block also reiterates that we don’t use asterisks but the (optional) indication for fields that are not mandatory.</p>
		<div class="form__checkbox--inline">
			<label class="form__field-label" for="singlecheckbox">Option 1</label>
			<input type="checkbox" id="singlecheckbox" name="singlecheckbox" value="1" />
			<span></span>
		</div>
    </div>
    <div class="form__field--wrapper form__field-wrapper--checkbox form__field-wrapper--background">
        <div class="form__checkbox--inline">
            <label class="form__field-label" for="singlecheckbox1">Single checkbox with background colour</label>
            <input type="checkbox" id="singlecheckbox1" name="singlecheckbox1" value="2" />
            <span></span>
        </div>
    </div>
</div>

</form>
Source: _cr19-styleguide.scss, line 82
Examples
Default styling

Highlight class - Adds border around text (used for the years on Timeline page).

.highlight--red
Red highlight

Highlight class - Adds border around text (used for the years on Timeline page).

.highlight--purple
Purple highlight

Highlight class - Adds border around text (used for the years on Timeline page).

.highlight--royal-blue
Royal-blue highlight

Highlight class - Adds border around text (used for the years on Timeline page).

.highlight--mint-green
Mint-green highlight

Highlight class - Adds border around text (used for the years on Timeline page).

.highlight--white
Mint-green highlight

Highlight class - Adds border around text (used for the years on Timeline page).

Markup: components/highlight/highlight.twig
<p><span class="highlight {{modifier_class}}">Highlight class</span> - Adds border around text (used for the years on Timeline page).</p>
Source: _cr19-styleguide.scss, line 90

Links

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

Links are used for call-to-actions that are lower in the hierachy and aren’t as key as ones used in buttons. They can also be used for call-to-actions with a longer character count.

Examples
Default styling

LINKS

Standard link .link

Bold link .link

White link .link

An incredibly long link to illustrate linebreaks:Vivamus suscipit tortor eget felis porttitor volutpat. .link

Inline Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue inline link, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue

.link--small
Small - The font size is 16px and line height is 26px. Border / underline is 4px.

LINKS

Standard link .link

Bold link .link

White link .link

An incredibly long link to illustrate linebreaks:Vivamus suscipit tortor eget felis porttitor volutpat. .link

Inline Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue inline link, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue

Markup: components/links/links.twig
<p>LINKS</p>
<p>
  <a class="link" href="#">Standard link</a> <i>.link</i>
</p>
<p>
  <a class="link link--bold" href="#">Bold link</a> <i>.link</i>
</p>

<p class="bg--black" style="padding: 5px;">
  <a class="link" href="#">White link</a>
  <i>.link</i>
</p>

<p>
  <a class="link" href="#">An incredibly long link to illustrate linebreaks:Vivamus suscipit tortor eget felis porttitor volutpat.
  </a> <i>.link</i>
</p>

<div class="bg--dark-grey" style="padding: 10px;">
  <p class="bg--light-grey" style="padding: 5px;">
    <a class="link" href="#">A link to show nested bg-colour rules working properly</a>
    <i>.link</i>
  </p>
</div>


<h3 style="margin-top: 30px;">Inline Link</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue <a href="#" class="link inline">inline link</a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue</p>
Source: _cr19-styleguide.scss, line 15