/

<TextSplitWithImage> Component

Display an image alongside a title, description, and links.

Share
Code Editor
<TextSplitWithImage

  textSplit={{

    heading: 'Heading',

    content: 'Vestibulum id ligula porta felis euismod semper.',

    linkStyle: 'links',

    links: [{

      text: 'Example Link',

      url: 'https://www.hashicorp.com',

      type: 'outbound'

    }]

  }}

  image={{

    url: 'https://www.datocms-assets.com/2885/1508522484-share.jpg',

    alt: 'My special alt text'

  }}

/>

Where it's used

Latest:4.3.1
Search with

Releases

Latest:4.3.1
registry.npmjs.org
[object Object]
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...

Props

NameDescription
textSplit*
object
Data sent to the TextSplit component
Object contains nested props, see below:
textSplit.heading
string
headline above the text content
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.
textSplit.theme
string
Options: "light", "dark", "gray"
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"
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:
textSplit.checkboxes[x]
string
text displayed to the right of the check
textSplit.links
array
call-to-action links to be displayed below the text
Array members must be of the type below:
textSplit.links[x]
object
Object contains nested props, see below:
textSplit.links[x].text
string
link text
textSplit.links[x].url
string
link URL
textSplit.links[x].type
string
Options: "inbound", "outbound", "anchor"
textSplit.linkStyle
string
styling for the links, can be as links or buttons
Options: "links", "buttons"
textSplit.textSide
string
Options: "left", "right"
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.
textSplit.className
string
Optional className to add to the root element
image*
object
Data passed to the Image component
Object contains nested props, see below:
image.url
string
The image source, must be from datocms to work with this component
image.alt
string
The alt description for the image, optional but strongly encouraged
image.format
string
Just the extension of the image. If not provided, will be auto-detected via the URL
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.
image.sizes
string
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes - default value provided.
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.
image.imgixOptions
object
Additional imgix url parameters to add to the image (reference: https://docs.imgix.com/apis/url)
className
string
Optional className to add to the root element of the TextSplit. If textSplit.className is provided, it will override this prop.

Examples

Text on the right side:

Share
Code Editor
<TextSplitWithImage

  textSplit={{

    textSide: 'right',

    heading: 'Heading',

    content: 'Vestibulum id ligula porta felis euismod semper.',

    linkStyle: 'links',

    links: [{

      text: 'Example Link',

      url: 'https://www.hashicorp.com',

      type: 'outbound'

    }]

  }}

  image={{

    url: 'https://www.datocms-assets.com/2885/1508522484-share.jpg',

    alt: 'My special alt text'

  }}

/>