/

<CallToAction> Component

Share
Code Editor
<CallToAction

  heading='Test Heading'

  content='test content'

  links={[

    { text: 'test link', url: '#', type: 'inbound' },

    { text: 'test link', url: '#' }

  ]}

  product='packer'

  variant='centered'

/>

Where it's used

Latest:5.3.0
Search with

Releases

Latest:5.3.0
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
variant
string
Controls the visual appearance of the call to action, defaults to centered.
Options: "centered", "compact", "compactGrid", "compactTertiary", "links"
heading*
string
Header text
content*
string
Description text
theme
string
Color of background the CTA is on top of, default is light.
Options: "light", "gray", "dark", "brand"
className
string
Optional className to add to the root element
product
string
If a different brand color is needed for buttons it can be set with this prop.
Options: "hashicorp", "terraform", "vault", "nomad", "consul", "packer", "vagrant", "boundary", "waypoint"
links
array
Links to be displayed as buttons. The first will be primary, following will be secondary.
Array members must be of the type below:
links[x]
object
Object contains nested props, see below:
links[x].text
string
links[x].url
string
links[x].type
string
Options: "inbound", "outbound", "anchor"