<TextSplitWithImage> ComponentDisplay an image alongside a title, description, and links.
<TextSplitWithImagetextSplit={{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'}}/>
| Name | Description |
|---|---|
textSplit*object | Data sent to the TextSplit component Object contains nested props, see below: |
textSplit.headingstring | headline above the text content |
textSplit.contentfunction | 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.themestring | |
textSplit.productstring | Styles the button with a color based on a HashiCorp product |
textSplit.checkboxesarray | 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.linksarray | 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].textstring | link text |
textSplit.links[x].urlstring | link URL |
textSplit.links[x].typestring | |
textSplit.linkStylestring | styling for the links, can be as links or buttons |
textSplit.textSidestring | |
textSplit.childrenReact.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.classNamestring | Optional className to add to the root element |
image*object | Data passed to the Image component Object contains nested props, see below: |
image.urlstring | The image source, must be from datocms to work with this component |
image.altstring | The alt description for the image, optional but strongly encouraged |
image.formatstring | Just the extension of the image. If not provided, will be auto-detected via the URL |
image.stepsarray | 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.sizesstring | https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes - default value provided. |
image.aspectRatioarray | 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.imgixOptionsobject | Additional imgix url parameters to add to the image (reference: https://docs.imgix.com/apis/url) |
classNamestring | Optional className to add to the root element of the TextSplit. If textSplit.className is provided, it will override this prop. |
Text on the right side:
<TextSplitWithImagetextSplit={{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'}}/>