Appearance
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
json
{
"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
json
{
"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
json
{
"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
json
{
"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
json
{
"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
json
{
"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
json
{
"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
json
{
"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
json
{
"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
json
{
"type": "TwoPlusOneLayout",
"childrenA": [...components],
"childrenB": [...components],
}
Screenshot
Sections
FullPageSection
A full page section with a title and children.
Properties
Example
json
{
"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
json
{
"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
json
{
"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
json
{
"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
json
{
"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
json
{
"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
json
{
"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
json
{
"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
json
{
"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
Example
json
{
"type": "TabPanel",
"tabTitle": "Tab Title",
"children": [...layoutAndSectionComponents]
}