`<RelatedContent>` Component

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


    <RelatedContent
      appearance={'light'} 
      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={{
        text: "Sign up now",
        href: "/components/relatedcontent"
      }} 
    />

Name	Description
`appearance` string	Render on light or dark backgrounds Options: `"light"`, `"dark"`
`headline*` string	Headline for the section
`description` string	Description text for the section
`cards*` array	See props for the Card component here
`cta` Object	Optional CTA. Uses the StandaloneLink component. See StandaloneLink props here

<RelatedContent> Component

Code Editor

`<RelatedContent>` Component