Components

Global

Sitewide components used for building global structure in the header and footer.

Navbar navbar

Fields

Label	Field name	Nature	Type	Required	Default	Description
Sticky	is_sticky	Prop - Config	Boolean	No		Enable to make the navbar sticky at the top of the page.
Container	container	Prop - Config	Enum	No	normal	Select how the content is to be contained.
Palette	palette	Prop - Config	Enum	No		Select the colour palette for the content.
Texture	texture	Prop - Config	Enum	No		Select the texture to apply to the palette.
Start	start	Slot	None	No		Add Logo or other content items.
Center	center	Slot	None	No		Add content items.
End	end	Slot	None	No		Add menu, search or other content items.

Options

Container

Label	Value
Edgy	container--edgy
Wide	container--wide
Normal	container--normal
Narrow	container--narrow

Palette

Label	Value
Standard	color--standard
Alternate	color--alternate
Primary	color--primary
Secondary	color--secondary
Accent	color--accent
Neutral	color--neutral

Texture

Label	Value
Linear: Start	texture--linear-start
Linear: End	texture--linear-end
Linear: Top	texture--linear-top
Linear: Bottom	texture--linear-bottom
Linear: Top start	texture--linear-top-start
Linear: Top end	texture--linear-top-end
Linear: Bottom start	texture--linear-bottom-start
Linear: Bottom end	texture--linear-bottom-end
Radial: Spotlight	texture--radial-spotlight
Radial: Vignette	texture--radial-vignette
Conic: Top start	texture--conic-top-start
Conic: Top end	texture--conic-top-end
Conic: Bottom start	texture--conic-bottom-start
Conic: Bottom end	texture--conic-bottom-end

Logo logo

Fields

Label	Field name	Nature	Type	Required	Default	Description
URL	url	Prop - Data	String	No	/	URL that will wrap each of the images.
Breakpoint	breakpoint	Prop - Data	Integer	No		The min width (px) of the logo before it changes to the small logo.
Width	width	Prop - Data	Integer	No	200	Width (px) of the logo for desktop.
Width (small)	width_small	Prop - Data	Integer	No	160	Width (px) of the small logo for mobile.
Light logo	logo_light	Prop - Data	Object - Image	No		Image for the "light" scheme.
Light logo (small)	logo_light_small	Prop - Data	Object - Image	No		Small image for the "light" scheme.
Dark logo	logo_dark	Prop - Data	Object - Image	No		Image for the "dark" scheme.
Dark logo (small)	logo_dark_small	Prop - Data	Object - Image	No		Small image for the "dark" scheme.

Social links social_links

Searchbox searchbox

Scheme switcher scheme_switcher

Footer footer

Fields

Label	Field name	Nature	Type	Required	Default	Description
Margin top	margin_top	Prop - Config	Enum	No	0 (0px)	Select the margin top for the container - the space above the top.
Margin bottom	margin_bottom	Prop - Config	Enum	No	0 (0px)	Select the margin bottom for the container - the space below the bottom.
Padding top	padding_top	Prop - Config	Enum	No	4 (16px)	Select the padding top for the container - the space beneath the top.
Padding bottom	padding_bottom	Prop - Config	Enum	No	4 (16px)	Select the padding bottom for the container - the space beneath the bottom.
Container	container	Prop - Config	Enum	No	normal	Select how the content is to be contained.
Palette	palette	Prop - Config	Enum	No		Select the colour palette for the content.
Texture	texture	Prop - Config	Enum	No		Select the texture to apply to the palette.
Overlay	overlay	Prop - Config	Enum	No		Select the overlay to use for accessibility when a background is in use.
Top items	top_items	Slot	None	No		Add content items.
Main items	main_items	Slot	None	No		Add content items.
Side items	side_items	Slot	None	No		Add content items.
Bottom items	bottom_items	Slot	None	No		Add content items.
Backgrounds	backgrounds	Slot	None	No		Add background items to this slot.
Behaviors	behaviors	Slot	None	No		Add behavior items to this slot.

Options

Margin top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Margin bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Container

Label	Value
Edgy	container--edgy
Wide	container--wide
Normal	container--normal
Narrow	container--narrow

Palette

Label	Value
Standard	color--standard
Alternate	color--alternate
Primary	color--primary
Secondary	color--secondary
Accent	color--accent
Neutral	color--neutral

Texture

Label	Value
Linear: Start	texture--linear-start
Linear: End	texture--linear-end
Linear: Top	texture--linear-top
Linear: Bottom	texture--linear-bottom
Linear: Top start	texture--linear-top-start
Linear: Top end	texture--linear-top-end
Linear: Bottom start	texture--linear-bottom-start
Linear: Bottom end	texture--linear-bottom-end
Radial: Spotlight	texture--radial-spotlight
Radial: Vignette	texture--radial-vignette
Conic: Top start	texture--conic-top-start
Conic: Top end	texture--conic-top-end
Conic: Bottom start	texture--conic-bottom-start
Conic: Bottom end	texture--conic-bottom-end

Overlay

Label	Value
Linear: Start	overlay--linear-start
Linear: End	overlay--linear-end
Linear: Top	overlay--linear-top
Linear: Bottom	overlay--linear-bottom
Linear: Top start	overlay--linear-top-start
Linear: Top end	overlay--linear-top-end
Linear: Bottom start	overlay--linear-bottom-start
Linear: Bottom end	overlay--linear-bottom-end
Radial: Center	overlay--radial-center

Back to top back_to_top

Fields

Label	Field name	Nature	Type	Required	Default	Description
Text	``	Prop - Data	String	No		Text to display in the link.
Anchor	``	Prop - Data	String	No		Anchor URL to link to. e.g. #top

Skip skip

Fields

Label	Field name	Nature	Type	Required	Default	Description
Text	``	Prop - Data	String	No		Text to display in the link.
Anchor	``	Prop - Data	String	No		Anchor URL to link to. e.g. #main-content

Google translate google_translate

Fields

Label	Field name	Nature	Type	Required	Default	Description
language	language	Prop - Config	String	No	en	Set the default language used by the widget.
Icon	icon	Prop - Config	String	No	globe	Icon depicting the translate widget.

Container

Important top level components used for managing containerisation, paddings, margins, colours and other presentational aspects.

Grid grid

Columns and rows for grid like layouts.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Column widths	column_widths	Prop - Config	Enum	No	75-25	Select the width of the columns.
Row count	row_count	Prop - Config	Enum	No	1	Select the number of rows to display.
Margin top	margin_top	Prop - Config	Enum	No	12 (48px)	Select the margin top for the container - the space above the top.
Margin bottom	margin_bottom	Prop - Config	Enum	No	12 (48px)	Select the margin bottom for the container - the space below the bottom.
Padding top	padding_top	Prop - Config	Enum	No	0 (0px)	Select the padding top for the container - the space beneath the top.
Padding bottom	padding_bottom	Prop - Config	Enum	No	0 (0px)	Select the padding bottom for the container - the space beneath the bottom.
Container	container	Prop - Config	Enum	No	normal	Select how the content is to be contained.
Palette	palette	Prop - Config	Enum	No		Select the colour palette for the content.
Texture	texture	Prop - Config	Enum	No		Select the texture to apply to the palette.
Overlay	overlay	Prop - Config	Enum	No		Select the overlay to use for accessibility when a background is in use.
Backgrounds	backgrounds	Slot	None	No		Add background items.
Behaviors	behaviors	Slot	None	No		Add behavior items.
Cell 1	cell_1	Slot	None	No		Add content items.
Cell 2	cell_2	Slot	None	No		Add content items.
Cell 3	cell_3	Slot	None	No		Add content items.
Cell 4	cell_4	Slot	None	No		Add content items.
Cell 5	cell_5	Slot	None	No		Add content items.
Cell 6	cell_6	Slot	None	No		Add content items.
Cell 7	cell_7	Slot	None	No		Add content items.
Cell 8	cell_8	Slot	None	No		Add content items.
Cell 9	cell_9	Slot	None	No		Add content items.
Cell 10	cell_10	Slot	None	No		Add content items.
Cell 11	cell_11	Slot	None	No		Add content items.
Cell 12	cell_12	Slot	None	No		Add content items.
Cell 13	cell_13	Slot	None	No		Add content items.
Cell 14	cell_14	Slot	None	No		Add content items.
Cell 15	cell_15	Slot	None	No		Add content items.
Cell 16	cell_16	Slot	None	No		Add content items.

Options

Margin top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Margin bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Container

Label	Value
Edgy	container--edgy
Wide	container--wide
Normal	container--normal
Narrow	container--narrow

Palette

Label	Value
Standard	color--standard
Alternate	color--alternate
Primary	color--primary
Secondary	color--secondary
Accent	color--accent
Neutral	color--neutral

Texture

Label	Value
Linear: Start	texture--linear-start
Linear: End	texture--linear-end
Linear: Top	texture--linear-top
Linear: Bottom	texture--linear-bottom
Linear: Top start	texture--linear-top-start
Linear: Top end	texture--linear-top-end
Linear: Bottom start	texture--linear-bottom-start
Linear: Bottom end	texture--linear-bottom-end
Radial: Spotlight	texture--radial-spotlight
Radial: Vignette	texture--radial-vignette
Conic: Top start	texture--conic-top-start
Conic: Top end	texture--conic-top-end
Conic: Bottom start	texture--conic-bottom-start
Conic: Bottom end	texture--conic-bottom-end

Overlay

Label	Value
Linear: Start	overlay--linear-start
Linear: End	overlay--linear-end
Linear: Top	overlay--linear-top
Linear: Bottom	overlay--linear-bottom
Linear: Top start	overlay--linear-top-start
Linear: Top end	overlay--linear-top-end
Linear: Bottom start	overlay--linear-bottom-start
Linear: Bottom end	overlay--linear-bottom-end
Radial: Center	overlay--radial-center

Layout layout

Flexible column layouts helpful for designing pages.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Layout	layout	Prop - Config	String	No	Main (7) Gap (1) Side (4)	Layout selected applies on desktop and tablet.
Margin top	margin_top	Prop - Config	String	No	12 (48px)	Select the margin top for the container - the space above the top.
Margin bottom	margin_bottom	Prop - Config	String	No	12 (48px)	Select the margin bottom for the container - the space below the bottom.
Padding top	padding_top	Prop - Config	String	No	0 (0px)	Select the padding top for the container - the space beneath the top.
Padding bottom	padding_bottom	Prop - Config	String	No	0 (0px)	Select the padding bottom for the container - the space beneath the bottom.
Container	container	Prop - Config	Enum	No	normal	Select how the content is to be contained.
Palette	palette	Prop - Config	Enum	No		Select the colour palette for the content.
Texture	texture	Prop - Config	Enum	No		Select the texture to apply to the palette.
Overlay	overlay	Prop - Config	Enum	No		Select the overlay to use for accessibility when a background is in use.
Main	main	Slot	None	No		Add content items.
Side	side	Slot	None	No		Add content items.
Bottom	bottom	Slot	None	No		Add content items.
Backgrounds	backgrounds	Slot	None	No		Add background items to this slot.
Behaviors	behaviors	Slot	None	No		Add behavior items to this slot.

Options

Margin top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Margin bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Container

Label	Value
Edgy	container--edgy
Wide	container--wide
Normal	container--normal
Narrow	container--narrow

Palette

Label	Value
Standard	color--standard
Alternate	color--alternate
Primary	color--primary
Secondary	color--secondary
Accent	color--accent
Neutral	color--neutral

Texture

Label	Value
Linear: Start	texture--linear-start
Linear: End	texture--linear-end
Linear: Top	texture--linear-top
Linear: Bottom	texture--linear-bottom
Linear: Top start	texture--linear-top-start
Linear: Top end	texture--linear-top-end
Linear: Bottom start	texture--linear-bottom-start
Linear: Bottom end	texture--linear-bottom-end
Radial: Spotlight	texture--radial-spotlight
Radial: Vignette	texture--radial-vignette
Conic: Top start	texture--conic-top-start
Conic: Top end	texture--conic-top-end
Conic: Bottom start	texture--conic-bottom-start
Conic: Bottom end	texture--conic-bottom-end

Overlay

Label	Value
Linear: Start	overlay--linear-start
Linear: End	overlay--linear-end
Linear: Top	overlay--linear-top
Linear: Bottom	overlay--linear-bottom
Linear: Top start	overlay--linear-top-start
Linear: Top end	overlay--linear-top-end
Linear: Bottom start	overlay--linear-bottom-start
Linear: Bottom end	overlay--linear-bottom-end
Radial: Center	overlay--radial-center

Group group

Groups items together.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Allow wrap	allow_wrap	Prop - Config	Boolean	No	=TRUE()	Enable to wrap the items on smaller screens.
Direction	direction	Prop - Config	Enum	No		Select the direction of the grouping of the items.
Alignment	alignment	Prop - Config	Enum	No		Select the alignment of the items in the group.
Justify	justify	Prop - Config	Enum	No		Select the justification of the items in the group.
Gap	gap	Prop - Config	Enum	No	4 (16px)	Select the gap between items.
Margin top	margin_top	Prop - Config	String	No		Select the margin top for the group - the space above the top.
Margin bottom	margin_bottom	Prop - Config	String	No		Select the margin bottom for the group - the space below the bottom.
Padding	padding	Prop - Config	String	No	0 (0px)	Select the padding for the group.
Palette	palette	Prop - Config	Enum	No		Select the colour palette for the content.
Texture	texture	Prop - Config	Enum	No		Select the texture to apply to the palette.
Overlay	overlay	Prop - Config	Enum	No		Select the overlay to use for accessibility when a background is in use.
Items	items	Slot	None	No		Add content items.
Backgrounds	backgrounds	Slot	None	No		Add background items to this slot.
Behaviors	behaviors	Slot	None	No		Add behavior items to this slot.

Options

Direction

Label	Value
Horizontal	horizontal
Vertical	vertical

Alignment

Label	Value
Start	start
Center	center
End	end
Stretch	stretch

Justify

Label	Value
Start	start
Center	center
End	end
Space between	space-between
Space around	space-around
Space evenly	space-evenly
Stretch	stretch

Gap

Label	Value
0 (0px)	0
2 (8px)	2
4 (16px)	4
6 (24px)	6
8 (32px)	8
12 (48px)	12
16 (64px)	16
20 (80px)	20
24 (96px)	24

Margin top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Margin bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Palette

Label	Value
Standard	color--standard
Alternate	color--alternate
Primary	color--primary
Secondary	color--secondary
Accent	color--accent
Neutral	color--neutral

Texture

Label	Value
Linear: Start	texture--linear-start
Linear: End	texture--linear-end
Linear: Top	texture--linear-top
Linear: Bottom	texture--linear-bottom
Linear: Top start	texture--linear-top-start
Linear: Top end	texture--linear-top-end
Linear: Bottom start	texture--linear-bottom-start
Linear: Bottom end	texture--linear-bottom-end
Radial: Spotlight	texture--radial-spotlight
Radial: Vignette	texture--radial-vignette
Conic: Top start	texture--conic-top-start
Conic: Top end	texture--conic-top-end
Conic: Bottom start	texture--conic-bottom-start
Conic: Bottom end	texture--conic-bottom-end

Overlay

Label	Value
Linear: Start	overlay--linear-start
Linear: End	overlay--linear-end
Linear: Top	overlay--linear-top
Linear: Bottom	overlay--linear-bottom
Linear: Top start	overlay--linear-top-start
Linear: Top end	overlay--linear-top-end
Linear: Bottom start	overlay--linear-bottom-start
Linear: Bottom end	overlay--linear-bottom-end
Radial: Center	overlay--radial-center

Section section

Structural component for adding headings and introductions to content.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Show header	show_header	Prop - Config	Boolean	No	=TRUE()	Show the header elements.
Show footer	show_footer	Prop - Config	Boolean	No	=TRUE()	Show the footer elements.
Layout	layout	Prop - Config	Enum	No		Select the layout for the section.
Heading	heading	Prop - Data	String	No		The heading content.
Heading level	heading_level	Prop - Data	Enum	No	2	Select the heading level.
Hide heading	hide_heading	Prop - Data	Boolean	No	=FALSE()	Hide the heading from being visible.
Intro	intro	Prop - Data	String - HTML	No		Introduction content for the section.
Prose size	prose_size	Prop - Data	Enum	No		Select the size of prose to make it bigger or smaller.
Readmore Text	readmore_text	Prop - Data	String	No		Call to action text.
Readmore URL	readmore_url	Prop - Data	String	No		Call to action URL.
Content width	content_width	Prop - Config	Enum	No	1	Select the width of the content.
Content position	content_position	Prop - Config	Enum	No	Start	Select the position of the content.
Content alignment	content_alignment	Prop - Config	Enum	No	Start	Select the alignment of the content.
Column widths	column_widths	Prop - Config	Enum	No	100	Select the column width of the items.
Margin top	margin_top	Prop - Config	Enum	No	0 (0px)	Select the margin top for the container - the space above the top.
Margin bottom	margin_bottom	Prop - Config	Enum	No	0 (0px)	Select the margin bottom for the container - the space below the bottom.
Padding top	padding_top	Prop - Config	Enum	No	12 (48px)	Select the padding top for the container - the space beneath the top.
Padding bottom	padding_bottom	Prop - Config	Enum	No	12 (48px)	Select the padding bottom for the container - the space beneath the bottom.
Container	container	Prop - Config	Enum	No	normal	Select how the content is to be contained.
Palette	palette	Prop - Config	Enum	No	Standard	Select the colour palette for the content.
Texture	texture	Prop - Config	Enum	No		Select the texture to apply to the palette.
Overlay	overlay	Prop - Config	Enum	No		Select the overlay to use for accessibility when a background is in use.
Header items	header_items	Slot	None	No		Add content items.
Main Items	main_items	Slot	None	No		Add content items.
Footer items	footer_items	Slot	None	No		Add content items.
Backgrounds	backgrounds	Slot	None	No		Add background items to this slot.
Behaviors	behaviors	Slot	None	No		Add behavior items to this slot.

Options

Heading level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Prose size

Label	Value
Small	prose-sm
Base	prose-base
Large	prose-lg
Extra large	prose-xl
Extra extra large	prose-2xl

Content width

Label	Value
1	section-width--100
0.75	section-width--75
0.66	section-width--66
0.5	section-width--50

Content position

Label	Value
Start	content-position--start
Center	content-position--center
End	content-position--end

Content alignment

Label	Value
Start	section-alignment--start
Center	section-alignment--center
End	section-alignment--end
Justify	section-alignment--justify

Column widths

Label	Value
Full	section-col-widths--100
Halves	section-col-widths--50-50
Thirds	section-col-widths--33-33-33
Quarters	section-col-widths--25-25-25-25

Margin top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Margin bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Container

Label	Value
Edgy	container--edgy
Wide	container--wide
Normal	container--normal
Narrow	container--narrow

Palette

Label	Value
Standard	color--standard
Alternate	color--alternate
Primary	color--primary
Secondary	color--secondary
Accent	color--accent
Neutral	color--neutral

Texture

Label	Value
Linear: Start	texture--linear-start
Linear: End	texture--linear-end
Linear: Top	texture--linear-top
Linear: Bottom	texture--linear-bottom
Linear: Top start	texture--linear-top-start
Linear: Top end	texture--linear-top-end
Linear: Bottom start	texture--linear-bottom-start
Linear: Bottom end	texture--linear-bottom-end
Radial: Spotlight	texture--radial-spotlight
Radial: Vignette	texture--radial-vignette
Conic: Top start	texture--conic-top-start
Conic: Top end	texture--conic-top-end
Conic: Bottom start	texture--conic-bottom-start
Conic: Bottom end	texture--conic-bottom-end

Overlay

Label	Value
Linear: Start	overlay--linear-start
Linear: End	overlay--linear-end
Linear: Top	overlay--linear-top
Linear: Bottom	overlay--linear-bottom
Linear: Top start	overlay--linear-top-start
Linear: Top end	overlay--linear-top-end
Linear: Bottom start	overlay--linear-bottom-start
Linear: Bottom end	overlay--linear-bottom-end
Radial: Center	overlay--radial-center

Hero hero

Simple container for important, attractive content.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Content width	content_width	Prop - Config	Enum	No		Select the width of the content.
Content position	content_position	Prop - Config	Enum	No		Select the position of the content.
Content alignment	content_alignment	Prop - Config	Enum	No		Select the alignment of the content.
Margin top	margin_top	Prop - Config	String	No	0 (0px)	Select the margin top for the container - the space above the top.
Margin bottom	margin_bottom	Prop - Config	String	No	0 (0px)	Select the margin bottom for the container - the space below the bottom.
Padding top	padding_top	Prop - Config	String	No	32 (128px)	Select the padding top for the container - the space beneath the top.
Padding bottom	padding_bottom	Prop - Config	String	No	32 (128px)	Select the padding bottom for the container - the space beneath the bottom.
Container	container	Prop - Config	Enum	No	normal	Select how the content is to be contained.
Palette	palette	Prop - Config	Enum	No		Select the colour palette for the content.
Texture	texture	Prop - Config	Enum	No		Select the texture to apply to the palette.
Overlay	overlay	Prop - Config	Enum	No		Select the overlay to use for accessibility when a background is in use.
Items	items	Slot	None	No		Add content items.
Backgrounds	backgrounds	Slot	None	No		Add background items to this slot.
Behaviors	behaviors	Slot	None	No		Add behavior items to this slot.

Options

Content width

Label	Value
1	content-width--100
0.75	content-width--75
0.66	content-width--66
0.5	content-width--50

Content position

Label	Value
Start	content-position--start
Center	content-position--center
End	content-position--end

Content alignment

Label	Value
Start	start
Center	center
End	end
Justify	justify

Margin top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Margin bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Container

Label	Value
Edgy	container--edgy
Wide	container--wide
Normal	container--normal
Narrow	container--narrow

Palette

Label	Value
Standard	color--standard
Alternate	color--alternate
Primary	color--primary
Secondary	color--secondary
Accent	color--accent
Neutral	color--neutral

Texture

Label	Value
Linear: Start	texture--linear-start
Linear: End	texture--linear-end
Linear: Top	texture--linear-top
Linear: Bottom	texture--linear-bottom
Linear: Top start	texture--linear-top-start
Linear: Top end	texture--linear-top-end
Linear: Bottom start	texture--linear-bottom-start
Linear: Bottom end	texture--linear-bottom-end
Radial: Spotlight	texture--radial-spotlight
Radial: Vignette	texture--radial-vignette
Conic: Top start	texture--conic-top-start
Conic: Top end	texture--conic-top-end
Conic: Bottom start	texture--conic-bottom-start
Conic: Bottom end	texture--conic-bottom-end

Overlay

Label	Value
Linear: Start	overlay--linear-start
Linear: End	overlay--linear-end
Linear: Top	overlay--linear-top
Linear: Bottom	overlay--linear-bottom
Linear: Top start	overlay--linear-top-start
Linear: Top end	overlay--linear-top-end
Linear: Bottom start	overlay--linear-bottom-start
Linear: Bottom end	overlay--linear-bottom-end
Radial: Center	overlay--radial-center

Banner banner

Layout for the banner area of a page, handling title, colours and other page wide metadata.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Kicker	kicker	Prop - Data	String	No		Kicker text to introduce the title.
Breadcrumb	breadcrumb	Slot		No		Breadcrumb of links.
Title	title	Prop - Data	String	No		The main title for the banner and page.
Banner title	banner_title	Prop - Data	String	No		An alternate title that will override the title.
Introduction	introduction	Prop - Data	String - HTML	No		Introductory content.
Date	date	Prop - Data	String	No		Date field.
Featured image	featured_image	Prop - Data	Object - Image	No		Featured image to show on the side of the banner.
Background image	background_image	Prop - Data	Object - Image	No		Background image to display.
Margin top	margin_top	Prop - Config	Enum	No	0 (0px)	Select the margin top for the container - the space above the top.
Margin bottom	margin_bottom	Prop - Config	Enum	No	0 (0px)	Select the margin bottom for the container - the space below the bottom.
Padding top	padding_top	Prop - Config	Enum	No	24 (96px)	Select the padding top for the container - the space beneath the top.
Padding bottom	padding_bottom	Prop - Config	Enum	No	24 (96px)	Select the padding bottom for the container - the space beneath the bottom.
Palette	palette	Prop - Config	Enum	No		Select how the content is to be contained.
Texture	texture	Prop - Config	Enum	No		Select the colour palette for the content.
Overlay	overlay	Prop - Config	Enum	No		Select the texture to apply to the palette.

Options

Margin top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Margin bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding top

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Padding bottom

Label	Value
0 (0px)	0
4 (16px)	4
8 (32px)	8
12 (48px)	12
16 (64px)	16
24 (96px)	24
32 (128px)	32

Palette

Label	Value
Standard	color--standard
Alternate	color--alternate
Primary	color--primary
Secondary	color--secondary
Accent	color--accent
Neutral	color--neutral

Texture

Label	Value
Linear: Start	texture--linear-start
Linear: End	texture--linear-end
Linear: Top	texture--linear-top
Linear: Bottom	texture--linear-bottom
Linear: Top start	texture--linear-top-start
Linear: Top end	texture--linear-top-end
Linear: Bottom start	texture--linear-bottom-start
Linear: Bottom end	texture--linear-bottom-end
Radial: Spotlight	texture--radial-spotlight
Radial: Vignette	texture--radial-vignette
Conic: Top start	texture--conic-top-start
Conic: Top end	texture--conic-top-end
Conic: Bottom start	texture--conic-bottom-start
Conic: Bottom end	texture--conic-bottom-end

Overlay

Label	Value
Linear: Start	overlay--linear-start
Linear: End	overlay--linear-end
Linear: Top	overlay--linear-top
Linear: Bottom	overlay--linear-bottom
Linear: Top start	overlay--linear-top-start
Linear: Top end	overlay--linear-top-end
Linear: Bottom start	overlay--linear-bottom-start
Linear: Bottom end	overlay--linear-bottom-end
Radial: Center	overlay--radial-center

Display

Item display components typically used for rendering items and content entities.

Card - Image card_image

Displays items as an image card, helpful for eye catching elements.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Info	info	Prop - Data	String	No		Info text that describes the type or category of the item.
Date	date	Prop - Data	String	No		The most relevant date for the item.
Heading	heading	Prop - Data	String	No		The heading content.
Heading level	heading_level	Prop - Data	Enum	No	3	Select the heading level.
URL	url	Prop - Data	String	No		The URL of the item.
Summary	summary	Prop - Data	String - HTML	No		Summary text describing the item.
Image	image	Prop - Data	Object - Image	No		Image depicting the item.

Options

Heading level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Card - Image (Canvas) card_image_canvas

Displays items as an image card, helpful for eye catching elements.

Card - Icon card_icon

Displays items as an icon card, helpful for informational items.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Date	date	Prop - Data	String	No		The most relevant date for the item.
Heading	heading	Prop - Data	String	No		The heading content.
Heading level	heading_level	Prop - Data	Enum	No	3	Select the heading level.
URL	url	Prop - Data	String	No		The URL of the item.
Summary	summary	Prop - Data	String - HTML	No		Summary text describing the item.
Icon name	icon	Prop - Data	String	No		Phosphor icon name for the item.
Icon size	icon_size	Prop - Data	Enum	No	icon-size--xl	Select the icon size.
Icon alignment	icon_align	Prop - Data	Enum	No		Select the icon alignment.

Options

Heading level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Icon size

Label	Value
Extra small	icon-size--xs
Small	icon-size--sm
Medium	icon-size--md
Large	icon-size--lg
Extra large	icon-size--xl

Icon alignment

Label	Value
Left	left
Center	center

Card - Simple card_simple

Displays items as a simple car, with no image or icon, helpful for terse information.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Info	info	Prop - Data	String	No		Info text that describes the type or category of the item.
Date	date	Prop - Data	String	No		The most relevant date for the item.
Heading	heading	Prop - Data	String	No		The heading content.
Heading level	heading_level	Prop - Data	Enum	No	3	Select the heading level.
URL	url	Prop - Data	String	No		The URL of the item.
Summary	summary	Prop - Data	String - HTML	No		Summary text describing the item.

Options

Heading level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Teaser - Small teaser_small

Displays items as a small teaser, helpful for compact, attractive lists.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Info	info	Prop - Data	String	No		Info text that describes the type or category of the item.
Date	date	Prop - Data	String	No		The most relevant date for the item.
Heading	heading	Prop - Data	String	No		The heading content.
Heading level	heading_level	Prop - Data	Enum	No	3	Select the heading level.
URL	url	Prop - Data	String	No		The URL of the item.
Summary	summary	Prop - Data	String - HTML	No		Summary text describing the item.
Image	image	Prop - Data	Object - Image	No		Image depicting the item.

Options

Heading level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Teaser - Small (Canvas) teaser_small_canvas

Displays items as a small teaser, helpful for compact, attractive lists.

Teaser - Medium teaser_medium

Displays items as a medium teaser, helpful for main content listings.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Info	info	Prop - Data	String	No		Info text that describes the type or category of the item.
Date	date	Prop - Data	String	No		The most relevant date for the item.
Heading	heading	Prop - Data	String	No		The heading content.
Heading level	heading_level	Prop - Data	Enum	No	3	Select the heading level.
URL	url	Prop - Data	String	No		The URL of the item.
Summary	summary	Prop - Data	String - HTML	No		Summary text describing the item.
Image	image	Prop - Data	Object - Image	No		Image depicting the item.

Options

Heading level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Teaser - Medium (Canvas) teaser_medium_canvas

Displays items as a medium teaser, helpful for main content listings.

Teaser - Big teaser_big

Displays items as a big teaser, helpful for dominant hero displays of items.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Info	info	Prop - Data	String	No		Info text that describes the type or category of the item.
Date	date	Prop - Data	String	No		The most relevant date for the item.
Heading	heading	Prop - Data	String	No		The heading content.
Heading level	heading_level	Prop - Data	Enum	No	3	Select the heading level.
URL	url	Prop - Data	String	No		The URL of the item.
Summary	summary	Prop - Data	String - HTML	No		Summary text describing the item.
Image	image	Prop - Data	Object - Image	No		Image depicting the item.

Options

Heading level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Teaser - Big (Canvas) teaser_big_canvas

Displays items as a big teaser, helpful for dominant hero displays of items.

Title title

Displays items as a title, helpful for the most frugal of listings.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Heading	heading	Prop - Data	String	No		The heading content.
Heading level	heading_level	Prop - Data	Enum	No	3	Select the heading level.
URL	url	Prop - Data	String	No		The URL of the item.

Options

Heading level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Tile (Canvas) tile_canvas

Displays items as a an image tile, helpful for highly graphical content.

Tile tile

Displays items as a an image tile, helpful for highly graphical content.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Heading	heading	Prop - Data	String	No		The heading content.
Heading level	heading_level	Prop - Data	Enum	No	3	Select the heading level.
Info	info	Prop - Data	String	No		Info text that describes the type or category of the item.
URL	url	Prop - Data	String	No		The URL of the item.
Image	image	Prop - Data	Object - Image	No		Image depicting the item.

Options

Heading level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Summary summary

Displays items as a summary helpful for rich and dense display of content metadata.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Info	info	Prop - Data	String	No		Info text that describes the type or category of the item.
Date	date	Prop - Data	String	No		The most relevant date for the item.
Heading	heading	Prop - Data	String	No		The heading content.
Heading level	heading_level	Prop - Data	Enum	No	3	Select the heading level.
URL	url	Prop - Data	String	No		The URL of the item.
Summary	summary	Prop - Data	String - HTML	No		Summary text describing the item.

Options

Heading level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Card card

Multipurpose card container for an image and other content.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Heading	heading	Prop - Data	String	No		The heading content.
Heading level	heading_level	Prop - Data	Enum	No	3	Select the heading level.
Image	=LOWER(B374)	Prop - Data	Object - Image	No		The image to display in the card.
Body	body	Prop - Data	String - HTML	No		Content for the card.
Center	center	Prop - Config	Boolean	No		Center the content in the card.
Card side	card_side	Prop - Config	Boolean	No		Arrange the card with the image on the side.
Text alignment	text_alignment	Prop - Config	Enum	No		Select the alignment of the content.
Actions alignment	actions_alignment	Prop - Config	Enum	No		Select the alignment of the buttons.
Style	style	Prop - Config	Enum	No		Select the card style.
Size	=LOWER(B381)	Prop - Config	Enum	No		Select the card size.
Palette	palette	Prop - Config	Enum	No		Select the colour palette for the content.
Texture	texture	Prop - Config	Enum	No		Select the texture to apply to the palette.
Badge	badge_items	Slot	None	No		Add badge item.
Body items	body_items	Slot	None	No		Add content items.
Actions	=LOWER(B386)	Slot	None	No		Add button items.

Options

Heading level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Text alignment

Label	Value
Start	text-start
Center	items-center

Actions alignment

Label	Value
Start	justify-start
Center	items-center
End	justify-end

Style

Label	Value
Border	card-border
Dash	card-dash

Size

Label	Value
Extra small	card-xs
Small	card-sm
Medium	card-md
Large	card-lg
Extra large	card-xl

Palette

Label	Value
Standard	color--standard
Alternate	color--alternate
Primary	color--primary
Secondary	color--secondary
Accent	color--accent
Neutral	color--neutral

Texture

Label	Value
Linear: Start	texture--linear-start
Linear: End	texture--linear-end
Linear: Top	texture--linear-top
Linear: Bottom	texture--linear-bottom
Linear: Top start	texture--linear-top-start
Linear: Top end	texture--linear-top-end
Linear: Bottom start	texture--linear-bottom-start
Linear: Bottom end	texture--linear-bottom-end
Radial: Spotlight	texture--radial-spotlight
Radial: Vignette	texture--radial-vignette
Conic: Top start	texture--conic-top-start
Conic: Top end	texture--conic-top-end
Conic: Bottom start	texture--conic-bottom-start
Conic: Bottom end	texture--conic-bottom-end

Content

Content items have vertical rhythm and which are placed into Containers.

Table of contents toc

Provides a dynamic table of contents.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Show	show	Prop - Config	Boolean	No		Enable to show the table of contents.
Heading	heading	Prop - Data	String	No		The heading content.
Heading level	heading_level	Prop - Data	Enum	No	2	Select the heading level.
Content selector	content_selector	Prop - Config	String	No	.layout__content	Where to grab the headings to build the table of contents.
Heading levels	heading_levels	Prop - Config	String	No	h2	Headings to include from the content. e.g. h2, h3 (selector).
Ignore selector	ignore_selector	Prop - Config	String	No		Headings to ignore from the content (selector).
Sticky	sticky	Prop - Config	Boolean	No		Enable to make the table of contents sticky.

Options

Heading level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Content content

General purpose content component for adding HTML to the page and other components.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Content	content	Prop - Data	String - HTML	No		Semantic HTML content.
Prose size	prose_size	Prop - Data	Enum	No		Select the size of prose to make it bigger or smaller.

Options

Prose size

Label	Value
Small	prose-sm
Base	prose-base
Large	prose-lg
Extra large	prose-xl
Extra extra large	prose-2xl

Video video

Displays a video for YouTube, Vimeo or Native.

Fields

Label	Field name	Nature	Type	Required	Default	Description
URL	url	Prop - Data	String	No		URL of the video. Supports YouTube, Vimeo, and direct MP4 links.

Logo cloud logo_cloud

Displays a list of logo images in a flexible way.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Size	size	Prop - Config	Enum	No	logo-size--md	Select the size of the logo cloud.
Position	position	Prop - Config	Enum	No	position-center	Select the position of the logo cloud.
Gap	gap	Prop - Data	Enum	No	4 (16px)
Logos	logo_images	Slot		No		Add image items.

Options

Size

Label	Value
Extra small	logo-size--xs
Small	logo-size--sm
Medium	logo-size--md
Large	logo-size--lg
Extra large	logo-size--xl

Position

Label	Value
Start	position-start
Center	position-center
End	position-end

Gap

Label	Value
0 (0px)	0
2 (8px)	2
4 (16px)	4
6 (24px)	6
8 (32px)	8
12 (48px)	12
16 (64px)	16
20 (80px)	20
24 (96px)	24

Slider slider

Shows items (images, cards) in a interactive slider with many variants.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Loop	loop	Prop - Data	Boolean	No		Enable to loop the slider.
Show navigation	navigation	Prop - Data	Boolean	No		Enable to show navigation for the slides.
Transition effect	effect	Prop - Data	Enum	No	slide	Select the transition effect of the slides.
Direction	direction	Prop - Data	Enum	No	horizontal	Select the direction of the slides.
Pagination	pagination	Prop - Data	Enum	No	bullets	Select the pagination of the slides.
Speed	speed	Prop - Data	Integer	No	300	Enter the speed of the slides in millisecond e.g. 300
Slides per view	slides_per_view	Prop - Data	Integer	No	1	Number of slides visible at the same time.
Slides per group	slides_per_group	Prop - Data	Integer	No	1	Number of slides to advance per swipe.
Space between	space_between	Prop - Data	Integer	No	16	Gap (px) between slides.
Rows	rows	Prop - Data	Integer	No	1	Number of slide rows for multi-row layout. Not compatible with loop mode.
Fill	grid_fill	Prop - Data	Enum	No	column	Select how slides should fill rows, by column or by row
Slides	slides	Slot	None	No		Add display or content items as slides.

Options

Transition effect

Label	Value
Slide	slide
Fade	fade
Cube	cube
Coverflow	coverflow
Flip	flip
Cards	cards

Direction

Label	Value
Horizontal	horizontal
Vertical	vertical

Pagination

Label	Value
Bullets	bullets
Fraction	fraction
Progress bar	progressbar

Fill

Label	Value
Column	column
Row	row

Testimonial testimonial

Fields

Label	Field name	Nature	Type	Required	Default	Description
Variant	variant	Prop - Data	Enum	No		Select the display variant for the testimonial.
Name	name	Prop - Data	String	No		Name of the person providing the quote.
Role	role	Prop - Data	String	No		Role of the person providing the quote.
Quote	quote	Prop - Data	String - HTML	No		Quote for the testimonial.
Headshot	headshot	Prop - Data	Object - Image	No		Headshot of the person providing the quote.

Accordion group accordion_group

Alert alert

Fields

Label	Field name	Nature	Type	Required	Default	Description
Message	message	Prop - Data	String - HTML	No		Message to display in the alert.
Icon	icon	Prop - Data	String	No	check-circle	Select the icon for the alert.
Style	style	Prop - Config	Enum	No		Select the style of the alert.
Color	color	Prop - Config	Enum	No	color--info	Select the color of the alert.
Direction	direction	Prop - Config	Enum	No		Select the direction of the alert.
Buttons	buttons	Slot	None	No		Add button items.

Options

Style

Label	Value
Dash	alert-dash
Soft	alert-soft

Color

Label	Value
Vertical	alert-vertical
Horizontal	alert-horizontal

Direction

Label	Value
Info	color--info
Success	color--success
Error	color--error
Warning	color--warning

Diff diff

Compare two images by sliding between them.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Item 1	item_1	Prop - Data	Object - Image	No		Add image item.
Item 2	item_2	Prop - Data	Object - Image	No		Add image item.

Divider divider

Separate content with a divider with optional text.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Text	text	Prop - Data	String	No		Text to display in the divider.
Color	color	Prop - Config	Enum	No		Select the color of the divider.

Options

Color

Label	Value
Primary	primary
Secondary	secondary
Accent	accent
Success	success
Warning	warning
Info	info
Error	error

Hover 3D card hover_3d_card

Hover gallery hover_gallery

Stats stats

Fields

Label	Field name	Nature	Type	Required	Default	Description
Direction	direction	Prop - Config	Enum	No		Select the direction of the stats.
Items	items	Slot	None	No		Add stat items.

Options

Direction

Label	Value
Horizontal	stats-horizontal
Vertical	stats-vertical

Stat stat

Fields

Label	Field name	Nature	Type	Required	Default	Description
Title	title	Prop - Data	String	No		Title of the statistic.
Prefix	prefix	Prop - Data	String	No		Prefix content for the value. e.g. $
Value	value	Prop - Data	Number	No		Value to display and animate.
Suffix	suffix	Prop - Data	String	No		Suffix content for the value. e.g. %
Size	size	Prop - Data	Enum	No		Select the size of the stat.
Desc	desc	Prop - Data	String	No		Short description of the statistic.
Figure	figure	Slot	None	No		Add image item.
Actions	actions	Slot	None	No		Add button items.

Options

Size

Label	Value
Extra small	stat--xs
Small	stat--sm
Medium	stat--md
Large	stat--lg
Extra large	stat--xl

Tabs tabs

Fields

Label	Field name	Nature	Type	Required	Default	Description
Placement	placement	Prop - Config	Enum	No		Select the placement of the tabs.
Size	size	Prop - Config	Enum	No		Select the size of the tabs.
Style	style	Prop - Config	Enum	No	tabs-border	Select the style of the tabs.
Items	items	Slot	None	No		Add tab items.

Options

Placement

Label	Value
Top	tabs-top
Bottom	tabs-bottom

Size

Label	Value
Extra small	tabs-xs
Small	tabs-sm
Medium	tabs-md
Large	tabs-lg
Extra large	tabs-xl

Style

Label	Value
Box	tabs-box
Border	tabs-border
Lift	tabs-lift

Timeline timeline

Element

Elements are atomistic components that help build Content.

Heading heading

Provides a heading with a number of variations.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Heading	heading	Prop - Data	String	No		The heading.
Level	level	Prop - Data	Enum	No	2	Select the heading level.
Color	color	Prop - Config	Enum	No		Select the colour of the heading.
Alignment	alignment	Prop - Config	Enum	No		Select the alignment of the heading.
URL	url	Prop - Config	String	No		Specify a URL to make the heading a link.
Use display font	use_display_font	Prop - Data	Boolean	No		Enable to apply the display font settings to the heading.

Options

Level

Label	Value
	1
	2
	3
	4
	5
	6
1	1
2	2
3	3
4	4
5	5
6	6

Color

Label	Value
Primary	primary-content
Secondary	secondary-content
Accent	accent-content
Neutral	neutral-content
Info	info-content
Success	success-content
Warning	warning-content
Error	error-content

Alignment

Label	Value
Start	start
Center	center
End	end
Justify	justify

Icon icon

Provides a icon with a number of variants.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Size	size	Prop - Config	Enum	No	icon-size--xs	Select the size of the icon.
Icon	icon	Prop - Data	String	No		Specify the name of the icon.

Options

Size

Label	Value
Extra small	icon-size--xs
Small	icon-size--sm
Medium	icon-size--md
Large	icon-size--lg
Extra large	icon-size--xl

Image image

Provides an image with some basic controls on size and links.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Image	image	Prop - Data	Object - Image	No		Image object to display.
Width	width	Prop - Config	Number	No	800	Width in pixels.
Alt	alt	Prop - Data	String	No		Alternative text describing the image.
Loading	loading	Prop - Data	Enum	No	lazy	Select the method of loading the image.
URL	url	Prop - Data	String	No		URL of the image.

Options

Loading

Label	Value
Eager	eager
Lazy	Lazy

Image - canvas image_canvas

Canvas version of an image to handle Canvas specific settings.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Image	image	Prop - Data	Object - Image	No		Image object to display.
Width	width	Prop - Config	Number	No	800	Width in pixels.
Alt	alt	Prop - Config	String	No		Alternative text describing the image.
Loading	loading	Prop - Config	Enum	No	lazy	Select the method of loading the image.
URL	url	Prop - Data	String	No		URL of the image.

Options

Loading

Label	Value
Eager	eager
Lazy	Lazy

Button button

Provides a flexible button with variants for colours, sizes and icons,.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Text	text	Prop - Data	String	No		Label for the button.
URL	url	Prop - Data	String	No		URL for the button link.
Label	label	Prop - Data	String	No		ARIA label for the button. Add this if there is no text for the button.
Icon	icon	Prop - Data	Enum	No		Icon for the button.
Icon position	icon_position	Prop - Data	Enum	No		Select the position of the icon at the start or end.
Color	color	Prop - Config	Enum	No		Select the color of the button.
Size	size	Prop - Config	Enum	No		Select the size of the button.
Style	style	Prop - Config	Enum	No		Select the style of the button.
Shape	shape	Prop - Config	Enum	No		Select the shape of the button.
Display	display	Prop - Config	Enum	No		Select how the button should be displayed.

Options

Icon

Label	Value
Add: Plus	plus
Add: Plus circle	plus-circle
Add: Plus square	plus-square
Confirm: Check	check
Confirm: Check circle	check-circle
Confirm: Floppy disk	floppy-disk
Remove: Trash	trash
Remove: Trash simple	trash-simple
Remove: X	x
Remove: X circle	x-circle
Edit: Pencil	pencil
Edit: pencil-simple	pencil-simple
Edit: pencil-line	pencil-line
Search: magnifying-glass	magnifying-glass
Search: magnifying-glass-plus	magnifying-glass-plus
Direction: arrow-right	arrow-right
Direction: caret-right	caret-right
Direction: arrow-left	arrow-left
Direction: caret-left	caret-left
Transfer: download-simple	download-simple
Transfer: upload-simple	upload-simple
Transfer: export	export
Transfer: share-network	share-network
Authenticate: Sign in	sign-in
Authenticate: Sign out	sign-out
Engagement: Heart	heart
Engagement: Thumbs up	thumbs-up
Engagement: Star	star
Engagement: Bookmark simple	bookmark-simple
Settings: Gear	gear
Settings: Sliders	sliders
Settings: Dots three outline	dots-three-outline
Comms: Chat centered dots	chat-centered-dots
Comms: Paper plane tilt	paper-plane-tilt
Comms: Phone	phone
Copy: Copy	copy
Copy: Clipboard	clipboard

Icon position

Label	Value
Start	icon-position--start
End	icon-position--end

Color

Label	Value
Primary	btn-primary
Secondary	btn-secondary
Accent	btn-accent
Neutral	btn-neutral
Info	btn-info
Success	btn-success
Warning	btn-warning
Error	btn-error

Size

Label	Value
Extra small	btn-xs
Small	btn-sm
Medium	btn-md
Large	btn-lg
Extra large	btn-xl

Style

Label	Value
Outline	btn-outline
Dash	btn-dash
Soft	btn-soft
Ghost	btn-ghost
Link	btn-link

Shape

Label	Value
Square	btn-square
Circle	btn-circle

Display

Label	Value
Wide	btn-wide
Block	btn-block

Join (group items) join

Fields

Label	Field name	Nature	Type	Required	Default	Description
Direction	direction	Prop - Config	Enum	No		Select the join direction.
Items	items	Slot	None	No		Add button items.

Options

Direction

Label	Value
Horizontal	join-horizontal
Vertical	join-vertical

Modal modal

Fields

Label	Field name	Nature	Type	Required	Default	Description
Placement	placement	Prop - Data	Enum	No		Select the placement of the modal box on the page.
Action	action_item	Slot	None	No		Add button item to open and close the modal.
Box	box_items	Slot	None	No		Add content items to the modal box.

Options

Placement

Label	Value
Top	modal-top
Middle	modal-middle
Bottom	modal-bottom
Start	modal-start
End	modal-end

Child

Children are atomistic componets that are used in a specific parent.

Accordion accordion

Fields

Label	Field name	Nature	Type	Required	Default	Description
Title	title	Prop - Data	String	No		Title of the accordion.
Content	content	Prop - Data	String - HTML	No		Content of the accordion.
Prose size	prose_size	Prop - Data	Enum	No		Select the size of prose to make it bigger or smaller.
Icon	icon	Prop - Config	Enum	No	collapse-plus	Select the icon to use for the accordion.
Force	force	Prop - Config	Enum	No		Select whether the accordion should be open or closed.

Options

Prose size

Label	Value
Small	prose-sm
Base	prose-base
Large	prose-lg
Extra large	prose-xl
Extra extra large	prose-2xl

Icon

Label	Value
Plus/Minus	collapse-plus
Arrow icon	collapse-arrow

Force

Label	Value
Force open	collapse-open
Force close	collapse-close

Tab tab

Fields

Label	Field name	Nature	Type	Required	Default	Description
Label	label	Prop - Data	String	No		Label the tab content.
Content	content	Prop - Data	String - HTML	No		Content to display in the tab.
Prose size	prose_size	Prop - Data	Enum	No		Select the size of prose to make it bigger or smaller.
Icon	icon	Slot	None	No		Add icon item.

Options

Prose size

Label	Value
Small	prose-sm
Base	prose-base
Large	prose-lg
Extra large	prose-xl
Extra extra large	prose-2xl

Timeline item timeline_item

Background

Modifier components used for adding background presnetational effects such as images and video.

Radial Gradient Background radial_gradient_modifier

Image Background image_background

Adds a background image to a component, with many rich controls.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Background Image	image	Prop - Data	Object - Image	No		Background image to display.
Image position	position	Prop - Config	Enum	No	center center	Select how the background is to be positioned.
Image style	style	Prop - Config	Enum	No	cover	Select the image style.
Opacity	opacity	Prop - Config	Enum	No		Select the opacity level. 30% will reveal 70% of the colour palette.
Media query	media_query	Prop - Config	String	No		Define a media query to control the application of the background, e.g., (min-width: 768px).

Options

Image position

Label	Value
	left top
	left center
	left bottom
	center top
	center center
	center bottom
	right top
	right center
	right bottom

Image style

Label	Value
	cover
	contain
	no-repeat
	repeat
	repeat-x
	repeat-y

Opacity

Label	Value
0	0
0.1	10
0.2	20
0.3	30
0.4	40
0.5	50
0.6	60
0.7	70
0.8	80
0.9	90
1	100

Parallax Background parallax_background

Adds a scrolling parallax image based on a users scroll position of the parent component.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Image	image	Prop - Data	Object - Image	No		Image to display as the background.
Speed	speed	Prop - Config	Integer	No	150	Control speed and direction (-100 to 200). 0 = static, 100 = scroll, 200 = 2x scroll, -100 = reverse scroll.
Opacity	style	Prop - Config	Enum	No		Select the opacity level. 30% will reveal 70% of the colour palette.
Media query	media_query	Prop - Config	String	No		Define a media query to control the application of the background, e.g., (min-width: 768px).

Options

Opacity

Label	Value
0	0
0.1	10
0.2	20
0.3	30
0.4	40
0.5	50
0.6	60
0.7	70
0.8	80
0.9	90
1	100

Video Background video_background

Adds a background video to a component.

Fields

Label	Field name	Nature	Type	Required	Default	Description
URL	url	Prop - Config	String	No		URL of background video. e.g. YouTube URL.
Opacity	style	Prop - Config	Enum	No		Select the opacity level. 30% will reveal 70% of the colour palette.
Media query	media_query	Prop - Config	String	No		Define a media query to control the application of the background, e.g., (min-width: 768px).

Options

Opacity

Label	Value
0	0
0.1	10
0.2	20
0.3	30
0.4	40
0.5	50
0.6	60
0.7	70
0.8	80
0.9	90
1	100

Behavior

Modifier components used for altering the way content behaves or reacts to user input.

Scroll Reveal Beahvior scroll_reveal_behavior

Controls to display of items based on a users scroll position of the parent component.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Delay	delay	Prop - Config	Integer	No	0	Delay (ms) before the animation. Default: "0".
Distance	distance	Prop - Config	String	No	50px	Starting displacement distance (e.g. 100%, 50px). Default: "50px".
Duration	duration	Prop - Config	Integer	No	500	Duration (ms) of the animation. Default: "500".
Mobile	mobile	Prop - Config	Boolean	No	true	Enable on Mobile.
Opacity	opacity	Prop - Config	Integer	No	0	Starting opacity (0 - 100). Default: "0".
Origin	origin	Prop - Config	Enum	No	bottom	Select the direction the object moves from.
Scale	scale	Prop - Config	Integer	No	100	Starting zoom factor (0 - 100). Default: "100".
Sequence interval	sequence_interval	Prop - Config	Integer	No	0	Duration (ms) between items displaying.
Sequence selector	sequence_selector	Prop - Config	String	No		Child selector to select the items contained in the object.
Media query	media_query	Prop - Config	String	No		Define media query to control the application of the behavior.

Options

Origin

Label	Value
Bottom	bottom
Left	left
Top	top
Right	right

Palette Swap Behavior palette_swap_behavior

Controls the toggling of colour palettes based on a users scroll position of the parent component.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Duration	duration	Prop - Config	Integer	No	500	Duration (ms) of the transition.
Swap	swap	Prop - Config	Enum	No	standard	Select the palette to swap into.
Threshold	threshold	Prop - Config	Integer	No	50	Threshold for the amount of the element to be within the view port.
Media query	media_query	Prop - Config	String	No		Define media query to control the application of the behavior.

Options

Swap

Label	Value
Standard	standard
Alternate	alternate
Primary	primary
Secondary	secondary
Accent	accent
Neutral	neutral

Super

Special components which site under the hood.

Base base

Paragraph and Block templating in a convenient Section like component that manages the heading, intro and other structural aspects.

Fields

Label	Field name	Nature	Type	Required	Default	Description
Heading	heading	Prop - Data	String	No		The heading for the component.
Intro	intro	Prop - Data	String - HTML	No		Introductory content for the component.
Prose size	prose_size	Prop - Data	Enum	No		Select the size of prose to make it bigger or smaller.
More Text	more_text	Prop - Data	String	No		Call to action text.
More URL	more_url	Prop - Data	String	No		Call to action URL.
Content	base_content	Slot	None	No		Add content items.

Options

Prose size

Label	Value
Small	prose-sm
Base	prose-base
Large	prose-lg
Extra large	prose-xl
Extra extra large	prose-2xl

Menu Simple menu_simple

Menu Dropdown menu_dropdown

Menu Mega menu_mega

Menu Socials menu_socials

Menu Footer menu_footer

Menu Sidebar menu_sidebar