Showcase

Regular Button Accent Button Ghost Button

Introduction

This page demonstrates and explains how to use all available elements....

Where possible, atomic elements must be used:

Non-atomic "Grid" and "Container" elements must not be used (they've been hidden in the editor panel, but can't be fully disabled)
Any disabled elements (via the Element Manager) should remain as such and not be used

For now, 3 non-atomic elements are allowable due to no atomic equivalent being available yet. They should only be used if absolutely necessary.

Menu
Search
Text Editor (hidden in the editor panel, but must remain enabled as the Post Content element on the post template relies on it)

For now, 3 custom-built (Silvercode) elements are allowable due to no atomic equivalent being available yet:

Announcement Bar
Icon List
Taxonomy Filter (V4 Loop)

Always copy elements from this page as a starting point, then adjust the content and customise as necessary.

Some elements are explained in detail below, while others lead by example.

Text

This section demonstrates the available typography styles and on what elements they should be used.

Badge

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Eyebrow or byline text

Large Body Text

Regular Body Text

Small Body Text

Dividers

There are 3 coloured divider classes and 3 invisible/spacer divider classes. Use as needed.

Buttons

Buttons always need at least 2 classes each - one to control the style and the other to control the typography (which serves a dual function to also control the button size). A third class can be used to apply a "ghost" (white) theme which suits placement over top of background photos, or "accent", which is a rarely used colour intended to be particularly eye-catching.

No strict rules on when to use each style - just choose the most suitable one for each button instance.

Large

Regular Button Accent Button Ghost Button

Standard

Regular Button Accent Button Ghost Button

Small

Regular Button Accent Button Ghost Button

SVG Elements

SVG elements can be used in a variety of ways e.g. for standalone icons, icon lists, logo reels and vector graphics. Below are guidelines for common use-cases.

Vector graphics

Can be used for a multi-colour SVG graphics (like a vector illustration): In this use case, it is likely suitable to apply any settings via local css. For sizing, configure either height or weight and set the other to AUTO
Can be used for custom icons (e.g. where more specialised/detailed icons (i.e. not Lucide) are needed): In this use case, apply the "svg-custom-icon" class which manages sizing and default colours - adjust this class per site and/or override locally as necessary

Logo reels

Can be used for logos (not the site's own logo, but rather for a customer/client logo reel)
Use the SVG element with no settings or classes on them
Apply the "logo-reel" class to a containing flexbox, which applies an aspect ratio and offers a control in the custom css to tweak the number of columns

Standalone or groups of icons

Only ever use Lucide icons (found in the media library in the "Lucide icons" folder)
Each icon needs 2 classes, one for fill/outline controls and one for size
Fill ("svg-icon-fill") and outline ("svg-icon-outline") determine how the colour is applied. Fill is only suitable for some icons (typically, it is used only for stars e.g. when displaying reviews)
Several icon size variables are available; "svg-icon-xl", "svg-icon-l", "svg-icon-m" and "svg-icon-s". These classes control the size and stroke width of the icon.
By default, colours are set to color-primary-brand for outline icons and color-accent-light for fill icons. Override manually via element local settings as necessary.

Icon Lists

Icon lists are created using a custom V4 element.

An icon list element needs at least one of the following classes: "svg-icon-list-outline" or "svg-icon-list-fill" - these classes control how the colour is applied as well as spacing, icon gap and stroke width
Only ever use Lucide icons (found in the media library in the "Lucide icons" folder)
Icon sizes are determined automatically by the body class. A consistent stroke width is used for all sizes given the size variation range is minimal.
By default, colours are set to color-primary-brand for outline icons and color-accent-light for fill icons. Override manually via element local settings as necessary.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Content Widths

The site utilises 4 overall content widths: section-full, section-l, section-m and section-s

The below 4 flexboxes demonstrate the 4 widths available to apply to any parent flexbox or grid. No strict rules on when to use them (except that one must always be used) - just choose the most suitable one for the content within.