Source: _sr18-styleguide.scss, line 6
Example

Sport Relief uses Founders Grotesk. This is used for headings and body copy in a number of weights

Fonts

Black

Founders Grotesk X Condensed Bold .font--family-black

Bold

Founders Grotesk Semibold .font--family-bold

Regular

Founders Grotesk Regular .font--family-regular




Type Sizes

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




Headings

There are a range of heading sizes from H1 to H5, using the typographic scale. According to the typographic scale set the heading change sizes responsively for different media devices.

Header 1 Large

.font--large (Used for headers on landing pages)
Current breakpoint: LG
font-size: 167px / line-height: 125px
Current breakpoint: MD
font-size: 132px / line-height: 99px
Current breakpoint: SM
font-size: 65px / line-height: 49px

Header 1

(Used in secondary page headers)
Current breakpoint: LG
font-size: 117px / line-height: 88px
Current breakpoint: MD
font-size: 92px / line-height: 69px
Current breakpoint: SM
font-size: 58px / line-height: 43px

Header 2

Current breakpoint: LG
font-size: 36px / line-height: 40px
Current breakpoint: MD
font-size: 32px / line-height: 35px
Current breakpoint: SM
font-size: 28px / line-height: 31px

Header 3

.alternate
Current breakpoint: LG
font-size: 36px / line-height: 40px
Current breakpoint: MD
font-size: 32px / line-height: 35px
Current breakpoint: SM
font-size: 28px / line-height: 31px

Header 3

Current breakpoint: LG
font-size: 28px / line-height: 31px
Current breakpoint: MD
font-size: 25px / line-height: 28px
Current breakpoint: SM
font-size: 23px / line-height: 25px

Header 4

Current breakpoint: LG
font-size: 23px / line-height: 25px
Current breakpoint: MD
font-size: 20px / line-height: 22px
Current breakpoint: SM
font-size: 18px / line-height: 20px

Header 5

Current breakpoint: LG
font-size: 18px / line-height: 20px
Current breakpoint: MD
font-size: 16px / line-height: 17px
Current breakpoint: SM
font-size: 16px / line-height: 17px



Paragraphs

font--xxlarge: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Current breakpoint: LG
font-size: 36px / line-height: 47px
Current breakpoint: MD
font-size: 36px / line-height: 47px
Current breakpoint: SM
font-size: 32px / line-height: 42px

font--xlarge: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Current breakpoint: LG
font-size: 28px / line-height: 37px
Current breakpoint: MD
font-size: 28px / line-height: 37px
Current breakpoint: SM
font-size: 23px / line-height: 33px

font--large: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Current breakpoint: LG
font-size: 23px / line-height: 29px
Current breakpoint: MD
font-size: 23px / line-height: 29px
Current breakpoint: SM
font-size: 23px / line-height: 29px

Regular: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

font--small: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Current breakpoint: LG
font-size: 18px / line-height: 23px
Current breakpoint: MD
font-size: 18px / line-height: 23px
Current breakpoint: SM
font-size: 18px / line-height: 23px

font--xsmall: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Current breakpoint: LG
font-size: 16px / line-height: 21px
Current breakpoint: MD
font-size: 16px / line-height: 21px
Current breakpoint: SM
font-size: 16px / line-height: 21px

font--xxsmall: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Current breakpoint: LG
font-size: 14px / line-height: 18px
Current breakpoint: MD
font-size: 14px / line-height: 18px
Current breakpoint: SM
font-size: 14px / line-height: 18px



Black font .font--black There are a range of paragraph sizes, using the typographic scale.

Dark blue font .font--dark-blue There are a range of paragraph sizes, using the typographic scale.

Dark blue lighter font .font--dark-blue-lighter There are a range of paragraph sizes, using the typographic scale.

Ruby font .font--ruby There are a range of paragraph sizes, using the typographic scale.

White smoke font .font--white-smoke 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.

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>Sport Relief uses Founders Grotesk. This is used for headings and body copy in a number of weights</p>
<h3>Fonts</h3>
<h1 class="font--family-black">Black</h1>
<p>Founders Grotesk X Condensed Bold <b>.font--family-black</b></p>
<h1 class="font--family-bold">Bold</h1>
<p>Founders Grotesk Semibold <b>.font--family-bold</b></p>
<h1 class="font--family-regular">Regular</h1>
<p>Founders Grotesk Regular <b>.font--family-regular</b></p>
<br>
<br>
<br>
<h3>Type Sizes</h3>
<p>All type sizes and line heights come from a typographic scale, which has a base copy size of 20px.</p>
<br>
<br>
<br>
<h3>Headings</h3>
<p>There are a range of heading sizes from H1 to H5, using the typographic scale. According to the typographic scale set the heading change sizes responsively for different media devices.</p>
<h1 class="font--large">Header 1 Large</h1>
<p>
  <span><b>.font--large</b> (Used for headers on landing pages)<br/></span>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 167px / line-height: 125px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 132px / line-height: 99px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 65px / line-height: 49px</span>
</p>
<h1>Header 1</h1>
<p>
  <span>(Used in secondary page headers) <br/><span>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 117px / line-height: 88px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 92px / line-height: 69px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 58px / line-height: 43px</span>
</p>

<h2>Header 2</h2>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 36px / line-height: 40px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 32px / line-height: 35px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 28px / line-height: 31px</span>
</p>
<h3 class="alternate">Header 3</h3>
<p>
  <span><b>.alternate</b><br/></span>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 36px / line-height: 40px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 32px / line-height: 35px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 28px / line-height: 31px</span>
</p>
<h3>Header 3</h3>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 28px / line-height: 31px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 25px / line-height: 28px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 25px</span>
</p>
<h4>Header 4</h4>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 23px / line-height: 25px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 20px / line-height: 22px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 18px / line-height: 20px</span>
</p>
<h5>Header 5</h5>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 18px / line-height: 20px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 16px / line-height: 17px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 16px / line-height: 17px</span>
</p>
<br/>
<br/>

<h3>Paragraphs</h3>
<p class="font--xxlarge">font--xxlarge: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 36px / line-height: 47px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 36px / line-height: 47px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 32px / line-height: 42px</span>
</p>
<p class="font--xlarge">font--xlarge: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 28px / line-height: 37px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 28px / line-height: 37px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 33px</span>
</p>
<p class="font--large">font--large: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 23px / line-height: 29px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 23px / line-height: 29px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 29px</span>
</p>
<p>Regular: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 20px / line-height: 26px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 20px / line-height: 26px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 20px / line-height: 26px</span>
</p>
<p class="font--small">font--small: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 18px / line-height: 23px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 18px / line-height: 23px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 18px / line-height: 23px</span>
</p>
<p class="font--xsmall">font--xsmall: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 16px / line-height: 21px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 16px / line-height: 21px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 16px / line-height: 21px</span>
</p>
<p class="font--xxsmall">font--xxsmall: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 14px / line-height: 18px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 14px / line-height: 18px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 14px / line-height: 18px</span>
</p>
<br>
<br>


<p class="font--black">Black font <b>.font--black</b> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--dark-blue">Dark blue font <b>.font--dark-blue</b> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--dark-blue-lighter">Dark blue lighter font <b>.font--dark-blue-lighter</b> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--ruby">Ruby font <b>.font--ruby</b> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--white-smoke bg--black" style="padding: 5px;">White smoke font <b>.font--white-smoke</b> There are a range of paragraph sizes, using the typographic scale.</p>
<p class="font--white bg--black" style="padding: 5px;">White font <b>.font--white</b> There are a range of paragraph sizes, using the typographic scale.</p>
Source: _sr18-styleguide.scss, line 10
Example

Default link styling

Link

Link has the class link

This is an example of an inline link.

Inline link has an extra class inline

Coloured link styling

SR20-red link

SR20-red link inline.

SR20-dark-blue link

SR20-dark-blue link inline.

SR20-deep-violet link

SR20-deep-violet link inline.

SR20-yellow link

SR20-yellow link inline.

SR20-green link

SR20-green link inline.

SR20-cyan-blue link

SR20-cyan-blue link inline.

SR20-purple link

SR20-purple link inline.

SR20-white link

SR20-whitelink inline.

Markup: components/links/links.twig
<h3> Default link styling </h3>
<a class="link" href="#">
  Link
</a>
<p> Link has the class <i>link</i></p>

<p>
  This is <a class="link inline" href="#">an example</a> of an inline link.
</p>
<p>Inline link has an extra class <i>inline</i></p>

<h3> Coloured link styling </h3>

<p>
  <a class="link link--SR20-red" href="#">
     SR20-red link
  </a>
</p>
<p>
   <a class="link link--SR20-red inline" href="#">SR20-red link</a> inline.
</p>


<p>
  <a class="link link--SR20-dark-blue " href="#">
     SR20-dark-blue link
  </a>
</p>
<p>
   <a class="link link--SR20-dark-blue  inline" href="#">SR20-dark-blue link</a> inline.
</p>


<p>
  <a class="link link--SR20-deep-violet" href="#">
     SR20-deep-violet link
  </a>
</p>
<p>
   <a class="link link--SR20-deep-violet inline" href="#">SR20-deep-violet link</a> inline.
</p>


<p>
  <a class="link link--SR20-yellow " href="#">
     SR20-yellow link
  </a>
</p>
<p>
   <a class="link link--SR20-yellow inline" href="#">SR20-yellow link</a> inline.
</p>


<p>
  <a class="link link--SR20-green" href="#">
     SR20-green link
  </a>
</p>
<p>
   <a class="link link--SR20-green inline" href="#">SR20-green link</a> inline.
</p>
</div>

<p>
  <a class="link link--SR20-cyan-blue" href="#">
     SR20-cyan-blue link
  </a>
</p>
<p>
   <a class="link link--SR20-cyan-blue inline" href="#">SR20-cyan-blue link</a> inline.
</p>
</div>

<p>
  <a class="link link--SR20-purple" href="#">
     SR20-purple link
  </a>
</p>
<p>
   <a class="link link--SR20-purple inline" href="#">SR20-purple link</a> inline.
</p>
</div>


<div style="background: black; padding: 20px;">
<p>
  <a class="link link--SR20-white" href="#">
     SR20-white link
  </a>
</p>
<p>
   <a class="link link--SR20-white inline" href="#">SR20-whitelink</a> inline.
</p>
</div>
Source: _sr18-styleguide.scss, line 16

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 Founders Grotesk Semibold font.

Example

SR20 BUTTONS!

Link Link Link Link Link Link Link
Link
Markup: components/buttons/buttons.twig
<h3>SR20 BUTTONS!</h3>

<a class="btn btn--SR20-red" href="#">Link</a>
<button class="btn btn--SR20-red">Button</button>

<a class="btn btn--SR20-dark-blue" href="#">Link</a>
<button class="btn btn--SR20-dark-blue">Button</button>

<a class="btn btn--SR20-deep-violet" href="#">Link</a>
<button class="btn btn--SR20-deep-violet">Button</button>

<a class="btn btn--SR20-yellow" href="#">Link</a>
<button class="btn btn--SR20-yellow">Button</button>

<a class="btn btn--SR20-green" href="#">Link</a>
<button class="btn btn--SR20-green">Button</button>

<a class="btn btn--SR20-cyan-blue" href="#">Link</a>
<button class="btn btn--SR20-cyan-blue">Button</button>

<a class="btn btn--SR20-purple" href="#">Link</a>
<button class="btn btn--SR20-purple">Button</button>

<div style="background: black;padding: 20px;">
<a class="btn btn--SR20-white" href="#">Link</a>
<button class="btn btn--SR20-white ">Button</button>
</div>
Source: _sr18-styleguide.scss, line 22
Example

Primary palette


$colour-deep-violet


#2c0230


$colour-SR20-red


#e52530


$colour-SR20-dark-blue


#3a4972


$colour-SR20-white


#ffffff


$colour-SR20-yellow


#FFE400


$colour-SR20-green


#4ecd57


$colour-SR20-cyan-blue


#22CFD8


$colour-SR20-light-grey


#f4f2f4


$colour-SR20-purple


#7F58A5

Markup: variables/colour.twig
<h3>Primary palette</h3>
<div style="display: inline-block; margin: 10px">
  <div class="bg--SR20-deep-violet" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
  <p><br/>$colour-deep-violet <br><br><br></p>
  <p>#2c0230</p>
</div>

<div style="display: inline-block; margin: 10px">
  <div class="bg--SR20-red" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
  <p><br/>$colour-SR20-red <br><br><br></p>
  <p>#e52530</p>
</div>


<div style="display: inline-block; margin: 10px">
  <div class="bg--SR20-dark-blue" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
  <p><br/>$colour-SR20-dark-blue <br><br><br></p>
  <p>#3a4972</p>
</div>

<div style="display: inline-block; margin: 10px">
  <div class="bg--SR20-white" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
  <p><br/>$colour-SR20-white <br><br><br></p>
  <p>#ffffff</p>
</div>

<div style="display: inline-block; margin: 10px">
  <div class="bg--SR20-yellow" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
  <p><br/>$colour-SR20-yellow <br><br><br></p>
  <p>#FFE400</p>
</div>


<div style="display: inline-block; margin: 10px">
  <div class="bg--SR20-green" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
  <p><br/>$colour-SR20-green <br><br><br></p>
  <p>#4ecd57</p>
</div>


<div style="display: inline-block; margin: 10px">
  <div class="bg--SR20-cyan-blue" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
  <p><br/>$colour-SR20-cyan-blue <br><br><br></p>
  <p>#22CFD8</p>
</div>


<div style="display: inline-block; margin: 10px">
  <div class="bg--SR20-light-grey" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
  <p><br/>$colour-SR20-light-grey <br><br><br></p>
  <p>#f4f2f4</p>
</div>

<div style="display: inline-block; margin: 10px">
  <div class="bg--SR20-purple" style="height: 100px; display:block; width: 100px; border: 1px solid black;"></div>
  <p><br/>$colour-SR20-purple <br><br><br></p>
  <p>#7F58A5</p>
</div>
Source: variables/_colours.scss, line 2
Example

Plain background colours

Illustrating bg color - font rules


bg--SR20-deep-violet $colour-SR20-deep-violet : #2c0230

Illustrating bg color - font rules


bg--SR20-red $colour-SR20-red : #e52530

Illustrating bg color - font rules


bg--SR20-dark-blue $colour-SR20-dark-blue : #3a4972

Illustrating bg color - font rules


bg--SR20-white $colour-SR20-white : #ffffff

Illustrating bg color - font rules


bg--SR20-yellow $colour-SR20-yellow : #FFE400

Illustrating bg color - font rules


bg--SR20-green $colour-SR20-green : #4ecd57

Illustrating bg color - font rules


bg--SR20-cyan-blue $colour-SR20-cyan-blue : #22CFD8

Illustrating bg color - font rules


bg--SR20-light-grey $colour-SR20-light-grey : #f4f2f4

Illustrating bg color - font rules


bg--SR20-purple $colour-SR20-purple : #7F58A5

Markup: components/background-colours/background-colours.twig
<h3>Plain background colours</h3>
<div class="bg--SR20-deep-violet" style="height: 100px; width: 100%;">
<p>Illustrating bg color - font rules </p>
</div>

<p><br/><b>bg--SR20-deep-violet  </b> $colour-SR20-deep-violet : #2c0230</p>

<div class="bg--SR20-red " style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-red </b> $colour-SR20-red  : #e52530</p>

<div class="bg--SR20-dark-blue" style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-dark-blue  </b> $colour-SR20-dark-blue : #3a4972</p>

<div class="bg--SR20-white" style="border: 1px solid black; height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-white  </b> $colour-SR20-white : #ffffff</p>

<div class="bg--SR20-yellow" style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-yellow  </b> $colour-SR20-yellow : #FFE400</p>

<div class="bg--SR20-green" style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-green  </b> $colour-SR20-green : #4ecd57</p>

<div class="bg--SR20-cyan-blue" style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-cyan-blue  </b> $colour-SR20-cyan-blue : #22CFD8</p>

<div class="bg--SR20-light-grey" style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-light-grey  </b> $colour-SR20-light-grey : #f4f2f4</p>

<div class="bg--SR20-purple" style="height: 100px; width: 100%;">
<p style="margin: 10px;">Illustrating bg color - font rules </p>
</div>
<p><br/><b>bg--SR20-purple  </b> $colour-SR20-purple : #7F58A5</p>
Source: _sr18-styleguide.scss, line 36
Example
Markup
<a href="#" class="external-link">External Link</a>
Source: _sr18-styleguide.scss, line 44
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: _sr18-styleguide.scss, line 51
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: _sr18-styleguide.scss, line 67
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: _sr18-styleguide.scss, line 75