/

<LearnCallout> Component

The <LearnCallout /> component renders one or more callouts linking to Learn guides.

Share
Code Editor
<LearnCallout

  headline="Learn the latest Nomad skills"

  product="nomad"

  background=""

  items={[

    {

      title: 'Getting Started',

      category: 'Step-by-Step Guides',

      time: '24 mins',

      link: 'https://learn.hashicorp.com/collections/nomad/get-started',

      image: 'https://www.datocms-assets.com/2885/1600191254-hashicorp-icon.svg',

    },

    {

      title: 'Deploy and Manage Nomad Jobs',

      category: 'Step-by-Step Guides',

      time: '36 mins',

      link: 'https://learn.hashicorp.com/collections/nomad/manage-jobs',

      image: 'https://www.datocms-assets.com/2885/1600191254-hashicorp-icon.svg',

    },

  ]}

/>

Where it's used

Latest:2.0.2
Search with

Releases

Latest:2.0.2
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...

Props

NameDescription
heading*
string
Heading copy to show on the left/top
product*
string
Sets the brand colors to be used
Options: "hashicorp", "terraform", "vault", "nomad", "consul", "packer", "vagrant", "boundary", "waypoint"
background
string
URL for a background image
items*
array
Array of items to appear on the right/bottom - the icon should be a url
Object contains nested props, see below:
items.title
string
name of the learn track
items.category
string
type of guide
items.time
string
estimated completion time
items.link
string
link to the actual guide
items.image
string
image used to represent the content
className
string
Optional className to add to the root element