Logo
The St John Ambulance logotype is the most visible element of the identity system, it is a universal signature across all of our communications.
Logotype
Logomark
Favicon
Input Elements
Use the input element to collect information from users.
Search
Default
Input Styling
Default
Hover
Focus
Error Message
Input Types
Wishlist Icon
Colours
Use the colour palette to create a consistent look and feel across all of your communications.
Colour Scheme
Primary - Light
#DCEFE6
*-primary-light
Primary / Medium ( Default )
#007A4E
*-primary,
*-primary-medium
This is styled into the Brand Styling
Primary - Dark
#015033
*-primary-dark
Secondary - Light
#DCEFE6
*-secondary-light
Secondary / Medium ( Default )
#007A4E
*-secondary,
*-secondary-medium
This is styled into the Brand Styling
Secondary - Dark
#015033
*-secondary-dark
Warning
#AF1818
*-status-warning
Contrast Three
#DBDBDB
*-contrast-three
Contrast Four
#767676
*-contrast-four
Contrast Five
#020202
*-contrast-five
Text Links
Use the button component to help users carry out an action like buying a product or subscribing to a mailing list.
Sizes
Primary
Secondary
Green
Light
Light Secondary
Product Card
Use the product card component to display a product image, title, price, and other details.
Supplies Product Card
125ml Burnshield Hydrogel Burn Treatment Spray
3M FFP3 Disposable Comfort Dust Masks (10 Pack)
3M Steri-Strip Reinforced Skin Closures 6cm x 7.5cm (3 PACK)
A&D Medical Automatic Blood Pressure Monitor
A&D Medical Personal Blood Pressure Monitors Large Cuff
ABC Dry Powder Fire Extinguisher Vinyl Sign
AbsorbeZe Maxi Fluid Waste Bags (50 PACK)
AbsorbeZe Pads (100 PACK)
AbsorbeZe Traveleze Pouches (50 PACK)
Act+Fast Anti Choking Trainer Red
Advacare Low Adherent Dressing 5cm x 5cm
Advacare Low Adherent Dressing 7.5 x 7.5cm
AED Automated External Defibrillator Poster
AED Automated External Defibrillator Sign Vinyl 300 x 250mm
AED Reflective Badge Large 24.5cm x 11cm
Grid
As agreed with design, we will use CSS Grid for the over-arching layout of the website. For this, we have created a twelve column grid ( with spacing and gaps ), use .moonbase mb-10 to create a grid use the grid. Children of the grid will want to use .col-span-1, .col-span-2
Moonbase
Accordions
The accordion element allows users to expand or collapse specific sections of grouped content.
Accordion Element
Accordion Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
