1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
import ButtonLink from '@components/atoms/buttons/button-link';
import Heading, { type HeadingLevel } from '@components/atoms/headings/heading';
import DescriptionList, {
type DescriptionListItem,
} from '@components/atoms/lists/description-list';
import { FC } from 'react';
import ResponsiveImage, {
type ResponsiveImageProps,
} from '../images/responsive-image';
import styles from './card.module.scss';
export type Cover = {
/**
* The cover alternative text.
*/
alt: string;
/**
* The cover height.
*/
height: number;
/**
* The cover source.
*/
src: string;
/**
* The cover width.
*/
width: number;
};
export type CardProps = {
/**
* Set additional classnames to the card wrapper.
*/
className?: string;
/**
* The card cover.
*/
cover?: Cover;
/**
* The cover fit. Default: cover.
*/
coverFit?: ResponsiveImageProps['objectFit'];
/**
* The card meta.
*/
meta?: DescriptionListItem[];
/**
* The card tagline.
*/
tagline?: string;
/**
* The card title.
*/
title: string;
/**
* The title level (hn).
*/
titleLevel: HeadingLevel;
/**
* The card target.
*/
url: string;
};
/**
* Card component
*
* Render a link with minimal information about its content.
*/
const Card: FC<CardProps> = ({
className = '',
cover,
coverFit = 'cover',
meta,
tagline,
title,
titleLevel,
url,
}) => {
return (
<ButtonLink target={url} className={`${styles.wrapper} ${className}`}>
<article className={styles.article}>
<header className={styles.header}>
{cover && (
<ResponsiveImage
{...cover}
objectFit={coverFit}
className={styles.cover}
/>
)}
<Heading level={titleLevel} className={styles.title}>
{title}
</Heading>
</header>
{tagline && <div className={styles.tagline}>{tagline}</div>}
{meta && (
<footer className={styles.footer}>
<DescriptionList
items={meta}
layout="inline"
className={styles.list}
groupClassName={styles.items}
termClassName={styles.term}
descriptionClassName={styles.description}
/>
</footer>
)}
</article>
</ButtonLink>
);
};
export default Card;
|
