Add Styles
These styles can be used independantly, or on top of a framework such as bootstrap.
Add inside <head> tag
<link rel="stylesheet" href="https://nhs.pages.dev/nhs.css">
Add before </body> tag
<script src="https://nhs.pages.dev/nhs.js"></script>
Automatic Styles
These styles will be applied automatically and do not need classes added unles you want to customise them.
- NHS Font
- Headings
- Tables
- Lists
NHS Colours
Provided by NHS Brand Guidelines, in priority order. These classes will add background colour to any elements.
Core Colours
Minimal use of highlights
Layouts
text
Open Layout Preview.nhs-box
A box used to display key information on a page.
Box Text
<div class="nhs-box">
<header>Box Title</header>
<p>Box Text</p>
</div>
Box Text
<div class="nhs-box nhs-light-green">
<header class="nhs-green">Box Title</header>
<p>Box Text</p>
</div>
Box Text
<div class="nhs-box nhs-light-yellow">
<header class="nhs-yellow">Box Title</header>
<p>Box Text</p>
</div>
.nhs-btn
There are three button sizes.
The default colour is blue, but this can be changed with a bg-color class.
Small Button Button Medium Button Large Button
Small Button
<a href="/" class="nhs-btn-sm">Small Button</a>
Button (in dark blue)
<a href="/" class="nhs-btn nhs-dark-blue">Button</a>
Medium Button (in grey)
<a href="/" class="nhs-btn-md nhs-grey">Medium Button</a>
Large Button (in green)
<a href="/" class="nhs-btn-lg nhs-green">Large Button</a>
.nhs-alert
Text
.nhs-alert-warning (as a p tag class)
.nhs-alert-warning (as a span class).nhs-alert-danger (as a p tag class)
.nhs-alert-danger (as a span class).nhs-alert-success (as a p tag class)
.nhs-alert-success (as a span class).nhs-tag
info
.nhs-tag .nhs-tag .nhs-grey .nhs-tag .nhs-green.nhs-tabs
text
Tab One Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab Two Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Tab Three Content
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone">Tab One</label>
<div class="tab">
<h3>Tab One Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo">Tab Two</label>
<div class="tab">
<h3>Tab Two Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<input type="radio" name="tabs" id="tabthree">
<label for="tabthree">Tab Three</label>
<div class="tab">
<h3>Tab Three Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
.nhs-list
Needs more work.
- List Item 1
- List Item 2
- List Item 3
.nhs-tooltip
Hover over me!.nhs-table
| Ward | Bed | Patient | Consultant | Status | A7 | 1 | Jim Testerson | Mr Jones | Waiting Discharge |
|---|