Source: components/typography/_typography.scss, line 2
Example

The Comic Relief font is Proxima Nova. This used for headings and body copy in a number of weights (Bold, Semibold and Regular).

There are a range of heading sizes from H1 to H5. These sizes are based on a typographic scale, with the base of 18px.

H1.large: 83px

This is fun, right?

H1 59px

This is fun, right?

H2

This is fun, right?

H3

This is fun, right?

H4

This is fun, right?

H5

This is fun, right?



Paragraphs

There are a range of heading sizes from H1 to H5. These are used

18 px

This is fun, right?

18 px

This is fun, right?

18 px

This is fun, right?

Markup: components/typography/typography.twig
<p>The Comic Relief font is Proxima Nova. This used for headings and body copy in a number of weights (Bold, Semibold and Regular).</p>
<p>There are a range of heading sizes from H1 to H5. These sizes are based on a typographic scale, with the base of 18px.</p>
<p>H1.large: 83px</p>
<h1>This is fun, right?</h1>
<p>H1 59px</p>
<h1 class="font--large">This is fun, right?</h1>
<p>H2</p>
<h2>This is fun, right?</h2>
<p>H3</p>
<h3>This is fun, right?</h3>
<p>H4</p>
<h4>This is fun, right?</h4>
<p>H5</p>
<h5>This is fun, right?</h5>
<br/>
<br/>
<br/>
<h4>Paragraphs</h4>
<p>There are a range of heading sizes from H1 to H5. These are used</p>
<p>18 px</p>
<p>This is fun, right?</p>
<p>18 px</p>
<p>This is fun, right?</p>
<p>18 px</p>
<p>This is fun, right?</p>
Source: components/typography/_typography.scss, line 6

Links

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

Buttons are normally used for key messages, or key call-to-actions. For less important messages, a link may be more appropriate. Buttons text uses the Bold weight of the Proxima Nova font. All buttons

Examples
Default styling

Link

This is an example of an inline link, this will be the same for all coloured links above.

.link--large
Large - The font size is 18px and line height is 28px. Border / underline is 4px.

Link

This is an example of an inline link, this will be the same for all coloured links above.

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

Link

This is an example of an inline link, this will be the same for all coloured links above.

:hover
Link hover state

Link

This is an example of an inline link, this will be the same for all coloured links above.

:active
Link active state

Link

This is an example of an inline link, this will be the same for all coloured links above.

:focus
Link focus state

Link

This is an example of an inline link, this will be the same for all coloured links above.

Markup: components/links/links.twig
<p>
  <a class="link {{modifier_class}}" href="#">
    Link
  </a>
</p>

<p>
  This is an example of an <a class="link {{modifier_class}} inline">inline link</a>, this will be the same for all coloured links above.
</p>
Source: components/links/_links.scss, line 1

Buttons

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

Buttons are normally used for key messages, or key call-to-actions. For less important messages, a link may be more appropriate. Buttons text uses the Bold weight of the Proxima Nova font. All buttons

Examples
Default styling
Primary buttons
.btn--black-ghost
Black ghost button
Primary buttons
.btn--white-ghost
White ghost button
Primary buttons
.btn--red
Red button
Primary buttons
.btn--blue
Blue button
Primary buttons
.btn--purple
Purple button
Primary buttons
.btn--white
White button
Primary buttons
:hover
Button hover state
Primary buttons
:active
Button active state
Primary buttons
:focus
Button focus state
Primary buttons
Markup: components/buttons/buttons.twig
<a class="btn {{modifier_class}}" href="#">
  Primary buttons
</a>
<button class="btn {{modifier_class}}">Native button</button>
Source: components/buttons/_buttons.scss, line 1
Example

Primary palette

Across the site we use


$colour-red

#f04257


$colour-white

#fff


$colour-purple

#7d2ca9

Secondary palette

Across the site we use


$colour-blue

#22d2dc


$colour-yellow

#fbef51


$colour-green

#b2e55e


$colour-teal

#00beca



$colour-royal-blue

#0565d1


$colour-pink

#fc9eb9


$colour-dark-blue

#061d38

Greyscale palette

Across the site we use


$colour-black

#030e1a


$colour-jasper-grey

#666


$colour-gainsboro-grey

#c7c7c7


$colour-light-grey

#e6e3dc


$colour-smoke-grey

#f0f0f0

Markup: variables/colour.twig
<h3>Primary palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
	<div class="bg--red" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-red</p>
	<p>#f04257</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--white" style="border: 1px solid black; height: 99px; display:block; width: 99px;"></div>
	<p><br/>$colour-white</p>
	<p>#fff</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--purple" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-purple</p>
	<p>#7d2ca9</p>
</div>
<h3>Secondary palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
	<div class="bg--blue" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-blue</p>
	<p>#22d2dc</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--yellow" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-yellow</p>
	<p>#fbef51</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--green" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-green</p>
	<p>#b2e55e</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--teal"  style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-teal</p>
	<p>#00beca</p>
</div>
<br/>
<div style="display: inline-block; margin: 10px">
	<div class="bg--royal-blue" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-royal-blue</p>
	<p>#0565d1</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--pink" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-pink</p>
	<p>#fc9eb9</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-blue" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-dark-blue</p>
	<p>#061d38</p>
</div>
<h3>Greyscale palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
	<div class="bg--black" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-black</p>
	<p>#030e1a</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--jasper-grey" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-jasper-grey</p>
	<p>#666</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--gainsboro-grey" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-gainsboro-grey</p>
	<p>#c7c7c7</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--light-grey" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-light-grey</p>
	<p>#e6e3dc</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--smoke-grey" style="height: 100px; display:block; width: 100px;"></div>
	<p><br/>$colour-smoke-grey</p>
	<p>#f0f0f0</p>
</div>
Source: variables/_colours.scss, line 2
Example


$colour-red: #f04257;


$colour-blue: #22d2dc;


$colour-yellow: #fbef51;


$colour-green: #b2e55e;


$colour-teal: #00beca;


$colour-royal-blue: #0565d1;


$colour-purple: #7d2ca9;


$colour-pink: #fc9eb9;


$colour-black: #030e1a;


$colour-dark-blue #061d38;


$colour-jasper-grey: #666;


$colour-gainsboro-grey: #c7c7c7;


$colour-light-grey: #e6e3dc;


$colour-smoke-grey: #f0f0f0;

Markup: components/background-colours/background-colours.twig
<div class="bg--red" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-red: #f04257;</p>
<div class="bg--blue" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-blue: #22d2dc;</p>
<div class="bg--yellow" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-yellow: #fbef51;</p>
<div class="bg--green" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-green: #b2e55e;</p>
<div class="bg--teal"  style="height: 100px; width: 100%;"></div>
<p><br/>$colour-teal: #00beca;</p>
<div class="bg--royal-blue" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-royal-blue: #0565d1;</p>
<div class="bg--purple" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-purple: #7d2ca9;</p>
<div class="bg--pink" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-pink: #fc9eb9;</p>
<div class="bg--black" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-black: #030e1a;</p>
<div class="bg--dark-blue" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-dark-blue #061d38;</p>
<div class="bg--jasper-grey" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-jasper-grey: #666;</p>
<div class="bg--gainsboro-grey" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-gainsboro-grey: #c7c7c7;</p>
<div class="bg--light-grey" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-light-grey: #e6e3dc;</p>
<div class="bg--smoke-grey" style="height: 100px; width: 100%;"></div>
<p><br/>$colour-smoke-grey: #f0f0f0;</p>
Source: components/background-colours/_background-colours.scss, line 1
Example
Markup
<a href="#" class="external-link">External Link</a>
Source: components/external-link/_external-link.scss, line 1
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: components/list/_list.scss, line 1
Example

Markup: components/form/form.twig
<form>
<div>
 <select>
   <option value selected="selected">- Please select -</option>
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
 </select><br>
</div>
<div>
	<label for="checkbox">
		<input type="checkbox">
		<span></span>
		<span>This is a checkbox</span>
	</label>
</div>
<div>
	<label for="radio">
		<input type="radio">
		<span></span>
		<span>This is a radio button</span>
	</label>
</div>
<div>
	<textarea>This is text area</textarea>
</div>
<div>
	<input type="submit">
</div>
</form>
Source: components/form/_form.scss, line 2
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: components/table/_table.scss, line 1