The LB Redbridge design system.
-
- An introduction
- A starter template
- Accordion
- Back link
- Breadcrumbs
- Button
- Character count
- Checkboxes
- Confirmation
- Date input
- Details
- Declarations
- Error message and summary
- File upload
- Footer
- Header
- Hyperlink
- Inset text
- Layouts
- Mapping
- Phase banner
- Phone numbers
- Print button
- Radio buttons
- Select
- Spacing
- Table ( responsive )
- Text input
- Textarea
- Typography
- Warning text
- Well
A starter template
To begin working with this template, download the mastertemplate zip and you are good to go!
masterTemplate.zip
This contains:
- Standard page template
- Asset library comprising of images, stylesheets and javascript files to get you started!
<!DOCTYPE html>
<html lang="en" class="govuk-template ">
<head>
<meta charset="utf-8">
<title>Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#0b0c0c">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" sizes="16x16 32x32 48x48" href="assets/images/favicon.ico" type="image/x-icon">
<link rel="mask-icon" href="assets/images/govuk-mask-icon.svg" color="#0b0c0c">
<link rel="apple-touch-icon" sizes="180x180" href="assets/images/govuk-apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="assets/images/govuk-apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/images/govuk-apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="assets/images/govuk-apple-touch-icon.png">
<!--[if !IE 8]><!-->
<link rel="stylesheet" href="stylesheets/govuk-frontend-4.3.1.min.css">
<link rel="stylesheet" href="stylesheets/redbridge-overrides.css">
<!--<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="stylesheets/govuk-frontend-ie8-4.3.1.min.css">
<![endif]-->
<meta property="og:image" content="assets/images/govuk-opengraph-image.png">
</head>
<body class="govuk-template__body ">
<script>
document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
</script>
<!-- start component HTML -->
<a href="#main-content" class="govuk-skip-link">Skip to main content</a>
<!-- start header component -->
<header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-grid-column-one-half">
<div class="govuk-header__logo">
<a href="https://www.redbridge.gov.uk/" class="govuk-header__link govuk-header__link--homepage">
<img src="assets/images/logo.png" width="166px" height="70px" alt="London Borough of Redbridge" />
</a>
</div>
<img src="assets/images/leaf.png" class="header-leaf" width="303px" height="175px" alt="London Borough of Redbridge leaf">
</div>
<div class="govuk-grid-column-one-half">
<div class="redbridge-headerlinks">
<ul>
<li><a class="govuk-link govuk-!-font-size-16" href="#"><img src="assets/images/bell.png" width="15px" height="16px" alt="notification" /></a><span class="notify-dot"></span></li>
<li>|</li>
<li><a class="govuk-link govuk-!-font-size-16" href="#">My Account</a></li>
<li>|</li>
<li><a class="govuk-link govuk-!-font-size-16" href="#">Logout</a></li>
<li>|</li>
<li><a class="govuk-link govuk-!-font-size-16" href="#">Accessibility tools</a></li>
</ul>
</div>
<div class="redbridge-search">
<form action="" method="get" role="search">
<div class="redbridge-search govuk-!-display-none-print govuk-!-margin-bottom-0 redbridge-search--large-on-mobile redbridge-search--on-white redbridge-search--separate-label">
<h2 class="govuk-!-margin-0"><label for="search-global" class="govuk-label">What are you looking for?</label></h2>
<div class="redbridge-search__item-wrapper">
<input enterkeyhint="search" class="redbridge-search__item redbridge-search__input js-class-toggle" id="search-global" name="q" title="Search" type="search" value="">
<div class="redbridge-search__item redbridge-search__submit-wrapper">
<button class="redbridge-search__submit" type="submit" enterkeyhint="search">
Search GOV.UK
<svg class="redbridge-search__icon" width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<circle cx="12.0161" cy="11.0161" r="8.51613" stroke="currentColor" stroke-width="3"></circle>
<line x1="17.8668" y1="17.3587" x2="26.4475" y2="25.9393" stroke="currentColor" stroke-width="3"></line>
</svg>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</header>
<!-- end header component -->
<!-- START main content component -->
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="govuk-breadcrumbs">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#">Link1</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#">Link2</a>
</li>
<li class="govuk-breadcrumbs__list-item">
<a class="govuk-breadcrumbs__link" href="#">Link3</a>
</li>
</ol>
</div>
</div>
</div>
<main class="govuk-main-wrapper" id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-m">Two-thirds column</h1>
<p class="govuk-body">This is a paragraph inside a two-thirds wide column</p>
</div>
<div class="govuk-grid-column-one-third">
<h2 class="govuk-heading-m">One-third column</h2>
<p class="govuk-body">This is a paragraph inside a one-third wide column</p>
</div>
</div>
</main>
</div>
<!-- END main content component -->
<!-- start feedback component-->
<div class="feedback-block">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
<div class="redbridge-feedback__prompt" tabindex="-1">
<div class="redbridge-feedback__prompt-questions">
<h2 class="redbridge-feedback__prompt-question">Do you find this page useful?</h2>
<ul class="redbridge-feedback__option-list">
<li class="redbridge-feedback__option-list-item">
<button class="govuk-button redbridge-feedback__prompt-link">Yes <span class="govuk-visually-hidden">this page is useful</span></button>
</li>
<li class="redbridge-feedback__option-list-item">
<button class="govuk-button redbridge-feedback__prompt-link" aria-controls="page-is-not-useful" aria-expanded="false">No<span class="govuk-visually-hidden">this page is not useful</span></button>
</li>
</ul>
</div>
<div class="redbridge-feedback__prompt-questions redbridge-feedback__prompt-questions--something-is-wrong">
<button class="govuk-button redbridge-feedback__prompt-link" aria-controls="something-is-wrong" aria-expanded="false">Feedback on this page</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END feedback component-->
<!-- start Footer component -->
<footer class="govuk-footer" role="contentinfo">
<div class="govuk-width-container">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-quarter">
<ul class="govuk-footer__list">
<li class="govuk-footer__list-item govuk-footer__list-item--image"><a href="#" class="govuk-link"><img src="assets/images/govuk.png" width="166px" alt="govuk" /></a></li>
<li class="govuk-footer__list-item govuk-footer__list-item--image"><a href="#" class="govuk-link"><img src="assets/images/logo.png" width="166px" alt="London Borough of Redbridge" /></a></li>
</ul>
</div>
<div class="govuk-grid-column-one-half">
<div class="govuk-grid-row">
<div class="govuk-grid-column-one-half">
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="govuk-footer__list">
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="accessibilityStatement.html">
Accessibility statement
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="privacyNotice.html">
About accessibility
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="cookies.html">
Privacy and cookies
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="getHelp.html">
Contact us
</a>
</li>
</ul>
</div>
<div class="govuk-grid-column-one-half">
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="govuk-footer__list">
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="privacyNotice.html">
Feedback
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="cookies.html">
Terms of use
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="accessibilityStatement.html">
Leader's blog
</a>
</li>
<li class="govuk-footer__list-item">
<a class="govuk-footer__link" href="getHelp.html">
Maps
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="govuk-grid-column-one-quarter">
<ul class="media-icons">
<li><a href="#" class="govuk-link"><img src="assets/images/facebook.png" width="12px" height="21px" alt="facebook"></a></li>
<li><a href="#" class="govuk-link"><img src="assets/images/youtube.png" width="29px" height="21px" alt="youtube" /></a></li>
<li><a href="#" class="govuk-link"><img src="assets/images/twitter.png" width="15px" height="21px" alt="twitter" /></a></li>
<li><a href="#" class="govuk-link"><img src="assets/images/instagram.png" width="24px" height="21px" alt="instagram" /></a></li>
</ul>
</div>
</div>
</div>
<div class="govuk-footer__meta-item">
<p>© 2022 Redbridge Council</p>
</div>
</footer>
<!-- end Footer component -->
<!-- end component HTML -->
<script src="javascript/govuk-frontend-4.3.1.min.js"></script>
<script>
window.GOVUKFrontend.initAll()
</script>
</body>
</html>
