Components

Interactive

Buttons

Default

btn

Button

Default + Icon Right

btn

Button

Default + Icon Left

btn

Button

Secondary

btn

Button

Secondary

Secondary + Icon Right

btn

Button

Secondary

Secondary + Icon Left

btn

Button

Secondary

Text

Text Link

All Links

Forms

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Thank you for your submission!

Oops! Something went wrong while submitting the form.

Accordion

Lorem ipsum?

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Lorem ipsum?

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Lorem ipsum?

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Slider

Slots based

CMS based

Inline video

Marquee

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Tabs

Example 1

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Example 2

Tab 1

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Tab link preview

Use the following preview of the inactive and active tab link state for easier styling.

Inactive Tab Link

Tab Link / Inactive

tabs-link

Inactive Tab Link

Tab Link / Active

tabs-link

cc-active

Content

Breadcrumb

Icon

1 EM

icon

Icon

Small

icon

Icon

SM

Medium

icon

Icon

MD

Large

icon

Icon

LG

Image

Inherit

Image

Inherit

16x9

Image

16x9

4x3

Image

4x3

1x1

Image

1x1

Card

Simple

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Actionable

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Link cover

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.

Table

Heading	Heading	Heading
Content in a cell	Content in a cell	Content in a cell
Content in a cell	Content in a cell with a lot more content that needs to span two columns

Eyebrow

Lorem ipsum

Heading

Rich Text

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Plain Text

This is some text inside of a div block.

Global

Nav Banner

Nav

Footer

Theme toggle

Build mode

Section

Grid

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Content wrap

Lorem ipsum?

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Lorem ipsum?

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Lorem ipsum?

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Spacer

Border

Prevent style clean up

This is where you can store elements and classes used in custom code to prevent their classes/styles from being cleaned up.

Components

Interactive

Buttons

Default

Default + Icon Right

Default + Icon Left

Secondary

Secondary + Icon Right

Secondary + Icon Left

Text Link

Forms

Thank you for your submission!

Thank you for your submission!

Accordion

Modal

Slider

Slots based

The steady center

Signal through noise

Foundation beneath

Flow state

The long view

CMS based

Silent summer: Britain’s architectural crisis

Pre-empting the Air Conditioning Culture War

Understanding Heat Vulnerability

‘Shade the UK - Shading for a Resilient Future’ – Exhibition

European Heat-Related Deaths Expected to Soar by End of Century

2024 Hottest Year on Record - Paris Agreement Failed?

In the Hot Seat with Jack Ithell

LA Wildfires - The Unforeseen Dangers of Compound Weather Events

Heatwaves: What are they and why do they occur?

Planet on Track to Hit 3°C of Warming

Children and Heatwaves

Overheating Adaptation Guide for Homes

Our Last Bulwark: How Effective is Climate Adaptation?

In the Hot Seat with Dr. Alan Kennedy-Asser

Record Breaking Temperatures in South Korea

How Best to Protect your Pets during a Heatwave

Islington People’s Assembly

New Olympic Record: Fastest Heatstroke

1.5ºC of Warming Reached: The Paris Agreement Revisited

London Climate Action Week 2024

Can UK events survive the extreme heat?

Environmental Audit Committee: STUK’s Response

In the Hot Seat with Dr. Charles Simpson

London Climate Resilience Review

Air Quality and Heatwaves

Princes Circus Redevelopment

Heatwaves and Mental Health

In the Hot Seat with Dr. Chloe Brimicombe

New Shading Guidance 2023

NAP3: Where is the Urgency?

Protecting Schools from Heatwaves

Tech Innovation to Empower London

40 Degree Stories

Unleashing Resilience

Why I started Shade the UK

Why are people dying in the summer?

Creativity in Motivating Climate Action

Record Breaking Heatwave in the UK

Green Infrastructure: the Underdog of Urban Resilience

Overheating & Social Housing

What the UK can learn from others

Too Hot to Retire?

London Climate Change Partnership (LCCP)

Overheating & the elderly.

Overheating in schools.

C40: Changing the Urban Landscape

Inline video

Marquee

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 1

Item 2