_sr18-styleguide.scss
, line 6
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
.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 1
.alternate (Bespoke for OTN homepage)
Current breakpoint: LG
font-size: 66px / line-height: 66px
Current breakpoint: MD
font-size: 52px / line-height: 55px
Current breakpoint: SM
font-size: 30px / line-height: 32px
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--xxlarge
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--xlarge
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--large
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
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--small
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--xsmall
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
.font--xxsmall
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</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>
<h1 class="alternate">Header 1</h1>
<p>
<span><b>.alternate</b> (Bespoke for OTN homepage)<br/></span>
<span class="breakpoint-lg"><b>Current breakpoint: LG </b><br/> font-size: 66px / line-height: 66px</span>
<span class="breakpoint-md"><b>Current breakpoint: MD </b><br/> font-size: 52px / line-height: 55px</span>
<span class="breakpoint-sm"><b>Current breakpoint: SM </b><br/> font-size: 30px / line-height: 32px</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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><b>.font--xxlarge</b><br/>
<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">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: 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">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: 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>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">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: 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">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: 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">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="font--xxsmall"><b>.font--xxsmall</b><br/>
<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>
_sr18-styleguide.scss
, line 10
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--black" href="#">
Black link
</a>
</p>
<p>
Black <a class="link link--black inline" href="#">link</a> inline.
</p>
<p>
<a class="link link--dark-blue" href="#">
Dark blue link
</a>
</p>
<p>
Dark blue <a class="link link--dark-blue inline" href="#">link</a> inline.
</p>
<p>
<a class="link link--dark-blue-lighter" href="#">
Dark blue lighter link
</a>
</p>
<p class="font--black">
Dark blue lighter <a class="link link--dark-blue-lighter inline" href="#">link</a> inline.
</p>
<p>
<a class="link link--ruby" href="#">
Ruby link
</a>
</p>
<p>
Ruby <a class="link link--ruby inline" href="#">link</a> inline.
</p>
<div class="bg--gradient-ruby-purple" style="padding: 20px; margin-bottom: 20px;">
<p>
<a class="link link--white-smoke" href="#">
White smoke link
</a>
</p>
<p class="font--white-smoke">
White smoke <a class="link link--white-smoke inline" href="#">link</a> inline.
</p>
</div>
<div class="bg--black" style="padding: 20px; margin-bottom: 20px;">
<p>
<a class="link link--white" href="#">
White link
</a>
</p>
<p class="font--white">
White <a class="link link--white inline" href="#">link</a> inline.
</p>
</div>
_sr18-styleguide.scss
, line 16
Buttons
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.
Primary buttons
Buttons have multiple variations that can be used for styling or functional purposes. The are used in conjunction with the base button class. For example: .btn .btn--ruby
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 1px solid border and text colour matching the colour of the border. This default styling can be applied by using for example the .btn--black-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--ruby etc class
Link Ghost ButtonBlack variation .btn--black .btn--black-ghost
Link Ghost ButtonDark-blue variation .btn--dark-blue .btn--dark-blue-ghost
Link Ghost ButtonDark blue lighter variation .btn--dark-blue-lighter .btn--dark-blue-lighter-ghost
Link Ghost ButtonRuby variation .btn--ruby .btn--ruby-ghost
Donate Now
Bespoke for SR18 OTN
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 class. For example: <b>.btn .btn--ruby</b></p>
<a class="btn btn--ruby" href="#">Link with button class</a>
<button class="btn btn--ruby">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 1px solid border and text colour matching the colour of the border. This default styling can be applied by using for example the <b>.btn--black-ghost</b> class. See Variations for more button syling options.</p>
<a class="btn btn--black-ghost" href="#">Link</a>
<button class="btn btn--black-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--ruby etc</b> class</p>
<a class="btn btn--black" href="#">Link</a>
<button class="btn btn--black">Button</button>
<a class="btn btn--black-ghost" href="#">Ghost Button</a>
<p style="margin-top: 10px;">Black variation <i>.btn--black</i> <i>.btn--black-ghost</i></p>
<a class="btn btn--dark-blue" href="#">Link</a>
<button class="btn btn--dark-blue">Button</button>
<a class="btn btn--dark-blue-ghost" href="#">Ghost Button</a>
<p style="margin-top: 10px;">Dark-blue variation <i>.btn--dark-blue</i> <i>.btn--dark-blue-ghost</i></p>
<a class="btn btn--dark-blue-lighter" href="#">Link</a>
<button class="btn btn--dark-blue-lighter">Button</button>
<a class="btn btn--dark-blue-lighter-ghost" href="#">Ghost Button</a>
<p style="margin-top: 10px;">Dark blue lighter variation <i>.btn--dark-blue-lighter</i> <i>.btn--dark-blue-lighter-ghost</i></p>
<a class="btn btn--ruby" href="#">Link</a>
<button class="btn btn--ruby">Button</button>
<a class="btn btn--ruby-ghost" href="#">Ghost Button</a>
<p style="margin-top: 10px;">Ruby variation <i>.btn--ruby</i> <i>.btn--ruby-ghost</i></p>
<div class="bg--gradient-ruby-purple" style="padding: 20px; margin-bottom: 20px;">
<a class="btn btn--white-smoke" href="#">Link</a>
<button class="btn btn--white-smoke">Button</button>
<a class="btn btn--white-smoke-ghost" href="#">Ghost Button</a>
<p style="margin-top: 10px;">White smoke variation <i>.btn--white-smoke</i> <i>.btn--white-smoke-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>
<br>
<a class="btn btn--alternate" href="#">Donate Now</a>
<p>Bespoke for SR18 OTN</p>
_sr18-styleguide.scss
, line 22
Primary palette
Across the site we use
$colour-black
#030e1a
$colour-dark-blue
text colour for
headings
#061d38
$colour-dark-blue-lighter
text colour for
paragraphs
#223c59
$colour-ruby
#e7135d
$colour-white-smoke
#fbf5f5
$colour-white
#ffffff
Markup: variables/colour.twig
<h3>Primary 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 <br><br><br></p>
<p>#030e1a</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--dark-blue" style="border: 1px solid black; height: 99px; display:block; width: 99px;"></div>
<p><br/>$colour-dark-blue <br/>text colour for<br/> headings</p>
<p>#061d38</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--dark-blue-lighter" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-dark-blue-lighter <br/>text colour for<br/>paragraphs</p>
<p>#223c59</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--ruby" style="height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-ruby <br><br><br></p>
<p>#e7135d</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--white-smoke" style="border: 1px solid black; height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-white-smoke <br><br><br></p>
<p>#fbf5f5</p>
</div>
<div style="display: inline-block; margin: 10px">
<div class="bg--white" style="border: 1px solid black; height: 100px; display:block; width: 100px;"></div>
<p><br/>$colour-white <br><br><br></p>
<p>#ffffff</p>
</div>
variables/_colours.scss
, line 2
Background Colours
To be used by row components
Plain background colours
bg--black $colour-black: #030e1a
bg--dark-blue $colour-dark-blue: #061d38
bg--dark-blue-lighter $colour-dark-blue-lighter: #223c59
bg--ruby $colour-ruby: #e7135d
bg--white-smoke $colour-white-smoke: #fbf5f5
bg--white $colour-white: #ffffff
Background Gradient
bg--gradient-ruby-purple
$colour-ruby: #e7135d to $colour-purple: #ab12e3
bg--gradient-purple-ruby
$colour-purple: #ab12e3 to $colour-ruby: #e7135d
Markup: components/background-colours/background-colours.twig
<h3>Plain background colours</h3>
<div class="bg--black" style="height: 100px; width: 100%;"></div>
<p><br/><b>bg--black </b> $colour-black: #030e1a</p>
<div class="bg--dark-blue" style="height: 100px; width: 100%;"></div>
<p><br/><b>bg--dark-blue </b> $colour-dark-blue: #061d38</p>
<div class="bg--dark-blue-lighter" style="height: 100px; width: 100%;"></div>
<p><br/><b>bg--dark-blue-lighter </b> $colour-dark-blue-lighter: #223c59</p>
<div class="bg--ruby" style="height: 100px; width: 100%;"></div>
<p><br/><b>bg--ruby </b>$colour-ruby: #e7135d</p>
<div class="bg--white-smoke" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p><br/><b>bg--white-smoke </b>$colour-white-smoke: #fbf5f5</p>
<div class="bg--white" style="border: 1px solid black; height: 100px; width: 100%;"></div>
<p><br/><b>bg--white </b>$colour-white: #ffffff</p>
<h3><br/>Background Gradient</h3>
<div class="bg--gradient-ruby-purple" style="height: 100px; width: 100%;"></div>
<p><br/><b>bg--gradient-ruby-purple </b><br/>$colour-ruby: #e7135d to $colour-purple: #ab12e3</p>
<div class="bg--gradient-purple-ruby" style="height: 100px; width: 100%;"></div>
<p><br/><b>bg--gradient-purple-ruby </b><br/>$colour-purple: #ab12e3 to $colour-ruby: #e7135d</p>
_sr18-styleguide.scss
, line 36
Markup
<a href="#" class="external-link">External Link</a>
_sr18-styleguide.scss
, line 44
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>
_sr18-styleguide.scss
, line 51
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>
_sr18-styleguide.scss
, line 67
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>
_sr18-styleguide.scss
, line 75