88be341d21
* website: upgrade global-styles packages * website: remove deprecated --site-max-width on community page * website: replace code-block showWindowBar with showChrome * website: replace old g-container with g-grid-container * website: backfill missing type styles * website: revert change to heading semantics * website: fix mismatched border colour * website: fix spacing issue * website: revert accidental replacement * website: clarify debt intention with comment * website: fix missing search styles, remove cruft * website: hide alert-banner on mobile * website: bump to latest patched dependencies
47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
import styles from './HCPCalloutSection.module.css'
|
|
import Button from '@hashicorp/react-button'
|
|
|
|
export default function HcpCalloutSection({
|
|
id,
|
|
header,
|
|
title,
|
|
description,
|
|
chin,
|
|
image,
|
|
links,
|
|
}) {
|
|
return (
|
|
<div className={styles.hcpCalloutSection} id={id}>
|
|
{header ? (
|
|
<div className={styles.header}>
|
|
<h2 className="g-type-display-2">{header}</h2>
|
|
</div>
|
|
) : null}
|
|
<div className={styles.content}>
|
|
<div className={styles.info}>
|
|
<h1 className="g-type-display-1">{title}</h1>
|
|
<span className={styles.chin}>{chin}</span>
|
|
<p className={styles.description}>{description}</p>
|
|
<div className={styles.links}>
|
|
{links.map((link, index) => {
|
|
const variant = index === 0 ? 'primary' : 'tertiary'
|
|
return (
|
|
<div key={link.text}>
|
|
<Button
|
|
title={link.text}
|
|
label="Learn more — HCP Vault"
|
|
linkType={link.type}
|
|
url={link.url}
|
|
theme={{ variant, brand: 'neutral', background: 'light' }}
|
|
/>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
<img alt={title} src={image} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|