> For the complete documentation index, see [llms.txt](https://docs.morpht.com/convivial-gov/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.morpht.com/convivial-gov/components.md). # 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`