Source: base-styleguide.scss, line 6
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: base-styleguide.scss, line 10

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: base-styleguide.scss, line 16
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: base-styleguide.scss, line 30
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: base-styleguide.scss, line 46
Example
Markup
<a href="#" class="external-link">External Link</a>
Source: base-styleguide.scss, line 54
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: base-styleguide.scss, line 61
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: base-styleguide.scss, line 77
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

List of 2 checkboxes horizontally inline

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: components/form/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__row form__field--wrapper form__field-wrapper--checkbox">
		<p class="form__fieldset--label"> List of 2 checkboxes horizontally inline</p>
		<div class="form__field--wrapper form__checkbox form__checkbox--inline form__checkbox--inline-2-horizontal">
			<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 form__checkbox--inline-2-horizontal">
			<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: base-styleguide.scss, line 85