/

<TextSplitWithLogoGrid> Component

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

Share
Code Editor
<TextSplitWithLogoGrid

  textSplit={{

    heading: 'Example Heading',

    content: 'Donec ullamcorper nulla non metus auctor fringilla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',

    checkboxes: ['Checkbox 1', 'Checkbox 2']

  }}

  logoGrid={[ {

    url: 'https://www.datocms-assets.com/2885/1573738628-serverless.svg',

    alt: 'Serverless'

  }, {

    url: 'https://www.datocms-assets.com/2885/1573738628-serverless.svg',

    alt: 'Serverless'

  }, {

    url: 'https://www.datocms-assets.com/2885/1573738628-serverless.svg',

    alt: 'Serverless'

  }]}

/>

Where it's used

Latest:5.1.6
Search with

Releases

Latest:5.1.6
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
 <TextSplitWithLogoGrid

    textSplit={{

      heading: 'Run the infrastructure of your choice',

      content:

        'HashiCorp partners with all major cloud providers, making it easier for organizations to leverage all the tools to provision, secure, connect, and run their applications in any environment.',

    }}

    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',

      },

    ]}

  />

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',
  },
]}