/

<Intro> Component

Share
Code Editor
<Intro

  eyebrow="Volutpat enim fusce tempor"

  heading="Sit et bibendum adipiscing non mi tempor neque"

  description="Cras ullamcorper duis nunc velit commodo etiam. Auctor tincidunt pellentesque ullamcorper nisi integer. Mattis quisque porta vel euismod velit id. Arcu bibendum neque adipiscing et cras facilisi."

  actions={{

    ctas: [

      {

        title: 'View tutorials',

        url: '/tutorials',

        variant: 'primary'

      },

      {

        title: 'View documentation',

        url: '/docs',

        variant: 'tertiary-neutral'

      }

    ]

  }}

/>

Examples

Light theme

Volutpat enim fusce tempor

Sit et bibendum adipiscing non mi tempor neque

Cras ullamcorper duis nunc velit commodo etiam. Auctor tincidunt pellentesque ullamcorper nisi integer. Mattis quisque porta vel euismod velit id. Arcu bibendum neque adipiscing et cras facilisi.

View tutorialsView documentation

Dark theme

Volutpat enim fusce tempor

Sit et bibendum adipiscing non mi tempor neque

Cras ullamcorper duis nunc velit commodo etiam. Auctor tincidunt pellentesque ullamcorper nisi integer. Mattis quisque porta vel euismod velit id. Arcu bibendum neque adipiscing et cras facilisi.

View tutorialsView documentation

Props

NameDescription
appearance
string
Display intro on light or dark backgrounds.
Options: "light", "dark"
textAlignment
string
Controls the text alignment rendering.
Options: "left", "center"
eyebrow
string
Optional text displayed above the heading.
heading*
string
Text displayed within the heading element.
headingElement
string
Controls which element the heading renders as.
Options: "h1", "h2", "h3", "h4"
headingSize
number
Controls the size at which the heading is rendered.
Options: 1, 2, 3
description*
string
Text following the heading element.
actions
object
Object contains nested props, see below:
actions.layout
string
Display buttons inline or stacked by default.
Options: "inline", "stacked"
actions.brand
string
Render primary variant button with product color.
Options: "hashicorp", "nomad", "consul", "terraform", "vault", "packer", "vagrant", "waypoint", "boundary"
actions.size
string
Determines CTA button sizing.
Options: "small", "medium"
actions.ctas
object
Array of CTAs. Minimum of one, max of two.
Object contains nested props, see below:
actions.ctas.title*
string
The text that appears inside the button.
actions.ctas.url
string
Where the button links to when clicked.
actions.ctas.onClick
function
A function that will be called when the button is clicked.
actions.ctas.variant
string
Applies a styling to the button based on the desired hierarchy.
Options: "primary", "secondary", "tertiary-neutral"