_cr17-styleguide.scss
, line 5
Comic Relief uses Sailec. This is used for headings and body copy in a number of weights
Fonts
Black
Sailec Black .font--family-black
Bold
Sailec Bold .font--family-bold
Medium
Sailec Medium .font--family-medium
Regular
Sailec Regular .font--family-regular
Light
Sailec Light .font--family-light
Type Sizes
All type sizes and line heights come from a typographic scale, which has a base copy size of 18px.
Headings
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.
Header 1
.font--xlarge (Used for headers and landing pages)
Current breakpoint: LG
font-size: 83px / line-height: 83px
Current breakpoint: MD
font-size: 74px / line-height: 75px
Current breakpoint: SM
font-size: 66px / line-height: 68px
Header 1
.font--large (Used for secondary and pages headers)
Current breakpoint: LG
font-size: 58px / line-height: 62px
Current breakpoint: MD
font-size: 52px / line-height: 57px
Current breakpoint: SM
font-size: 41px / line-height: 48px
Header 2
Current breakpoint: LG
font-size: 41px / line-height: 48px
Current breakpoint: MD
font-size: 36px / line-height: 44px
Current breakpoint: SM
font-size: 32px / line-height: 41px
Header 3
Current breakpoint: LG
font-size: 26px / line-height: 35px
Current breakpoint: MD
font-size: 26px / line-height: 35px
Current breakpoint: SM
font-size: 29px / line-height: 38px
Header 4
Current breakpoint: LG
font-size: 20px / line-height: 31px
Current breakpoint: MD
font-size: 20px / line-height: 31px
Current breakpoint: SM
font-size: 23px / line-height: 33px
Header 5
Current breakpoint: LG
font-size: 18px / line-height: 29px
Current breakpoint: MD
font-size: 18px / line-height: 29px
Current breakpoint: SM
font-size: 20px / line-height: 31px
Paragraphs
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--xlarge
Current breakpoint: LG
font-size: 23px / line-height: 33px
Current breakpoint: MD
font-size: 23px / line-height: 28px
Current breakpoint: SM
font-size: 23px / line-height: 28px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--large
Current breakpoint: LG
font-size: 20px / line-height: 31px
Current breakpoint: MD
font-size: 20px / line-height: 31px
Current breakpoint: SM
font-size: 20px / line-height: 31px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Current breakpoint: LG
font-size: 18px / line-height: 29px
Current breakpoint: MD
font-size: 18px / line-height: 29px
Current breakpoint: SM
font-size: 18px / line-height: 29px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--small
Current breakpoint: LG
font-size: 16px / line-height: 27px
Current breakpoint: MD
font-size: 16px / line-height: 27px
Current breakpoint: SM
font-size: 16px / line-height: 27px
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--xsmall
Current breakpoint: LG
font-size: 14px / line-height: 26px
Current breakpoint: MD
font-size: 14px / line-height: 26px
Current breakpoint: SM
font-size: 14px / line-height: 26px
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
<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--xlarge</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>
_cr17-styleguide.scss
, line 9
Links
Links are used for call-to-actions that are lower in the hierachy and aren’t as key as ones used in buttons. They can also be used for call-to-actions with a longer character count.
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
Black link .link--black 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
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
Black link .link--black 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>
<a class="link link--black" href="#">Black link</a> <i>.link--black</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>
_cr17-styleguide.scss
, line 15
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 classSecondary / 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.
LinkVariations / 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 ButtonRed variation .btn--red .btn--red-ghost
Link Ghost ButtonPurple variation .btn--purple .btn--purple-ghost
Link Ghost ButtonRoyal-blue variation .btn--royal-blue .btn--royal-blue-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>
_cr17-styleguide.scss
, line 25
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>
variables/_colours.scss
, line 2
Background Colours
To be used by row components
$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>
_cr17-styleguide.scss
, line 43
Markup
<a href="#" class="external-link">External Link</a>
_cr17-styleguide.scss
, line 51
Lists
These are the list items
- 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>
_cr17-styleguide.scss
, line 58
Table
Standard Table
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 <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>
_cr17-styleguide.scss
, line 74
Forms
New Standard Forms
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> </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>
_cr17-styleguide.scss
, line 82
Highlight class - Adds border around text (used for the years on Timeline page).
Highlight class - Adds border around text (used for the years on Timeline page).
Highlight class - Adds border around text (used for the years on Timeline page).
Highlight class - Adds border around text (used for the years on Timeline page).
Highlight class - Adds border around text (used for the years on Timeline page).
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>
_cr17-styleguide.scss
, line 90