Style Guide
Website component library and style guide.
Buttons
Standard button Teal button Turquoise button White button White bordered button
The white bordered button should only be used in the footer.
Headings
Heading 1, .h1
Heading 2, .h2
Heading 3, .h3
Heading 4, .h4
Heading 5, .h5
Heading 6, .h6
Paragraphs
Lead paragraph with a link, emphasised and bold text, duis mollis est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Paragraph with a link, emphasised and bold text, duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Small text with a link, emphasised and bold text, duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.Quotes
This is a blockquote. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies.
Lists
- Unordered list maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Curabitur blandit tempus porttitor.
- Small unordered list maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Curabitur blandit tempus porttitor.
- Ordered list maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Curabitur blandit tempus porttitor.
- Small ordered list maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
- Curabitur blandit tempus porttitor.
Box Grid
Find the latest updates by theme:
Accordion
Your question here?
Your answer here. It can be anything and as long as you want, and contain any type of content.
Your question here?
Your answer here. It can be anything and as long as you want, and contain any type of content.
Your question here?
Your answer here. It can be anything and as long as you want, and contain any type of content.
Recommendation Accordion
Set out a pipeline of contracts to deliver at least 50 per cent renewable generation by 2030, as part of the transition to a highly renewable generation mix
Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Enable the roll out of charging infrastructure sufficient to allow close to 100 per cent electric new car and van sales by 2030
Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Introduce a statutory requirement for resilience standards across energy,water, digital, road and rail services
Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Commit to decarbonising of road freight by 2050 and a ban on the sale of new diesel powered HGVs no later than 2040
Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Status indicators
Our recommendations move through the following four stages:
- Recommendation made
- Accepted by government, implementation in progress
- Rejected by government
- Recommendation implemented
Feature Box
Standard feature box
Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum maecenas faucibus.
Lorem ipsum dolorLight feature box
Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum maecenas faucibus.
Lorem ipsum dolorRecommendation feature box
Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas faucibus mollis interdum maecenas faucibus.
Lorem ipsum dolorCall to action feature box
Nullam quis risus eget urna mollis ornare vel eu leo. Curabitur blandit tempus porttitor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo.
Lorem ipsum dolorAuthor
Content Box
Content box title
Lead paragraph duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
The following flexible content blocks can be inserted here:
- WYSIWYG
- Button
- Accordion
- Recommendation Accordion
- Feature Box
- Recommendation Box
- Author
To Build:
- HTML Data Chart (Platform TBC) & Caption
- Team Headshots
- Tables (via TablePress in WYSIWYG)
- Forms (via Gravity Forms in WYSIWYG)
Tabs
Summary
Lead paragraph duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Key Issues
Lead paragraph duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Headline Recommendations
Lead paragraph duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Cards
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
Card Grid
The card grid is built with Colcade. View the documentation.
Latest Updates
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.
New technologies could offer cheapest route to a net zero electricity system
Analysis published today by the National Infrastructure Commission suggests that increased investment in new technologies such as low carbon hydrogen generation could be the best way to deliver low cost power to UK consumers while also helping reach net zero greenhouse gas emissions by 2050.