Anchor
The anchor component is a simple way to add anchor links to a page. To create an anchor link, drag the component to where you want the link, and enter the ID. You can then use the link anywhere as #{your-id}.
Badge
The badge component is a small pill-style component with an optional icon. It has two styles: Primary and secondary. The icon can be placed before or after the text, or omitted.
Primary style
Secondary style
Blockquote
The blockquote component is a simple, text-based way to call out a quotation.
“To confine our attention to terrestrial matters would be to limit the human spirit.”
Button
The button component is a standard button element. It has four styles: Primary, Secondary, Primary inverted and Secondary inverted, and three sizes: Large, Medium and Small. It comes with a preset list of icons commonly used with buttons. The icon can be placed before or after the text, or omitted. The button can also be disabled.
Primary style
Secondary style
Primary inverted style
Secnodary inverted style
Heading
The heading component provides a plain text element with size, color, alignment and link options. The heading level and size can be adjusted separately, and if no heading level is provided, the text is wrapped in a span tag instead of a heading tag.
Heading 8XL
Heading 7XL
Heading 6XL
Heading 5XL
Heading 4XL
Heading 3XL
Heading 2XL
Heading XL
Heading L
Heading 4XL no heading levelHeading 4XL primary
Heading 4XL muted
Heading 4XL inverted
Heading 4XL accent
To place an icon inline text, you can use a Group component with Item direction: Horizontal.
Text component in a group with an icon
Image
The image component provides an element for the media image library, with options for aspect ratio, link, corner radius and caption.
Text
The text component provides a formatted text element with inline options for bold, italics, underline, alignment, links, and lists. It also provides options for size and text color.
Formatted text element for longer text that needs formatting, links or lists.
- Bold text
- Italic text
- Underlined text
And do ordered lists as well:
- Item 1
- Item 2
- Item 3
Text 12px
Text 14px
Text 16px (default)
Text 18px
Text 20px
Text 24px
Text 32px
Text with primary color.
Text with inverted color.
Video
The video component provides an element for displaying a local video, loaded from the media library. The video has options for autoplay, displaying the controls, muting the audio and playing on a loop.