Skip to content

Base

Component

The base UI Component shape that all others inherit from. If you see this referenced in the docs, it means you can place ANY component in that slot.

Properties

PropertyTypeRequiredDescription
type"Component"YesThe type label of the component.

Example

json
{
  "type": "Component"
}

General

BorderedCard

A standard card component with a border.

Properties

PropertyTypeRequiredDescription
type"BorderedCard"YesThe type label of the component.
titlestringYesThe title of the card, placed in the card header. Optional.
lozengeLozengeDataYesA lozenge that will display next to the title in the card header. Optional.
childrenComponentDataYesThe children components to place in the card body.

Example

json
{
  "type": "BorderedCard",
  "title": "My Card Title",
  "children": [...components]
}

Screenshot

BorderedCard

FieldValue

A field value is a key-value pair that can be displayed in a card.

Properties

PropertyTypeRequiredDescription
type"FieldValue"YesThe type of the component.
keystringYesThe key of the field value.
valuestringNoThe value of the field value.
appearance( "neutral", "danger", "information", "discovery", "success", "warning" )NoThe appearance of the field value. Will display 'neutral' if not set.

Example

json
{
  "type": "FieldValue",
  "key": "Name",
  "value": "John Doe",
  "appearance": "success"
}

Screenshot

FieldValue

FormTextField

A basic input type field used to display a piece of information that you want the user to be able to easily copy.

Properties

PropertyTypeRequiredDescription
type"FormTextField"YesThe type label of the component.
labelstringYesThe label of the input field.
valuestringYesThe value placed inside the input field.
helperstringYesHelper text to display for the field.
readonlybooleanYesControls if the input field is readonly.

Example

json
{
  "type": "FormTextField",
  "label": "Update UI URL",
  "value": "https://example.com",
  "helper": "Click to copy content to clipboard.",
  "readonly": true,
}

Screenshot

FormTextField

Lozenge

A coloured capsule used to indicate status or change with visual emphasis.

Properties

PropertyTypeRequiredDescription
type"Lozenge"YesThe type label of the component.
contentstringYesThe text content of the lozenge.
appearance( "neutral", "danger", "information", "discovery", "success", "warning" )NoThe appearance of the lozenge. Will display 'neutral' if not set.
emphasis( "bold", "default" )NoThe emphasis of the lozenge. Will display 'default' if not set.

Example

json
{
  "type": "Lozenge",
  "content": "A success lozenge",
  "appearance": "success",
  "emphasis": "bold"
}

Screenshot

Lozenge

StackedInformationGroup

A card that contains a title and a list of field values. Similar to what is shown on the right-side of a Jira issue.

Properties

PropertyTypeRequiredDescription
type"StackedInformationGroup"YesThe type label of the component.
titlestringYesThe title of the group, displayed in the card header.
childrenArray<FieldValue>YesThe field values to display.

Example

json
{
  "type": "StackedInformationGroup",
  "title": "My Stacked Info Group",
  "children": [...fieldValues]
}

Screenshot

StackedInformationGroup

Layouts

EqualThirdsLayout

A layout with three equal-width columns of children.

Properties

PropertyTypeRequiredDescription
type"EqualThirdsLayout"YesThe type label of the component.
childrenAArray<Component>YesThe first list of children components.
childrenBArray<Component>YesThe second list of children components.
childrenCArray<Component>YesThe third list of children components.

Example

json
{
  "type": "EqualThirdsLayout",
  "childrenA": [...components],
  "childrenB": [...components],
  "childrenC": [...components]
}

Screenshot

EqualThirdsLayout

FullWidthLayout

A layout with a single full-width column of children.

Properties

PropertyTypeRequiredDescription
type"FullWidthLayout"YesThe type label of the component.
childrenArray<Component>YesThe list of children components.

Example

json
{
  "type": "FullWidthLayout",
  "children": [...components]
}

Screenshot

FullWidthLayout

OnePlusTwoLayout

A layout with two columns of children in a 1:2 width ratio.

Properties

PropertyTypeRequiredDescription
type"OnePlusTwoLayout"YesThe type label of the component.
childrenAArray<Component>YesThe first list of children components.
childrenBArray<Component>YesThe second list of children components.

Example

json
{
  "type": "OnePlusTwoLayout",
  "childrenA": [...components],
  "childrenB": [...components],
}

Screenshot

OnePlusTwoLayout

TwoPlusOneLayout

A layout with two columns of children in a 2:1 width ratio.

Properties

PropertyTypeRequiredDescription
type"TwoPlusOneLayout"YesThe type label of the component.
childrenAArray<Component>YesThe first list of children components.
childrenBArray<Component>YesThe second list of children components.

Example

json
{
  "type": "TwoPlusOneLayout",
  "childrenA": [...components],
  "childrenB": [...components],
}

Screenshot

TwoPlusOneLayout

Sections

FullPageSection

A full page section with a title and children.

Properties

PropertyTypeRequiredDescription
type"FullPageSection"YesThe type label of the component.
titlestringYesThe title of the section.
childrenArray<>YesThe children layout components to place in the section body. Must have at least one Layout component at the top level.

Example

json
{
  "type": "FullPageSection",
  "title": "Section Title",
  "children": [...layoutComponents]
}

Typography

HeadingLarge

A title component meant for the top of a page.

Properties

PropertyTypeRequiredDescription
type"HeadingLarge"YesThe type label of the component.
contentstringYesThe title of the page.

Example

json
{
  "type": "HeadingLarge",
  "content": "Page Title"
}

Screenshot

HeadingLarge

HeadingMedium

A title component meant for the top of a page.

Properties

PropertyTypeRequiredDescription
type"HeadingMedium"YesThe type label of the component.
contentstringYesThe title of the page.

Example

json
{
  "type": "HeadingMedium",
  "content": "Page Title"
}

Screenshot

HeadingMedium

HeadingSmall

A title component meant for the top of a page.

Properties

PropertyTypeRequiredDescription
type"HeadingSmall"YesThe type label of the component.
contentstringYesThe title of the page.

Example

json
{
  "type": "HeadingSmall",
  "content": "Page Title"
}

Screenshot

HeadingSmall

HeadingXSmall

A title component meant for the top of a page.

Properties

PropertyTypeRequiredDescription
type"HeadingXSmall"YesThe type label of the component.
contentstringYesThe title of the page.

Example

json
{
  "type": "HeadingXSmall",
  "content": "Page Title"
}

Screenshot

HeadingXSmall

HeadingXXSmall

The header text for a UI section.

Properties

PropertyTypeRequiredDescription
type"HeadingXXSmall"YesThe type label of the component.
contentstringYesThe title of the section.

Example

json
{
  "type": "HeadingXXSmall",
  "content": "Section Title"
}

Screenshot

HeadingXXSmall

HyperlinkMedium

A simple link to another URL.

Properties

PropertyTypeRequiredDescription
type"HyperlinkMedium"YesThe type label of the component.
contentstringYesThe text content of the paragraph.
linkstringYesThe URL to navigate to.
openNewTabbooleanYesWhether to open the URL in a new tab.

Example

json
{
  "type": "HyperlinkMedium",
  "content": "This is a hyperlink."
  "link": "https://product-forge.dev",
  "openNewTab": true
}

Screenshot

HyperlinkMedium

ParagraphMedium

A paragraph of text in medium size.

Properties

PropertyTypeRequiredDescription
type"ParagraphMedium"YesThe type label of the component.
contentstringYesThe text content of the paragraph.

Example

json
{
  "type": "ParagraphMedium",
  "content": "This is a paragraph of medium size."
}

Screenshot

ParagraphMedium

ParagraphSmall

A paragraph of text in small size.

Properties

PropertyTypeRequiredDescription
type"ParagraphSmall"YesThe type label of the component.
contentstringYesThe text content of the paragraph.

Example

json
{
  "type": "ParagraphSmall",
  "content": "This is a paragraph of small size."
}

Screenshot

ParagraphSmall

Views

TabPanel

Tab panels are the top-level containers for modules that are displayed in tabs.

Properties

PropertyTypeRequiredDescription
type"TabPanel"YesThe type label of the component.
tabTitlestringYesThe text to put into the tab button.
childrenArray<>YesThe children components to place in the tab body. Must have Layout or Section components at the top level.

Example

json
{
  "type": "TabPanel",
  "tabTitle": "Tab Title",
  "children": [...layoutAndSectionComponents]
}