/

<TextSplitWithLogoGrid> Component

Display a logo grid alongside a title, description, and links.

Share
Code Editor

Where it's used

Latest:5.1.5
Search with

Releases

Latest:5.1.5
registry.npmjs.org
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...
5.x.x
Loading 5.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
logoGrid*
object
An array of logoGrid items.
Array members must be of the type below:
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:
logoGrid[x].url
string
The image source, must be from datocms to work with this component
logoGrid[x].alt
string
The alt description for the image, optional but strongly encouraged
logoGrid[x].linkUrl
string
A url to which the logo grid item should link
logoGrid[x].format
string
Just the extension of the image. If not provided, will be auto-detected via the URL
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.
logoGrid[x].sizes
string
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes - default value provided.
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.
logoGrid[x].imgixOptions
object
Additional imgix url parameters to add to the image (reference: https://docs.imgix.com/apis/url)

Examples

With 6 items, some linked:

Share
Code Editor

Dynamic imports: if defining data in a javascript file, you can import assets with require or import. The example below imports product logomarks from the mktg-logos package:

logoGrid={[
  {
    url: require('@hashicorp/mktg-logos/products/consul/logomark/color.svg?url'),
    alt: 'Consul',
  },
   {
    url: require('@hashicorp/mktg-logos/products/nomad/logomark/color.svg?url'),
    alt: 'Nomad',
  },
   {
    url: require('@hashicorp/mktg-logos/products/terraform/logomark/color.svg?url'),
    alt: 'Terraform',
  },
]}
logoGrid={[  {    url: require('@hashicorp/mktg-logos/products/consul/logomark/color.svg?url'),    alt: 'Consul',  },   {    url: require('@hashicorp/mktg-logos/products/nomad/logomark/color.svg?url'),    alt: 'Nomad',  },   {    url: require('@hashicorp/mktg-logos/products/terraform/logomark/color.svg?url'),    alt: 'Terraform',  },]}

Using import syntax:

import ConsulLogo from '@hashicorp/mktg-logos/product/consul/logomark/color.svg?url'
import NomadLogo from '@hashicorp/mktg-logos/product/nomad/logomark/color.svg?url'
import TerraformLogo from '@hashicorp/mktg-logos/product/terraform/logomark/color.svg?url'

//...

logoGrid={[
  {
    url: ConsulLogo,
    alt: 'Consul',
  },
   {
    url: NomadLogo,
    alt: 'Nomad',
  },
   {
    url: TerraformLogo,
    alt: 'Terraform',
  },
]}

import ConsulLogo from '@hashicorp/mktg-logos/product/consul/logomark/color.svg?url'import NomadLogo from '@hashicorp/mktg-logos/product/nomad/logomark/color.svg?url'import TerraformLogo from '@hashicorp/mktg-logos/product/terraform/logomark/color.svg?url' //... logoGrid={[  {    url: ConsulLogo,    alt: 'Consul',  },   {    url: NomadLogo,    alt: 'Nomad',  },   {    url: TerraformLogo,    alt: 'Terraform',  },]}