<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>

<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>

<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>

<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>

<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>

<a href="#" class="external-link">External Link</a>

<div class="cr-body">
 <ul>
   <li>Item 1</li>
	  <li>Item 2</li>
	  <li>Item 3</li>
	  <li>Item 4</li>
 </ul>
</div>

<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>

<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>