Components
Components are groups of items that follow the basic style of the toolkit.
They are the building blocks of the patterns and templates.
Banners
Alpha Banner
- Banners indicate that a site is part of an Alpha or Beta phase of a project. They can also solicit feedback.
<div class="phase-banner">
<p>
<strong class="phase-tag">ALPHA</strong>
<span>This is a new service – <a href="#" aria-label="your website feedback">your feedback</a> will help us to improve it.</span>
</p>
</div>Beta Banner
- Banners indicate that a site is part of an Alpha or Beta phase of a project. They can also solicit feedback.
<div class="phase-banner">
<p>
<strong class="phase-tag">BETA</strong>
<span>This is a new service – <a href="#" aria-label="your website feedback">your feedback</a> will help us to improve it.</span>
</p>
</div>Alpha Tag
ALPHA
<strong class="phase-tag">ALPHA</strong>Beta Tag
BETA
<strong class="phase-tag">BETA</strong>Breadcrumb
<div class="breadcrumb">
<ol>
<li><a aria-current="false" href="/">Home</a></li>
<li><a aria-current="false" href="/">Services</a></li>
<li><a aria-current="false" href="/">Schools colleges and learning</a></li>
<li><a aria-current="true" href="/">Find a School</a></li>
</ol>
</div>Breakout Box
Breakout Box
- Use this to highlight important information on the page, Please only use this sparingly.
If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
<div class="breakout-box">
<p>
If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.
</p>
<p>
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
</p>
</div>Breakout Box Alt Primary
- Use this to highlight important information on the page, Please only use this sparingly.
If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
<div class="breakout-box breakout-box-alt-primary">
<p>
If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.
</p>
<p>
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
</p>
</div>Breakout Box Alt Secondary
- Use this to highlight important information on the page, Please only use this sparingly.
If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
<div class="breakout-box breakout-box-alt-secondary">
<p>
If you’re not sure about your nationality, try to find out from an official document like a passport or national ID card.
</p>
<p>
We need to know your nationality so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.
</p>
</div>Buttons
Button Text
- Button text should be short and describe the action the button performs.
<input class="button" type="submit" value="Save and continue">Start Now Button
- Launch your service with a Start now button.
<a class="button button-start" href="#" role="button">Start now</a>Disabled Buttons
- Don’t disable buttons, unless there’s a good reason to
- If you have to disable buttons, make sure they look like you can’t click them (use 50% opacity)
- Use the aria-disabled attribute for older screen readers
- An example of a useful disabled option is a calendar with greyed out days where no bookings are available
- Provide another way for the user to continue, add an error message or text to explain why the button is disabled
<input class="button" type="submit" value="Save and continue" disabled="disabled" aria-disabled="true">Data
Numeric Tabular Data
- When comparing rows of numbers, align numbers to the right in table cells
- Use the GOV UK frontend toolkit’s tabular numbers to allow numbers of the same width to be more easily compared
- This solution does not change layout, or respond, to different screen widths
| Month you apply | Rate for vehicles | Rate for bicycles |
|---|---|---|
| January | £165.00 | £85.00 |
| February | £165.00 | £85.00 |
| March | £151.25 | £77.90 |
| April | £136.10 | £70.10 |
<table>
<thead>
<tr>
<th scope="col">Month you apply</th>
<th class="numeric" scope="col">Rate for vehicles</th>
<th class="numeric" scope="col">Rate for bicycles</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">January</th>
<td class="numeric">£165.00</td>
<td class="numeric">£85.00</td>
</tr>
<tr>
<th scope="row">February</th>
<td class="numeric">£165.00</td>
<td class="numeric">£85.00</td>
</tr>
<tr>
<th scope="row">March</th>
<td class="numeric">£151.25</td>
<td class="numeric">£77.90</td>
</tr>
<tr>
<th scope="row">April</th>
<td class="numeric">£136.10</td>
<td class="numeric">£70.10</td>
</tr>
</tbody>
</table>Data In A Table
- Not all content in tables should be right aligned.
- Use a caption to describe the table in the same way you would use a heading. It can help users find, navigate and understand tables.
- This solution does not change layout, or respond, to different screen widths
| First 6 weeks | £109.80 per week |
| Next 33 weeks | £109.80 per week |
| Total estimated pay | £4,282.20 |
| Tell the mother’s employer | 28 days before they want to start maternity pay |
<table>
<caption class="heading-small">Dates and amounts</caption>
<tbody>
<tr>
<td>First 6 weeks</td>
<td>£109.80 per week</td>
</tr>
<tr>
<td>Next 33 weeks</td>
<td>£109.80 per week</td>
</tr>
<tr>
<td>Total estimated pay</td>
<td>£4,282.20</td>
</tr>
<tr>
<td>Tell the mother’s employer</td>
<td>28 days before they want to start maternity pay</td>
</tr>
</tbody>
</table>Data Visualisation
- Data is recommended as an alternative to using images
- For screen readers, ensure the data value appears first so it makes sense when read aloud
56/154
on GOV.UK
<div class="data">
<span class="data-item bold-xlarge">56/154</span>
<span class="data-item bold-xsmall">on GOV.UK</span>
</div>Errors Validation
Error Message And Summary Box
- Show an error summary at the top of the page
- Include a heading to alert the user to the error
- Link to each of the problematic questions
Message to alert the user to a problem goes here
Optional description of the errors and how to correct them
Check your personal details
Look at your name, signature and other details.
<div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-1" tabindex="-1">
<h2 class="heading-medium error-summary-heading" id="error-summary-heading-example-1">Message to alert the user to a problem goes here</h2>
<p>Optional description of the errors and how to correct them</p>
<ul class="error-summary-list">
<li><a href="#example-personal-details">Descriptive link to the question with an error</a></li>
</ul>
</div>
<h1 class="heading-large">Check your personal details</h1>
<p>Look at your name, signature and other details.</p>
<form>
<div class="form-group form-group-error">
<fieldset>
<legend id="example-personal-details">
<span class="form-label-bold">Are your personal details correct and up-to-date?</span>
<span class="error-message">Error message about personal details goes here</span>
</legend>
<div class="multiple-choice">
<input id="personal_details_yes" type="radio" name="personalDetails" value="Yes">
<label for="personal_details_yes">Yes, my personal details are correct</label>
</div>
<div class="multiple-choice">
<input id="personal_details_no" type="radio" name="personalDetails" value="No">
<label for="personal_details_no">No, some details are wrong or have changed</label>
</div>
</fieldset>
</div>
<input class="button" type="submit" value="Continue">
</form>Highlight Errors
- Write a message that helps the user to understand why the error occurred and what to do about it
- Put the message in the
<label>or<legend>for the question, after the question text, in red - Use a red border to visually connect the message and the question it belongs to
- If the error relates to specific text fields within the question, give these a red border as well
Message to alert the user to a problem goes here
Optional description of the errors and how to correct them
Your personal details
As shown on your birth certificate or passport
It’s on your National Insurance card, benefit letter, payslip or P60.
For example, ‘QQ 12 34 56 C’.
For example, ‘QQ 12 34 56 C’.
<div class="error-summary" role="alert" aria-labelledby="error-summary-heading-example-2" tabindex="-1">
<h2 class="heading-medium error-summary-heading" id="error-summary-heading-example-2">Message to alert the user to a problem goes here</h2>
<p>Optional description of the errors and how to correct them</p>
<ul class="error-summary-list">
<li><a href="#example-full-name">Descriptive link to the question with an error</a></li>
<li><a href="#example-ni-number">Descriptive link to the question with an error</a></li>
</ul>
</div>
<h1 class="heading-large">Your personal details</h1>
<div class="form-group form-group-error">
<label for="example-full-name" id="error-full-name">
<span class="form-label-bold">Full name</span>
</label>
<span class="form-hint">As shown on your birth certificate or passport</span>
<span class="error-message">Error message about full name goes here</span>
<input class="form-control form-control-error" id="example-full-name" type="text" name="fullName" value="" aria-describedby="form-hint error-message">
</div>
<div class="form-group form-group-error">
<label for="example-ni-number" id="error-ni-number">
<span class="form-label-bold">National Insurance number</span>
</label>
<span class="form-hint">
It’s on your National Insurance card, benefit letter, payslip or P60.
<br>
For example, ‘QQ 12 34 56 C’.
</span>
<span class="error-message">Error message about National Insurance number goes here</span>
<input class="form-control form-control-error" id="example-ni-number" type="text" name="niNo" value="" aria-describedby="form-hint error-message">
</div>
<input class="button" type="submit" value="Continue">Form Elements
Labels
- All form fields should be given labels
- Don’t hide labels, unless the surrounding context makes them unnecessary
- Labels should be aligned above their fields
- Label text should be short, direct and in sentence case
- Avoid colons at the end of labels
- Labels should be associated with form fields using the for attribute
Note: When building out forms make sure each form field has it's own unique ID.
<label class="form-label" for="full-name-f1">Full name</label>
<input class="form-control" id="full-name-f1" type="text" name="full-name-f1">Textarea
- Make the height of a textarea proportional to the amount of text to be entered.
<label class="form-label" for="textarea">
Why can't you provide a National Insurance number?
</label>
<textarea class="form-control form-control-3-4" name="textarea" id="textarea" rows="5"></textarea>Hint Text
- Don’t use placeholder text in form fields, as this will disappear once content is entered into the form field
- Use hint text for supporting contextual help, this will always be shown
- Hint text should sit above a form field
- Ensure hint text can be read correctly by screen readers
It's on your National Insurance card, benefit letter, payslip or P60.
For example, ‘QQ 12 34 56 C’.
For example, ‘QQ 12 34 56 C’.
<label class="form-label" for="ni-number">
National Insurance number
</label>
<span class="form-hint">
It's on your National Insurance card, benefit letter, payslip or P60.
<br>
For example, ‘QQ 12 34 56 C’.
</span>
<input class="form-control" id="ni-number" type="text" name="ni-number" aria-describedby="form-hint">Form Elements Spacing
- Ensure there is sufficient spacing between form elements.
<!-- Use .form-group to create spacing when wrapping label and input pairs -->
<div class="form-group">
<label class="form-label" for="first-name-2">First name</label>
<input class="form-control" id="first-name-2" name="first-name-2" type="text">
</div>
<div class="form-group">
<label class="form-label" for="last-name-2">Last name</label>
<input class="form-control" id="last-name-2" name="last-name-2" type="text">
</div>File Upload
- A control that lets the user select a file.
- We recommend using a native input using type="file", rather than a custom implementation.
<div class="form-group">
<label class="form-label" for="file-input">
Upload a file
</label>
<input type="file" id="file-input">
</div>Select Boxes
- Avoid using select boxes (drop-down lists) - use radio buttons or checkboxes instead.
<div class="form-group">
<label class="form-label" for="select-box">This is the label text</label>
<select class="form-control" id="select-box" name="select-box">
<option>BATHNES elements option 1</option>
<option>BATHNES elements option 2</option>
<option>BATHNES elements option 3</option>
</select>
</div>Radio Buttons Inline
- Use these to let users choose a single option from a list
- For more than two options, radio buttons should be stacked
- Radio buttons with large hit areas are easier to select with a mouse or touch devices
<form>
<div class="form-group">
<fieldset class="inline">
<legend>
<h1 class="heading-medium">
Do you already have a personal user account?
</h1>
</legend>
<div class="multiple-choice">
<input id="radio-inline-1" type="radio" name="radio-inline-group" value="Yes">
<label for="radio-inline-1">Yes</label>
</div>
<div class="multiple-choice">
<input id="radio-inline-2" type="radio" name="radio-inline-group" value="No">
<label for="radio-inline-2">No</label>
</div>
</fieldset>
</div>
</form>Radio Buttons Stacked
<form>
<div class="form-group">
<fieldset>
<legend>
<h1 class="heading-medium">Where do you live?</h1>
</legend>
<div class="multiple-choice">
<input id="radio-1" type="radio" name="radio-group" value="Northern Ireland">
<label for="radio-1">Northern Ireland</label>
</div>
<div class="multiple-choice">
<input id="radio-2" type="radio" name="radio-group" value="Isle of Man or the Channel Islands">
<label for="radio-2">Isle of Man or the Channel Islands</label>
</div>
<p class="form-block">or</p>
<div class="multiple-choice">
<input id="radio-3" type="radio" name="radio-group" value="I am a British citizen living abroad">
<label for="radio-3">I am a British citizen living abroad</label>
</div>
</fieldset>
</div>
</form>Radio Button Disabled
<div class="multiple-choice">
<input id="radio-disabled-example" type="radio" name="radio-disabled-group" value="Isle of Man or the Channel Islands" disabled>
<label for="radio-disabled-example">Isle of Man or the Channel Islands</label>
</div>Checkboxes
- Use these to select either on/off toggles or multiple selections
- Make it clear with words when users can select one or multiple options
<form>
<fieldset>
<legend>
<h3 class="heading-medium">Which types of waste do you transport regularly?</h3>
<span class="body-text">Select all that apply</span>
</legend>
<div class="multiple-choice">
<input id="waste-type-1" name="waste-types" type="checkbox" value="waste-animal">
<label for="waste-type-1">Waste from animal carcasses</label>
</div>
<div class="multiple-choice">
<input id="waste-type-2" name="waste-types" type="checkbox" value="waste-mines">
<label for="waste-type-2">Waste from mines or quarries</label>
</div>
<div class="multiple-choice">
<input id="waste-type-3" name="waste-types" type="checkbox" value="waste-farm-agricultural">
<label for="waste-type-3">Farm or agricultural waste</label>
</div>
</fieldset>
</form>Checkboxes Disabled
<div class="multiple-choice">
<input id="checkbox-disabled-example" name="checkbox-disabled-group" type="checkbox" value="waste-farm-agricultural" disabled>
<label for="checkbox-disabled-example">Farm or agricultural waste</label>
</div>Conditionally Revealing Content
- Reveal additional questions, depending on the context
- A left border is used to emphasise this supporting information
<form>
<div class="form-group">
<fieldset>
<legend>
<h1 class="heading-medium">
How do you want to be contacted?
</h1>
</legend>
<div class="multiple-choice" data-target="contact-by-email">
<input id="example-contact-by-email" type="radio" name="radio-contact-group" value="Yes">
<label for="example-contact-by-email">Email</label>
</div>
<div class="panel panel-border-narrow js-hidden" id="contact-by-email">
<label class="form-label" for="contact-email">Email address</label>
<input class="form-control" name="contact-email" type="text" id="contact-email">
</div>
<div class="multiple-choice" data-target="contact-by-phone">
<input id="example-contact-by-phone" type="radio" name="radio-contact-group" value="No">
<label for="example-contact-by-phone">Phone</label>
</div>
<div class="panel panel-border-narrow js-hidden" id="contact-by-phone">
<label class="form-label" for="contact-phone">Phone number</label>
<input class="form-control" name="contact-phone" type="text" id="contact-phone">
</div>
<div class="multiple-choice" data-target="contact-by-text">
<input id="example-contact-by-text" type="radio" name="radio-contact-group" value="No">
<label for="example-contact-by-text">Text message</label>
</div>
<div class="panel panel-border-narrow js-hidden" id="contact-by-text">
<label class="form-label" for="contact-text-message">Mobile phone number</label>
<input class="form-control" name="contact-text-message" type="text" id="contact-text-message">
</div>
</fieldset>
</div>
</form>Date
<div class="form-group">
<fieldset>
<legend>
<span class="form-label-bold">This is the label text in bold</span>
<span class="form-hint">This is hint text</span>
</legend>
<div class="form-date">
<div class="form-group form-group-day">
<label class="form-label" for="dob-day">Day</label>
<input class="form-control" id="dob-day" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31">
</div>
<div class="form-group form-group-month">
<label class="form-label" for="dob-month">Month</label>
<input class="form-control" id="dob-month" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
</div>
<div class="form-group form-group-year">
<label class="form-label" for="dob-year">Year</label>
<input class="form-control" id="dob-year" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
</div>
</div>
</fieldset>
</div>Password
Make sure you:
- Set a minimum length of at least 8 characters
- Don’t set a maximum length
- Explain the constraints to users
- Use a blacklist of commonly used passwords
Guidance on the use of passwords can be found here: https://www.gov.uk/service-manual/design/passwords
<label class="form-label" for="password-f1">Password</label>
<input class="form-control" id="password-f1" type="password" name="password-f1">Headers
Standard Header
- Used for presenting template examples in this toolkit
<!-- Menu show/hide JS -->
<!-- Adapted from https://www.w3schools.com/howto/howto_js_toggle_class.asp -->
<!-- Need to move into menu.js and that file be imported into app.js -->
<script>
function showHideMenu() {
var element = document.getElementById("navigation-primary");
if (element.classList) {
element.classList.toggle("navigation-primary--active");
} else {
// For IE9
var classes = element.className.split(" ");
var i = classes.indexOf("navigation-primary--active");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("navigation-primary--active");
element.className = classes.join(" ");
}
}
</script>
<style>
#global-header {
background-color: #fff;
position: relative;
}
.header-wrapper {
position: relative;
max-width: 960px;
margin: 0 auto;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 960px) {
.header-wrapper {
padding-left: 0;
padding-right: 0;
}
}
.header-global {
overflow: hidden;
}
.header-logo {
width: 128.4px;
height: auto;
}
.header-logo img {
max-width: 100%;
}
@media (min-width: 769px) {
.header-logo {
width: 160.5px;
float: left;
}
}
.header-search {
margin-top: 10px;
margin-bottom: 20px;
}
@media (min-width: 769px) {
.header-search {
margin-top: 1em;
float: right;
width: 50%;
text-align: right;
margin-top: 12px;
margin-bottom: 0;
}
}
.header-search .site-search {
position: relative;
}
.header-search .site-search .form-control {
width: calc(100% - 80px);
border-width: 1px;
border-color: #bfc1c3;
font-size: 16px;
height: 36px;
}
@media (min-width: 769px) {
.header-search .site-search .form-control {
width: calc(100% - 100px);
}
}
.header-search .site-search .button {
position: absolute;
top: 0;
right: 45px;
text-indent: -9999px;
background-image: url(../assets/patterns/images/icon-search-2x.png);
background-repeat: no-repeat;
background-position: 55% 50%;
background-size: 52.5% 40%;
box-shadow: none;
width: 36px;
height: 36px;
}
@media (min-width: 769px) {
.header-search .site-search .button {
right: 0;
}
}
.header-search--desktop {
display: none;
}
@media (min-width: 769px) {
.header-search--desktop {
display: block;
}
}
@media (min-width: 769px) {
.header-search--mobile {
display: none;
}
}
#global-header-bar {
position: relative;
background-color: #00aeef;
height: 5px;
}
.header-marque {
position: absolute;
bottom: 0;
right: 15px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 25px;
border-color: transparent transparent transparent #00aeef;
}
.header-commercial {
position: relative;
overflow: hidden;
background-color: #0b0c0c;
}
.header-commercial .header-wrapper {
padding-top: 0.75em;
padding-bottom: 0.5em;
}
.header-commercial__logo {
width: 91.42857px;
height: auto;
display: block;
}
.header-commercial__logo img {
max-width: 100%;
}
@media (min-width: 769px) {
.header-commercial__logo {
width: 106.66667px;
}
}
.header-commercial__marque {
position: absolute;
bottom: 0;
right: 15px;
width: 0;
height: 0;
border-style: solid;
border-width: 30px 0 0 30px;
border-color: transparent transparent transparent #fff;
}
@media (min-width: 960px) {
.header-commercial__marque {
right: 0;
}
}
</style>
<header role="banner" id="global-header">
<div class="header-wrapper">
<div class="header-global">
<div class="header-logo">
<a href="" id="logo" class="content">
<img src="assets/patterns/images/logos/bathnes-logo-colour.png" alt="Bath & North East Somerset Council" />
</a>
</div>
<div class="header-search header-search--desktop">
<form id="search" class="site-search" action="" method="">
<label class="form-label visually-hidden" for="search-site">Search across the site</label>
<input class="form-control" id="search-site" type="text" name="search-site" placeholder="Search bathnes.gov.uk">
<input class="button" type="submit" value="Search">
</form>
</div>
</div>
<button id="js-header-toggle" class="navigation-trigger" onclick="showHideMenu()">Menu</button>
</div>
<nav role="navigation" id="navigation-primary" class="navigation-primary">
<ul class="navigation-primary-list">
<li class="navigation-primary-list__item"><a href="#">Navigation label</a></li>
<li class="navigation-primary-list__item"><a href="#">Navigation label</a></li>
<li class="navigation-primary-list__search">
<div class="header-search header-search--mobile">
<form id="search" class="site-search" action="" method="">
<label class="form-label visually-hidden" for="search-site">Search across the site</label>
<input class="form-control" id="search-site" type="text" name="search-site" placeholder="Search bathnes.gov.uk">
<input class="button" type="submit" value="Search">
</form>
</div>
</li>
</ul>
</nav>
<div class="header-marque"></div>
</header>
<div id="global-header-bar"></div>Commercial Header
- To be used on commercial sites
<style>
#global-header {
background-color: #fff;
position: relative;
}
.header-wrapper {
position: relative;
max-width: 960px;
margin: 0 auto;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 960px) {
.header-wrapper {
padding-left: 0;
padding-right: 0;
}
}
.header-global {
overflow: hidden;
}
.header-logo {
width: 128.4px;
height: auto;
}
.header-logo img {
max-width: 100%;
}
@media (min-width: 769px) {
.header-logo {
width: 160.5px;
float: left;
}
}
.header-search {
margin-top: 10px;
margin-bottom: 20px;
}
@media (min-width: 769px) {
.header-search {
margin-top: 1em;
float: right;
width: 50%;
text-align: right;
margin-top: 12px;
margin-bottom: 0;
}
}
.header-search .site-search {
position: relative;
}
.header-search .site-search .form-control {
width: calc(100% - 80px);
border-width: 1px;
border-color: #bfc1c3;
font-size: 16px;
height: 36px;
}
@media (min-width: 769px) {
.header-search .site-search .form-control {
width: calc(100% - 100px);
}
}
.header-search .site-search .button {
position: absolute;
top: 0;
right: 45px;
text-indent: -9999px;
background-image: url(../assets/patterns/images/icon-search-2x.png);
background-repeat: no-repeat;
background-position: 55% 50%;
background-size: 52.5% 40%;
box-shadow: none;
width: 36px;
height: 36px;
}
@media (min-width: 769px) {
.header-search .site-search .button {
right: 0;
}
}
.header-search--desktop {
display: none;
}
@media (min-width: 769px) {
.header-search--desktop {
display: block;
}
}
@media (min-width: 769px) {
.header-search--mobile {
display: none;
}
}
#global-header-bar {
position: relative;
background-color: #00aeef;
height: 5px;
}
.header-marque {
position: absolute;
bottom: 0;
right: 15px;
width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 0 25px;
border-color: transparent transparent transparent #00aeef;
}
.header-commercial {
position: relative;
overflow: hidden;
background-color: #0b0c0c;
}
.header-commercial .header-wrapper {
padding-top: 0.75em;
padding-bottom: 0.5em;
}
.header-commercial__logo {
width: 91.42857px;
height: auto;
display: block;
}
.header-commercial__logo img {
max-width: 100%;
}
@media (min-width: 769px) {
.header-commercial__logo {
width: 106.66667px;
}
}
.header-commercial__marque {
position: absolute;
bottom: 0;
right: 15px;
width: 0;
height: 0;
border-style: solid;
border-width: 30px 0 0 30px;
border-color: transparent transparent transparent #fff;
}
@media (min-width: 960px) {
.header-commercial__marque {
right: 0;
}
}
</style>
<div class="header-commercial">
<div class="header-wrapper">
<div class="header-commercial__logo">
<img src="/assets/patterns/images/logos/bathnes-logo-white.png" alt="Bath & North East Somerset Council" />
</div>
<div class="header-commercial__marque"></div>
</div>
</div>Heroes
Standard Hero
A heading of some kind
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="hero">
<div class="hero__caption">
<h1 class="hero__heading">A heading of some kind</h1>
<div class="hero__description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>Standard Hero Alt
A heading of some kind
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="hero hero--alt">
<div class="hero__caption">
<h1 class="hero__heading">A heading of some kind</h1>
<div class="hero__description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>Image Hero
A heading of some kind
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="hero hero--image" style="background-image: url(/assets/patterns/images/hero-placeholder.jpg);">
<div class="hero__caption">
<h1 class="hero__heading">A heading of some kind</h1>
<div class="hero__description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>Image Hero Alt
A heading of some kind
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="hero hero--image hero--alt" style="background-image: url(/assets/patterns/images/hero-placeholder.jpg);">
<div class="hero__caption">
<h1 class="hero__heading">A heading of some kind</h1>
<div class="hero__description">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>Icons Images
Icons
- If icons are needed ensure they are clear, simple and accompanied by relevant text
- Don’t hide functionality under icons
Warning
You can be fined up to £5,000 if you don’t register.
<div class="notice">
<i class="icon icon-important">
<span class="visually-hidden">Warning</span>
</i>
<strong class="bold-small">
You can be fined up to £5,000 if you don’t register.
</strong>
</div>Images
- Images should help give context to the text and therefore be related.
<div class="grid-row">
<div class="column-one-half">
<img src="/assets/patterns/images/examples/3by2.jpg" alt="3:2">
</div>
<div class="column-one-half">
<img src="/assets/patterns/images/examples/larry-the-cat.jpg" alt="">
</div>
</div>