/

<SplitRichCTAList> Component

Share
Code Editor

SplitRichCTAList Props

There are many props that can be used to customize this component, all of which are listed below:

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"
heading
string
Heading to the left of the CTAs
items
array
call-to-action items to be displayed
Array members must be of the type below:
items[x]
object
Object contains nested props, see below:
items[x].icon
svg
The SVG icon to display in the CTA
items[x].title
string
The CTA title text
items[x].description
string
The CTA description text
items[x].linkUrl
string
The destination of the CTA when clicked

Usage

Place it in a Container

The SplitRichCTAList is not opinionated about the container it is placed in (g-grid-container, custom page wrapper etc), but it does want to be placed in a reasonable container, else it will not look good on large screen sizes. The example usage above does not have it placed in a container, which will illustrate the issues it runs into on large screen sizes.

<section className="g-grid-container">
  <SplitRichCTAList product="terraform" heading="Get Started with Terraform Modules on AWS" items={[]} />
</section>
<section className="g-grid-container">  <SplitRichCTAList product="terraform" heading="Get Started with Terraform Modules on AWS" items={[]} /></section>

Passing an Icon

Above we have embedded the entire SVG code being passed to the icon prop, which is simply just a workaround to get this component rendering in swingset.

Sane usage of this component would have you require in the SVG where this is being used.

<SplitRichCTAList
  product="terraform"
  heading="Get Started with Terraform Modules on AWS"
  items={[
    {
      icon: require('./img/my-svg.svg'),
      title: 'Amazon Virtual Private Cloud (VPC) for Terraform on AWS',
      description:
        'Provision Amazon VPC resources, managed by Terraform, on the AWS Cloud.',
      linkUrl:
        'https://registry.terraform.io/modules/aws-quickstart/vpc/aws/latest',
    },
  ]}
/>
<SplitRichCTAList  product="terraform"  heading="Get Started with Terraform Modules on AWS"  items={[    {      icon: require('./img/my-svg.svg'),      title: 'Amazon Virtual Private Cloud (VPC) for Terraform on AWS',      description:        'Provision Amazon VPC resources, managed by Terraform, on the AWS Cloud.',      linkUrl:        'https://registry.terraform.io/modules/aws-quickstart/vpc/aws/latest',    },  ]}/>