<RelatedContent> Component

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

Share
Code Editor
<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"
}}
/>
NameDescription
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