`<TextSplits>` Component

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


<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

Name	Description
`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)

<TextSplits> Component

Code Editor

Props

`<TextSplits>` Component