Heading One – H1
Feature Heading Style h1
Feature Heading Style h2
Feature Heading Style h3
Feature Heading Style h4
Feature Heading Style h5
This paragraph text demonstrates the global body copy style. It uses a light weight, relaxed line-height, and subtle letter spacing. The colour tone is slightly muted (var(--color-text-muted)).Heading Two – H2
This is supporting text for an H2 heading. You can also use strong text to emphasise a phrase.
Heading Three – H3
Each heading level scales automatically through clamp()
responsive sizing so typography looks balanced across devices.
Heading Four – H4
Subsection content can use H4 for deeper hierarchy.
Heading Five – H5
Rarely used, but included for completeness.
Heading Six – H6
Smallest heading style in the global scale.
Lists & Structured Content
Unordered list:
- Fridge repairs – all brands
- Fast same-day service
- Licensed & insured technicians
Ordered list:
- Book an inspection
- Technician arrives & quotes
- Repairs completed same visit
Card Component
Sample Card Title
This card demonstrates the default white panel styling, rounded corners, and soft shadow defined in the global style system.
Learn MoreLayout Utilities Demo
Below are examples of the global layout classes
(grid-50-50, grid-60-40, grid-3, etc.)
and how to use them in your HTML.
50 / 50 Layout – .grid-50-50
Left Column
This is a two-column 50/50 layout.
Typical usage:
<div class="grid-50-50">
<div>Left content</div>
<div>Right content</div>
</div>Right Column
Use this for text + text, or image + text blocks.
60 / 40 Layout – .grid-60-40
Main Content (60%)
Great for article + sidebar layouts, or hero copy + image.
<div class="grid-60-40">
<div>Main content (60%)</div>
<div>Sidebar (40%)</div>
</div>Sidebar (40%)
Sidebar content, CTAs, or supporting info goes here.
40 / 60 Layout – .grid-40-60
Narrow Column (40%)
Flip the emphasis – ideal for image left, copy right.
<div class="grid-40-60">
<div>Narrow column</div>
<div>Wide column</div>
</div>Wide Column (60%)
Use this for your main sales copy or feature list.
Three Columns – .grid-3
Column 1
Simple three-column layout for features or services.
Column 2
Automatically stacks on tablets and mobiles.
Column 3
Usage:
<div class="grid-3">
<div>Feature 1</div>
<div>Feature 2</div>
<div>Feature 3</div>
</div>Four Columns – .grid-4
Item 1
Perfect for logos or small stats.
Item 2
Becomes 2 columns on tablets.
Item 3
Stacks to 1 column on phones.
Item 4
Usage:
<div class="grid-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>Flex Utilities – .flex-between
Use .flex-between to space items out in a row.
<div class="flex-between">
<span>Left</span>
<span>Right</span>
</div>