<TextSplit> Component

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...

Props

NameDescription
heading
string
headline above the text content
content
function | string
Content to be shown under the heading. Accepts either a string or React content. If a string is passed, it will be rendered into paragraph tags. Each newline in the string will create a new paragraph.
theme
string
Options: "light", "dark", "gray"
product
string
Styles the button with a color based on a HashiCorp product
Options: "neutral", "hashicorp", "nomad", "consul", "terraform", "vault", "packer", "vagrant", "waypoint", "boundary"
checkboxes
array
A set of checked-off checkbox images typically used as a bulleted list to describe a set of features
Array members must be of the type below:
checkboxes[x]
string
text displayed to the right of the check
links
array
call-to-action links to be displayed below the text
Array members must be of the type below:
links[x]
object
Object contains nested props, see below:
links[x].text
string
link text
links[x].url
string
link URL
links[x].type
string
Options: "inbound", "outbound", "anchor"
linkStyle
string
styling for the links, can be as links or buttons
Options: "links", "buttons"
textSide
string
Options: "left", "right"
children
React.Element
Children are displayed opposite the text block and can be any arbitrary react code. If using a code example, image, or logo grid, we recommend using the pre-set components for that seen below.

Examples

Share
Code Editor

With checkboxes:

Share
Code Editor

"Dark Theme"

Share
Code Editor

"Gray Theme"

Share
Code Editor