`<RelatedContent>` Component

A full-page-width component that displays text and cards. Used for displaying related content.


    <RelatedContent 
      headline={"Related Content"}
      description={"Leo mauris fermentum pharetra blandit tellus euismod. Leo mauris fermentum pharetra blandit tellus euismod."}
      cards={
        [
          {
            link: "https://hashicorp.com",
            meta: [ 'USE CASES' ],
            heading: "Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…",
            description: "Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…",
          },
          {
            link: "https://hashicorp.com",
            meta: [ 'USE CASES' ],
            heading: "Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…",
            description: "Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…",
          },
          {
            link: "https://hashicorp.com",
            meta: [ 'USE CASES' ],
            heading: "Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…",
            description: "Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…",
          },
          {
            link: "https://hashicorp.com",
            meta: [ 'USE CASES' ],
            heading: "Display 5 - 4 lines with character limit of 130. Leo mauris fermentum pharetra blandit tellus euismod…",
            description: "Body small - 4 lines with character limit of 170. Leo mauris fermentum pharetra blandit tellus euismod pharetra. Duis egestas volutpat dolor…",
          },
        ]
      }
      cta={{
        title: "Sign up now",
        url: "/components/relatedcontent"
      }} 
    />

Name	Description
`headline*` string	Headline for the section
`description` string	Description text for the section
`cards*` array	See below in Sub-component-specific Props
`cta` string	Optional CTA
`appearance` string	Render on light or dark backgrounds Options: `"light"`, `"dark"`

Sub-component-specific Props

`<Card />`

Name	Description
`children*` function	Children to render into the Card.
`thumbnail` object	An image showcasing the card's destination. Object contains nested props, see below:
`thumbnail.src*` string	URL for the image
`thumbnail.alt` string	Alternative text for the image
`meta` array	Content shown above the card heading.
`appearance` string	Styles the card with either a light or dark theme. Options: `"light"`, `"dark"`
`heading` string	A bold headline describing the card's destination.
`description` string	Text describing the card's destination.
`link*` string	A link followed when the card is clicked.

<RelatedContent> Component

Code Editor

Sub-component-specific Props

<Card />

`<RelatedContent>` Component

`<Card />`