<TextSplits> Component

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

Share
Code Editor
<TextSplits
textSplits={[
{
textSplit: {
heading: 'Example with Logo Grid',
content:
'Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
},
logoGrid: [
{
"url": "https://www.datocms-assets.com/2885/1566919170-aws.svg",
"alt": "AWS",
"linkUrl": "/integrations/aws"
},
{
"url": "https://www.datocms-assets.com/2885/1539799149-azure-stacked-color.svg",
"alt": "Microsoft Azure",
"linkUrl": "/integrations/microsoft"
},
{
"url": "https://www.datocms-assets.com/2885/1513617132-google-cloud.svg",
"alt": "Google Cloud",
"linkUrl": "/integrations/google-cloud"
},
{
"url": "https://www.datocms-assets.com/2885/1566919186-oracle.svg",
"alt": "Oracle",
"linkUrl": "/integrations/oracle"
},
{
"url": "https://www.datocms-assets.com/2885/1521842502-alibaba.png",
"alt": "Alibaba Cloud",
"linkUrl": "/integrations/alibaba"
},
{
"url": "https://www.datocms-assets.com/2885/1616772767-vmware.png",
"alt": "Vmware",
"linkUrl": "/integrations/vmware"
},
{
"url": "https://www.datocms-assets.com/2885/1540418681-kubernetes.png",
"alt": "Kubernetes"
},
{
"url": "https://www.datocms-assets.com/2885/1566919172-datadog.svg",
"alt": "Datadog"
},
{
"url": "https://www.datocms-assets.com/2885/1550621046-openstacklogovertical.svg",
"alt": "Openstack"
}
],
},
{
textSplit: {
heading: 'Example with Code Block',
content:
'Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
textSide: 'right',
},
codeBlock: {
options: { showWindowBar: true },
code: `task <span class="token string">"webservice"</span> <span class="token punctuation">{</span>
<span class="token property">driver</span> <span class="token punctuation">=</span> <span class="token string">"docker"</span>
<span class="token keyword">config</span> <span class="token punctuation">{</span>
<span class="token property">image</span> <span class="token punctuation">=</span> <span class="token string">"redis:3.2"</span>
<span class="token keyword">labels</span> <span class="token punctuation">{</span>
<span class="token property">group</span> <span class="token punctuation">=</span> <span class="token string">"webservice-cache"</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
`,
language: 'hcl',
},
},
{
textSplit: {
heading: 'Example with Image',
content:
'Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
},
image: {
url: 'https://www.datocms-assets.com/2885/1508522484-share.jpg',
alt: 'My special alt text',
},
},
]}
/>

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.onCopyCallback
function
Optional callback that is called when copy success state changes to true or false. When code is successfully copied using the "Copy" button, it changes to true. If there is an error when copying code, it changes to false.
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].codeBlock.options.wrapCode
boolean
Set to true to make long lines of code wrap rather than overflow.
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)