/

<VerticalTextBlockList> Component

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

Share
Code Editor
<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
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

NameDescription
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

Playground