Use this page to check every shared style before publishing changes to the live website.
Resize the browser window, test links and buttons, and check each section after making stylesheet changes.
Colours
Green text example | Red text example
Typography
Heading 1
Heading 2
Heading 3
Heading 4
This is lead paragraph text. It is intended for the first, more prominent paragraph on a page.
This is a normal paragraph containing bold text,
italic text, small text and
inline code.
This is a blockquote used to highlight a quotation or important statement.
- First list item
- Second list item
- Third list item
- First list item
- Second list item
- Third list item
Links
Buttons
Feature Boxes
Text and Image Layout
Image on the Right
This section tests a standard two-column text and image layout.
- Icon List Item Example supporting text.
- Second List Item Example supporting text.
Supporting caption text
Information Cards
Green Card
Example content for a standard information card.
Red Card
Example content for a red-accent information card.
Third Card
Example content for an equal-height card layout.
Callout Panel
Green Callout
Use this for important supportive information or reassurance.
Competition and Role Panel
Example Panel
This panel tests grouped content, icons and tick lists.
Group One
- First role
- Second role
- Third role
Group Two
- First role
- Second role
- Third role
Good to Know Cards
Green Icon
Supporting information.
Red Icon
Supporting information.
Third Card
Supporting information.
Contact Panel
Ready to Get Involved?
This panel is used for contact details and final calls to action.
Email: [email protected]
Featured Event Panel
Current Opportunity
This tests the featured-event layout and right-aligned badge.
Event
Example event title
Date
1 September 2026
Table
| Session | Venue | Time |
|---|---|---|
| Monday | Godolphin School | 20:15–21:15 |
| Friday | Five Rivers | 19:30–21:00 |