/

<TextSplits> Component

Display an array of text-split components, automatically switching to the appropriate component for each array item.

Share
Code Editor

Props

NameDescription
textSplits
object
An array of text split entries. Each entry should have a textSplit property, which should consist of props for <TextSplit />. It should also have one of codeBlock, image, or logoGrid properties, which will be passed to the corresponding text-split-with-* component.
Array members must be of the type below:
textSplits[x]
object
Array entry to pass to the <TextSplitWith* /> component.
Object contains nested props, see below:
textSplits[x].textSplit
object
Props for the <TextSplit /> part.
Object contains nested props, see below:
textSplits[x].textSplit.heading
string
headline above the text content
textSplits[x].textSplit.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.
textSplits[x].textSplit.theme
string
Options: "light", "dark", "gray"
textSplits[x].textSplit.product
string
Styles the button with a color based on a HashiCorp product
Options: "neutral", "hashicorp", "nomad", "consul", "terraform", "vault", "packer", "vagrant", "waypoint", "boundary"
textSplits[x].textSplit.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:
textSplits[x].textSplit.checkboxes[x]
string
text displayed to the right of the check
textSplits[x].textSplit.links
array
call-to-action links to be displayed below the text
Array members must be of the type below:
textSplits[x].textSplit.links[x]
object
Object contains nested props, see below:
textSplits[x].textSplit.links[x].text
string
link text
textSplits[x].textSplit.links[x].url
string
link URL
textSplits[x].textSplit.links[x].type
string
Options: "inbound", "outbound", "anchor"
textSplits[x].textSplit.linkStyle
string
styling for the links, can be as links or buttons
Options: "links", "buttons"
textSplits[x].textSplit.textSide
string
Options: "left", "right"
textSplits[x].textSplit.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.
textSplits[x].textSplit.className
string
Optional className to add to the root element
textSplits[x].codeBlock
object
If used, will render a <TextSplitWithCodeBlock />, and pass these props to codeBlock.
Object contains nested props, see below:
textSplits[x].codeBlock.className
string
A className string which will be added to the outer element of this component.
textSplits[x].codeBlock.code*
string
A string of highlighted HTML or React elements. These elements will be rendered into a <pre><code> container.

A plain string can be passed, but it will not be highlighted.
textSplits[x].codeBlock.language
string
Used to set a global "language-*" className on both the pre and code element, for compatibility with language-specific highlight styles. This value should be identical to the language used to generate the highlighted code.
textSplits[x].codeBlock.theme
string
Sets the color theme for the code block. Intended to match light and dark system appearance, for example through CSS @media (prefers-color-scheme).
Options: "light", "dark"
textSplits[x].codeBlock.hasBarAbove
boolean
Intended for automatic use in CodeTabs, not meant as a consumer-facing prop. Set to true to remove border rounding from the top of the CodeBlock.
textSplits[x].codeBlock.options
object
Additional options that enable supplementary code-block features.
Object contains nested props, see below:
textSplits[x].codeBlock.options.showChrome
boolean
Set to true to display a window chrome bar UI above the code block.
textSplits[x].codeBlock.options.highlight
string
Specify line numbers to highlight. Supports a comma-separate list of numbers and number ranges, where number ranges are dash-separated pairs of numbers.

For example: "5" highlights line 5; "2,5" highlights lines 2 and 5; "2-5" highlights lines 2, 3, 4, and 5; "2,6-8,11" highlights line 2, 6, 7, 8 and 11.
textSplits[x].codeBlock.options.lineNumbers
boolean
Set to true to display line numbers on the left edge of the code block.
textSplits[x].codeBlock.options.showClipboard
boolean
Set to true to show the copy-to-clipboard prompt and functionality.
textSplits[x].image
object
If used, will render a <TextSplitWithImage />, and pass these props to image.
Object contains nested props, see below:
textSplits[x].image.url
string
The image source, must be from datocms to work with this component
textSplits[x].image.alt
string
The alt description for the image, optional but strongly encouraged
textSplits[x].image.format
string
Just the extension of the image. If not provided, will be auto-detected via the URL
textSplits[x].image.steps
array
An array of image widths that the image should be available at - the image closest to the current screen width will be used. Default value provided.
textSplits[x].image.sizes
string
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes - default value provided.
textSplits[x].image.aspectRatio
array
Optional, automatically crops the image to an aspect ratio. The first two items in the array are the ratio (ex. [16,9]), and the third is the base width that images will be cropped to in IE, which doesn't support srcset (ex. [16,9,500]). If string is provided, brackets should be excluded (ex. 16,9,500). String will be converted to array.
textSplits[x].image.imgixOptions
object
Additional imgix url parameters to add to the image (reference: https://docs.imgix.com/apis/url)
textSplits[x].logoGrid
object
If used, will render a <TextSplitWithLogoGrid />, and pass these props to logoGrid.
Array members must be of the type below:
textSplits[x].logoGrid[x]
object
Object option for a logoGrid array item. Note url must be present for the item to render. Properties are listed below.
Object contains nested props, see below:
textSplits[x].logoGrid[x].url
string
The image source, must be from datocms to work with this component
textSplits[x].logoGrid[x].alt
string
The alt description for the image, optional but strongly encouraged
textSplits[x].logoGrid[x].linkUrl
string
A url to which the logo grid item should link
textSplits[x].logoGrid[x].format
string
Just the extension of the image. If not provided, will be auto-detected via the URL
textSplits[x].logoGrid[x].steps
array
An array of image widths that the image should be available at - the image closest to the current screen width will be used. Default value provided.
textSplits[x].logoGrid[x].sizes
string
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes - default value provided.
textSplits[x].logoGrid[x].aspectRatio
array
Optional, automatically crops the image to an aspect ratio. The first two items in the array are the ratio (ex. [16,9]), and the third is the base width that images will be cropped to in IE, which doesn't support srcset (ex. [16,9,500]). If string is provided, brackets should be excluded (ex. 16,9,500). String will be converted to array.
textSplits[x].logoGrid[x].imgixOptions
object
Additional imgix url parameters to add to the image (reference: https://docs.imgix.com/apis/url)