1
0
mirror of synced 2025-12-22 11:26:57 -05:00
Files
docs/components/landing/GuideCard.tsx
Robert Sese cc69799558 a11y: landing page headings adjustments (#24295)
* Adjust heading level and only heading with intro text

* Adjust heading level

* Adjust code example and guide card heading levels

* Adjust tests for new heading levels

* Adjust rendering test for new heading levels
2022-01-14 17:23:05 +00:00

29 lines
867 B
TypeScript

import type { FeaturedLink } from 'components/context/ProductLandingContext'
type Props = {
guide: FeaturedLink
}
export const GuideCard = ({ guide }: Props) => {
const authors = guide.authors && guide.authors.length > 0 ? guide.authors : ['GitHub']
const authorString = `@${authors.join(', @')}`
return (
<li className="col-lg-4 col-12 mb-4 list-style-none">
<a
className="Box color-shadow-medium height-full d-block hover-shadow-large no-underline color-fg-default p-5"
href={guide.href}
>
<h3 className="f2" dangerouslySetInnerHTML={{ __html: guide.title }} />
<p
className="mt-2 mb-4 color-fg-muted"
dangerouslySetInnerHTML={{ __html: guide.intro || '' }}
/>
<footer className="d-flex">
<div>{authorString}</div>
</footer>
</a>
</li>
)
}