For the complete documentation index, see llms.txt. This page is also available as Markdown.

Components

Global

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

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

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.

Scheme switcher scheme_switcher

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

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

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

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

Last updated