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

Property	Type	Required	Description
type	"Component"	Yes	The type label of the component.

Example

{
  "type": "Component"
}

General

BorderedCard

A standard card component with a border.

Properties

Property	Type	Required	Description
type	"BorderedCard"	Yes	The type label of the component.
title	string	Yes	The title of the card, placed in the card header. Optional.
lozenge	LozengeData	Yes	A lozenge that will display next to the title in the card header. Optional.
children	ComponentData	Yes	The children components to place in the card body.

Example

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

Screenshot

FieldValue

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

Properties

Property	Type	Required	Description
type	"FieldValue"	Yes	The type of the component.
key	string	Yes	The key of the field value.
value	string	No	The value of the field value.
appearance	( "neutral", "danger", "information", "discovery", "success", "warning" )	No	The appearance of the field value. Will display 'neutral' if not set.

Example

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

Screenshot

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

Property	Type	Required	Description
type	"FormTextField"	Yes	The type label of the component.
label	string	Yes	The label of the input field.
value	string	Yes	The value placed inside the input field.
helper	string	Yes	Helper text to display for the field.
readonly	boolean	Yes	Controls if the input field is readonly.

Example

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

Screenshot

Lozenge

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

Properties

Property	Type	Required	Description
type	"Lozenge"	Yes	The type label of the component.
content	string	Yes	The text content of the lozenge.
appearance	( "neutral", "danger", "information", "discovery", "success", "warning" )	No	The appearance of the lozenge. Will display 'neutral' if not set.
emphasis	( "bold", "default" )	No	The emphasis of the lozenge. Will display 'default' if not set.

Example

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

Screenshot

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

Property	Type	Required	Description
type	"StackedInformationGroup"	Yes	The type label of the component.
title	string	Yes	The title of the group, displayed in the card header.
children	Array<FieldValue>	Yes	The field values to display.

Example

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

Screenshot

Layouts

EqualThirdsLayout

A layout with three equal-width columns of children.

Properties

Property	Type	Required	Description
type	"EqualThirdsLayout"	Yes	The type label of the component.
childrenA	Array<Component>	Yes	The first list of children components.
childrenB	Array<Component>	Yes	The second list of children components.
childrenC	Array<Component>	Yes	The third list of children components.

Example

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

Screenshot

FullWidthLayout

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

Properties

Property	Type	Required	Description
type	"FullWidthLayout"	Yes	The type label of the component.
children	Array<Component>	Yes	The list of children components.

Example

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

Screenshot

OnePlusTwoLayout

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

Properties

Property	Type	Required	Description
type	"OnePlusTwoLayout"	Yes	The type label of the component.
childrenA	Array<Component>	Yes	The first list of children components.
childrenB	Array<Component>	Yes	The second list of children components.

Example

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

Screenshot

TwoPlusOneLayout

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

Properties

Property	Type	Required	Description
type	"TwoPlusOneLayout"	Yes	The type label of the component.
childrenA	Array<Component>	Yes	The first list of children components.
childrenB	Array<Component>	Yes	The second list of children components.

Example

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

Screenshot

Sections

FullPageSection

A full page section with a title and children.

Properties

Property	Type	Required	Description
type	"FullPageSection"	Yes	The type label of the component.
title	string	Yes	The title of the section.
children	Array<>	Yes	The children layout components to place in the section body. Must have at least one Layout component at the top level.

Example

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

Typography

HeadingLarge

A title component meant for the top of a page.

Properties

Property	Type	Required	Description
type	"HeadingLarge"	Yes	The type label of the component.
content	string	Yes	The title of the page.

Example

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

Screenshot

HeadingMedium

A title component meant for the top of a page.

Properties

Property	Type	Required	Description
type	"HeadingMedium"	Yes	The type label of the component.
content	string	Yes	The title of the page.

Example

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

Screenshot

HeadingSmall

A title component meant for the top of a page.

Properties

Property	Type	Required	Description
type	"HeadingSmall"	Yes	The type label of the component.
content	string	Yes	The title of the page.

Example

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

Screenshot

HeadingXSmall

A title component meant for the top of a page.

Properties

Property	Type	Required	Description
type	"HeadingXSmall"	Yes	The type label of the component.
content	string	Yes	The title of the page.

Example

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

Screenshot

HeadingXXSmall

The header text for a UI section.

Properties

Property	Type	Required	Description
type	"HeadingXXSmall"	Yes	The type label of the component.
content	string	Yes	The title of the section.

Example

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

Screenshot

HyperlinkMedium

A simple link to another URL.

Properties

Property	Type	Required	Description
type	"HyperlinkMedium"	Yes	The type label of the component.
content	string	Yes	The text content of the paragraph.
link	string	Yes	The URL to navigate to.
openNewTab	boolean	Yes	Whether to open the URL in a new tab.

Example

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

Screenshot

ParagraphMedium

A paragraph of text in medium size.

Properties

Property	Type	Required	Description
type	"ParagraphMedium"	Yes	The type label of the component.
content	string	Yes	The text content of the paragraph.

Example

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

Screenshot

ParagraphSmall

A paragraph of text in small size.

Properties

Property	Type	Required	Description
type	"ParagraphSmall"	Yes	The type label of the component.
content	string	Yes	The text content of the paragraph.

Example

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

Screenshot

Views

TabPanel

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

Properties

Property	Type	Required	Description
type	"TabPanel"	Yes	The type label of the component.
tabTitle	string	Yes	The text to put into the tab button.
children	Array<>	Yes	The children components to place in the tab body. Must have Layout or Section components at the top level.

Example

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