<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>Comic Relief uses Sailec. 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>Sailec Black <b>.font--family-black</b></p>
<h1 class="font--family-bold">Bold</h1>
<p>Sailec Bold <b>.font--family-bold</b></p>
<h1 class="font--family-medium">Medium</h1>
<p>Sailec Medium <b>.font--family-medium</b></p>
<h1 class="font--family-regular">Regular</h1>
<p>Sailec Regular <b>.font--family-regular</b></p>
<h1 class="font--family-light">Light</h1>
<p>Sailec Light <b>.font--family-light</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 18px.</p>
<br/>
<br/>
<br/>
<h3>Headings</h3>
<p>There are a range of heading sizes from H1 to H5, using the font size and line height. According to the typographic scale set the heading change sizes responsively for different media devices.</p>

<h1 class="font--xlarge">Header 1</h1>
<p>
  <span><b>.font--large</b> (Used for headers and landing pages)<br/></span>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 83px / line-height: 83px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 74px / line-height: 75px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 66px / line-height: 68px</span>
</p>

<h1 class="font--large">Header 1</h1>
<p>
  <span><b>.font--large</b> (Used for secondary and pages headers)<br/></span>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 58px / line-height: 62px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 52px / line-height: 57px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 41px / line-height: 48px</span>
<p>
<h2>Header 2</h2>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 41px / line-height: 48px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 36px / line-height: 44px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 32px / line-height: 41px</span>
</p>

<h3>Header 3</h3>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 26px / line-height: 35px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 26px / line-height: 35px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 29px / line-height: 38px</span>
</p>
<h4>Header 4</h4>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 20px / line-height: 31px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 20px / line-height: 31px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 33px</span>
</p>
<h5>Header 5</h5>
<p>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 18px / line-height: 29px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 18px / line-height: 29px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 20px / line-height: 31px</span>
</p>
<br/>
<br/>
<br/>
<h3>Paragraphs</h3>
<p class="font--xlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><b>.font--xlarge</b><br/>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 23px / line-height: 33px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 23px / line-height: 28px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 23px / line-height: 28px</span>
</p>
<p class="font--large">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><b>.font--large</b><br/>
  <span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 20px / line-height: 31px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 20px / line-height: 31px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 20px / line-height: 31px</span>
</p>
<p>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: 29px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 18px / line-height: 29px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 18px / line-height: 29px</span> 
</p>
<p class="font--small">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="font--small"><b>.font--small</b><br/>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 16px / line-height: 27px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 16px / line-height: 27px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 16px / line-height: 27px</span> 
</p>

<p class="font--xsmall">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="font--xsmall"><b>.font--xsmall</b><br/>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 14px / line-height: 26px</span>
  <span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 14px / line-height: 26px</span>
  <span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 14px / line-height: 26px</span>
</p>
<br/>
<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>

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

<a class="btn {{modifier_class}}" href="#">
  Primary buttons
</a>
<button class="btn {{modifier_class}}">Native button</button>

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

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

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