/

<SplitRichCTAList> Component

Share
Code Editor
<SplitRichCTAList

  product="terraform"

  heading="Get Started with Terraform Modules on AWS"

  items={[

    {

      icon: '<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 17l5-5-5-5m-7 10l5-5-5-5" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path clip-rule="evenodd" d="M7 17l5-5-5-5" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>',

      title: 'Terraform Cloud Workspace on AWS',

      description:

        'Configure a Terraform organization and workspace on the AWS Cloud.',

      linkUrl:

        'https://registry.terraform.io/modules/aws-quickstart/tfc_workspace/aws/latest',

    },

    {

      icon: '<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 17l5-5-5-5m-7 10l5-5-5-5" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path clip-rule="evenodd" d="M7 17l5-5-5-5" stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></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 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',
    },
  ]}
/>