<Callouts> Component

Display a set of items, each with a title, description, option links, and an optional icon.

Share
Code Editor

Where it's used

0.x.x
Loading 0.x.x releases...
1.x.x
Loading 1.x.x releases...
2.x.x
Loading 2.x.x releases...
3.x.x
Loading 3.x.x releases...
4.x.x
Loading 4.x.x releases...
5.x.x
Loading 5.x.x releases...
6.x.x
Loading 6.x.x releases...
7.x.x
Loading 7.x.x releases...
8.x.x
Loading 8.x.x releases...

Props

NameDescription
heading
string
Title text for the block of callouts.
subheading
string
Descriptive text that will be shown below the heading.
centerHeading
boolean
Determines whether the heading will be centered
layout
string
Determines column layout (when space is available)
Options: "two-up", "three-up", "four-up"
theme
string
Background color context for the component and items within it
Options: "light", "dark"
className
string
Optional className to add to the root element
product
string
Product name for color theming
Options: "hashicorp", "terraform", "vault", "nomad", "consul", "packer", "vagrant", "boundary", "waypoint"
items
array
An array of item objects, each with properties { icon, heading, content, link }. . heading is a string. content can be either a string, or a render function for custom content - the render function will be provided a props object { theme, product }. link is an object with properties { text, url, type }. link.text is a string. link.url is a string. link.type is one of "inbound", "outbound", or "anchor", and sets the icon shown next to the link.
Array members must be of the type below:
items[x]
object
Object contains nested props, see below:
items[x].icon
string|function
A SVG string, or a render function for an SVGR component - the render function is provided a props object { theme, product } to facilitate matching the parent component's appearance
items[x].heading
string
The heading text within the callout
items[x].content
string|function
Can be either a string, or a render function for custom content - the render function will be provided a props object { theme, product }
items[x].link
object
creates a button linking to a URL within the callout
Object contains nested props, see below:
items[x].link.text
string
the text that is linked
items[x].link.url
string
url that is linked to
items[x].link.type
string
sets the icon shown next to the link
Options: "inbound", "outbound", "anchor"

Examples

"Dark Theme"

Example Main Heading

Example Item Heading

Sed posuere consectetur est at lobortis.

Example Item Heading 2

Sed posuere consectetur est at lobortis.

"Two Up" Layout.

Share
Code Editor

Two Up with plain icons

Share
Code Editor

"Three Up" Layout:

Share
Code Editor

"Three Up" layout with heading:

Share
Code Editor

"Three Up" layout with dark icons:

Share
Code Editor

"Three Up" layout with dark text:

Share
Code Editor

"Four Up" layout:

Share
Code Editor

"Six Up" layout:

Share
Code Editor