You are here: Home | Showcase

Badge

Showcase

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 (Post Content element on the post template also relies on it)

3 custom-built temporary Silvercode elements are allowable due to no atomic equivalent being available yet:

Announcement Bar
Icon List
Taxonomy Filter (V4 Loop)

The remainder are custom-built Silvercode elements that aren't likely to be released by Elementor, so will stay permanently.

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 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 need 1 or 2 classes each - one to control the style (only if ghost or accent is wanted) and the other to control the size (only if a smaller or larger than default size is wanted).

Large

Regular Button Accent Button Tertiary Button Ghost Button

Standard

Regular Button Accent Button Tertiary Button Ghost Button

Small

Regular Button Accent Button Tertiary 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 List Custom Element

Icon lists are created using a custom V4 element. These are not currently used, but are kept in case Elementor release a native icon list element, which may then utilise the same styling that has been created for them here.

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.

Native Lists and Spec Tables

The below are examples of icon lists and spec tables built using a combination of native elements. They cannot easily be used in components until repeater functionality is available.

Lorem

Ipsum dolor sit

Ipsum

Amet consectetur

Dolor

Adipiscing elit sed

Sit amet

Do eiusmod tempor incididunt ut labore

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

Duis aute irure dolor in reprehenderit in voluptate

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

Duis aute irure dolor in reprehenderit in voluptate

Lorem

Ipsum dolor sit

Ipsum

Amet consectetur

Dolor

Adipiscing elit sed

Sit amet

Do eiusmod tempor incididunt ut labore

Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod tempor

Shop

Ut enim ad minim veniam

Shop

Quis nostrud exercitation, ullamco laboris

Shop

Nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit

Shop

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.