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

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

Fonts

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

Black

Sailec Black (used for buttons) .font--family-black

Bold

Sailec Bold (used for headings) .font--family-bold

Regular

Sailec Regular (used for body copy) .font--family-regular

Type Sizes

All type sizes and line heights come from a typographic scale, which has a base copy size of 18px. This table shows

table of type sizes

Headings

There are a range of heading sizes from H1 to H5, using the typographic scale.

This is fun, right?

h1 (L): Used mainly for headers on landing pages

This is fun, right?

h1: Used in secondary page headers

This is fun, right?

h2: Used within pages, normally as row headings

This is fun, right?

h3: Used within pages, normally as row headings

This is fun, right?

h4: Used within pages, normally as row headings

This is fun, right?

h5: Used within pages, normally as row headings




Paragraphs

Red font .font--red There are a range of paragraph sizes, using the typographic scale.

Purple font .font--purple There are a range of paragraph sizes, using the typographic scale.

Royal Blue font .font--royal-blue There are a range of paragraph sizes, using the typographic scale.

White font .font--white There are a range of paragraph sizes, using the typographic scale.

Mint Green font .font--mint-green There are a range of paragraph sizes, using the typographic scale.

Markup: components/typography/typography.twig
<p>The Comic Relief font is Sailec. This used for headings and body copy in a number of weights (Black, Bold and Regular).</p>
<h3>Fonts</h3>
<p>The Comic Relief font is Sailec. This used for headings and body copy in a number of weights (Black, Bold and Regular).</p>
<h1 class="font--family-black">Black</h1>
<p>Sailec Black (used for buttons) <b>.font--family-black</b></p>
<h1 class="font--family-bold">Bold</h1>
<p>Sailec Bold (used for headings) <b>.font--family-bold</b></p>
<h1 class="font--family-regular">Regular</h1>
<p>Sailec Regular (used for body copy) <b>.font--family-regular</b></p>

<h3>Type Sizes</h3>
<p>All type sizes and line heights come from a typographic scale, which has a base copy size of 18px. This table shows</p>
<i>table of type sizes</i>

<h3>Headings</h3>
<p>There are a range of heading sizes from H1 to H5, using the typographic scale.</p>

<h1>This is fun, right?</h1>
<p>h1 (L): Used mainly for headers on landing pages</p>
<h1 class="font--large">This is fun, right?</h1>
<p>h1: Used in secondary page headers</p>
<h2>This is fun, right?</h2>
<p>h2: Used within pages, normally as row headings</p>
<h3>This is fun, right?</h3>
<p>h3: Used within pages, normally as row headings</p>
<h4>This is fun, right?</h4>
<p>h4: Used within pages, normally as row headings</p>
<h5>This is fun, right?</h5>
<p>h5: Used within pages, normally as row headings</p>
<br/>
<br/>
<br/>
<h4>Paragraphs</h4>
<p class="font--red">Red font <i>.font--red</i> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--purple">Purple font <i>.font--purple</i> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--royal-blue">Royal Blue font <i>.font--royal-blue</i> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--white bg--black" style="padding: 5px;">White font <i>.font--white</i> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--mint-green bg--black" style="padding: 5px;">Mint Green font <i>.font--mint-green</i> There are a range of paragraph sizes, using the typographic scale.</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

Dark purple link .link-dark-purple Look over here, son

Red link .link-red Look over here, son

Royal Blue link .link-royal-blue Look over here, son

Purple link .link--purple Look over here, son

Mint Green .link-mint-green Look over here, son

White link .link--white Look over here, son

Grey link .link--grey Look over here, son

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--large
Large - The font size is 18px and line height is 28px. Border / underline is 4px.

Dark purple link .link-dark-purple Look over here, son

Red link .link-red Look over here, son

Royal Blue link .link-royal-blue Look over here, son

Purple link .link--purple Look over here, son

Mint Green .link-mint-green Look over here, son

White link .link--white Look over here, son

Grey link .link--grey Look over here, son

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.

Dark purple link .link-dark-purple Look over here, son

Red link .link-red Look over here, son

Royal Blue link .link-royal-blue Look over here, son

Purple link .link--purple Look over here, son

Mint Green .link-mint-green Look over here, son

White link .link--white Look over here, son

Grey link .link--grey Look over here, son

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

:hover
Link hover state

Dark purple link .link-dark-purple Look over here, son

Red link .link-red Look over here, son

Royal Blue link .link-royal-blue Look over here, son

Purple link .link--purple Look over here, son

Mint Green .link-mint-green Look over here, son

White link .link--white Look over here, son

Grey link .link--grey Look over here, son

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

:active
Link active state

Dark purple link .link-dark-purple Look over here, son

Red link .link-red Look over here, son

Royal Blue link .link-royal-blue Look over here, son

Purple link .link--purple Look over here, son

Mint Green .link-mint-green Look over here, son

White link .link--white Look over here, son

Grey link .link--grey Look over here, son

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

:focus
Link focus state

Dark purple link .link-dark-purple Look over here, son

Red link .link-red Look over here, son

Royal Blue link .link-royal-blue Look over here, son

Purple link .link--purple Look over here, son

Mint Green .link-mint-green Look over here, son

White link .link--white Look over here, son

Grey link .link--grey Look over here, son

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>
	<a class="link link--dark-purple" href="#">Dark purple link</a> <i>.link-dark-purple</i> Look over here, son
</p>
<p>
	<a class="link link--red" href="#">Red link</a> <i>.link-red</i> Look over here, son
</p>
<p>
	<a class="link link--royal-blue" href="#">Royal Blue link</a> <i>.link-royal-blue</i> Look over here, son
</p>
<p>
	<a class="link link--purple" href="#">Purple link</a> <i>.link--purple</i> Look over here, son
</p>
<p class="font--white bg--black" style="padding: 5px;">
	<a class="link link--mint-green" href="#">Mint Green</a> <i>.link-mint-green</i> Look over here, son
</p>
<p class="font--white bg--black" style="padding: 5px;">
	<a class="link link--white" href="#">White link</a> <i>.link--white</i> Look over here, son
</p>
<p class="font--white bg--black" style="padding: 5px;">
	<a class="link link--grey" href="#">Grey link</a> <i>.link--grey</i> Look over here, son
</p>
<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 link--dark-purple inline">inline link</a>, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus efficitur sem sit amet interdum. Donec aliquam augue</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 (see Links). Buttons text uses the Black weight of the Sailec font.

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 with button class

Secondary / Ghost button

Used for less important call-to-actions, particularly when primary buttons are feature on the same component/page, or simply as an alternative styling, where applicable. These buttons appear as ghost (hollow) buttons with 4px solid border and text colour matching the colour of the border. This default styling can be applied by using the .btn--white-ghost class. See Variations for more button syling options.

Link

Variations / Modifiers

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

Link Ghost Button

Red variation .btn--red .btn--red-ghost

Link Ghost Button

Purple variation .btn--purple .btn--purple-ghost

Link Ghost Button

Royal-blue variation .btn--royal-blue .btn--royal-blue-ghost

Link Ghost Button

Mint-green variation .btn--mint-green .btn--mint-green-ghost

Link Ghost Button

White variation .btn--white .btn--white-ghost

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--dark-purple" href="#">Link with button class</a>
<button class="btn btn--dark-purple">Native button</button>
<br>
<h3 style="margin-top: 30px;">Secondary / Ghost button</h3>
<p>Used for less important call-to-actions, particularly when primary buttons are feature on the same component/page, or simply as an alternative styling, where applicable. These buttons appear as ghost (hollow) buttons with 4px solid border and text colour matching the colour of the border. This default styling can be applied by using the <b>.btn--white-ghost</b> class. See Variations for more button syling options.</p>
<a class="btn btn--white-ghost" href="#">Link</a>
<button class="btn btn--white-ghost">Button</button>
<br>
<h3 style="margin-top: 30px;">Variations / Modifiers</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--red etc</b> class</p>

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

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

<a class="btn btn--royal-blue" href="#">Link</a>
<button class="btn btn--royal-blue">Button</button>
<a class="btn btn--royal-blue-ghost" href="#">Ghost Button</a>
<p style="margin-top: 10px;">Royal-blue variation <i>.btn--royal-blue</i> <i>.btn--royal-blue-ghost</i></p>
<div class="bg--black" style="padding: 20px; margin-bottom: 20px;">
	<a class="btn btn--mint-green" href="#">Link</a>
	<button class="btn btn--mint-green">Button</button>
	<a class="btn btn--mint-green-ghost" href="#">Ghost Button</a>
	<p style="margin-top: 10px;">Mint-green variation <i>.btn--mint-green</i> <i>.btn--mint-green-ghost</i></p>
</div>
<div class="bg--black" style="padding: 20px;">
	<a class="btn btn--white" href="#">Link</a>
	<button class="btn btn--white">Button</button>
	<a class="btn btn--white-ghost" href="#">Ghost Button</a>
	<p style="margin-top: 10px;">White variation <i>.btn--white</i> <i>.btn--white-ghost</i></p>
</div>
Source: components/buttons/_buttons.scss, line 1
Example

Primary palette

Used across the site, our main colours consist of red and purple

Red

#ea0043

Purple

#340f78

White

#ffffff

Secondary palette

Across the site we use

Royal Blue

#4032fe

Mint Green

#5df4cf

Dark Purple

#29022c


Greyscale Palette

Light Grey

#f8f8f8

Grey

#e8e8e8

Dark Grey

#333333

Markup: variables/colour.twig
<h3>Primary palette</h3>
<p>Used across the site, our main colours consist of red and purple</p>
<div style="display: inline-block; margin: 10px">
	<div class="bg--red" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--red">Red</h5>
	<p>#ea0043</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--purple" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--purple">Purple</h5>
	<p>#340f78</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--white" style="border: 1px solid black; height: 99px; display:block; margin-bottom: 10px; width: 99px;"></div>
	<h5 class="font--white bg--black">White</h5>
	<p>#ffffff</p>
</div>
<h3>Secondary palette</h3>
<p>Across the site we use</p>
<div style="display: inline-block; margin: 10px">
	<div class="bg--royal-blue" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--royal-blue">Royal Blue</h5>
	<p>#4032fe</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--mint-green" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--mint-green">Mint Green</h5>
	<p>#5df4cf</p>
</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 class="font--dark-purple">Dark Purple</h5>
	<p>#29022c</p>
</div>
<br/>
<h3>Greyscale Palette</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 class="font--light-grey">Light Grey</h5>
	<p>#f8f8f8</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--grey">Grey</h5>
	<p>#e8e8e8</p>
</div>
<div style="display: inline-block; margin: 10px">
	<div class="bg--dark-grey" style="height: 100px; margin-bottom: 10px; display:block; width: 100px;"></div>
	<h5 class="font--dark-grey">Dark Grey</h5>
	<p>#333333</p>
</div>
Source: variables/_colours.scss, line 2
Example


$colour-white: #fff;

$colour-red: #ea0043;

$colour-royal-blue: #4032fe;

$colour-mint-green: #5df4cf;

$colour-purple: #340f78;

$colour-dark-purple: #29022c;

$colour-light-grey: #F8F8F8;

$colour-grey: #e8e8e8;

Markup: components/background-colours/background-colours.twig
<br/>
<br/>
<div class="bg--white" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p>$colour-white: #fff;</p>

<div class="bg--red" style="height: 100px; width: 100%;"></div>
<p>$colour-red: #ea0043;</p>

<div class="bg--royal-blue" style="height: 100px; width: 100%;"></div>
<p>$colour-royal-blue: #4032fe;</p>

<div class="bg--mint-green" style="height: 100px; width: 100%;"></div>
<p>$colour-mint-green: #5df4cf;</p>

<div class="bg--purple" style="height: 100px; width: 100%;"></div>
<p>$colour-purple: #340f78;</p>

<div class="bg--dark-purple" style="height: 100px; width: 100%;"></div>
<p>$colour-dark-purple: #29022c;</p>

<div class="bg--light-grey" style="height: 100px; width: 100%;"></div>
<p>$colour-light-grey: #F8F8F8;</p>

<div class="bg--grey" style="height: 100px; width: 100%;"></div>
<p>$colour-grey: #e8e8e8;</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
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: components/highlight/_highlight.scss, line 1
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

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: 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="comicrelief_payin_general_permissionEmail">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="comicrelief_payin_general_permissionEmail">Option 2</label>
			<input type="radio" id="radio-2" name="radio-group" value="2" />
			<span></span>
		</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: components/form/_standard-form.scss, line 1
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