`<VerticalTextBlockList>` Component

A pretty way to display a list of informational links. Used primarily on community pages on docs sites.

<VerticalTextBlockList
  data={[
    {
      logo: {
        url: 'https://www.datocms-assets.com/2885/1536611731-meganav-terraform.svg',
        alt: 'Terraform Logo',
      },
      header: 'This is a header',
      body: 'This is some body text to display',
      linkUrl: 'https://learn.hashicorp.com/terraform',
    }
  ]}
/>

Where it's used

Latest:7.0.1

Search with

Releases

Latest:7.0.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...

5.x.x

Loading 5.x.x releases...

6.x.x

Loading 6.x.x releases...

7.x.x

Loading 7.x.x releases...

Props

Name	Description
`product` string	A lower-case product identifier to pull in respective theme colors. The default is hashicorp blue. Options: `"hashicorp"`, `"boundary"`, `"consul"`, `"nomad"`, `"packer"`, `"terraform"`, `"vault"`, `"vagrant"`, `"waypoint"`
`centerText` boolean	Is text centered on mobile viewports?
`data` array	An object containing data from the CMS Array members must be of the type below:
`data[x]` object	Object contains nested props, see below:
`data[x].header` string	headline of the current item
`data[x].body` string	text that appears to the right of the headline, can contain HTML
`data[x].linkUrl` string	when the item is clicked, it will direct to this URL, if present
`data[x].logo` object	an image displayed instead of the `header`, if present Object contains nested props, see below:
`data[x].logo.url` string	image url
`data[x].logo.alt` string	image alt
`className` string	Optional className to add to the root element