Import
import { Card } from '@contentful/f36-components';
import { Card } from '@contentful/f36-card';
Examples
Here you will find the most common ways of using the Card component.
With onClick
It’s possible to call an action when the user clicks on the Card. To do that, you only need to pass a function to the onClick prop.
function OnClickCardExample() {
const [show, setShow] = React.useState(false);
return (
<>
<Card onClick={() => setShow(!show)}>
Click on this card
<br />
{show && (
<span role="img" aria-label="sparkles">
✨✨✨
</span>
)}
</Card>
</>
);
}
Selectable cards
Sometimes you will need to use the Card as an selectable element in the UI. To achieve that behaviour,
you should use a combination of the onClick and isSelected props. The former controlling the latter.
function SelectableCardsExample() {
const [taco, setTaco] = React.useState(false);
const [pizza, setPizza] = React.useState(false);
const [broccoli, setBroccoli] = React.useState(false);
return (
<div>
<Heading>What is your favorite food?</Heading>
<div>
<Card onClick={() => setTaco(!taco)} isSelected={taco}>
<span role="img" aria-label="taco">
🌮
</span>
</Card>
<Card onClick={() => setPizza(!pizza)} isSelected={pizza}>
<span role="img" aria-label="pizza">
🍕
</span>
</Card>
<Card onClick={() => setBroccoli(!broccoli)} isSelected={broccoli}>
<span role="img" aria-label="broccoli">
🥦
</span>
</Card>
</div>
</div>
);
}
With link and target
A Card can be used with the purpose to navigate a user to an external page. To do that a user must pass a value to the href prop.
Optionally, the user can pass a target prop to control how the link should be open. By default Card is rendered as article html tag, in order to render it as a link, you should pass as="a" to Card component.
function WithLinkAndTargetExample() {
return (
<Card as="a" href="https://f36.contentful.com" target="_blank">
<Text>
Forma 36 is an open-source design system by Contentful created with the
intent to reduce the overhead of creating UI by providing tools and
guidance for digital teams building and extending Contentful products.
</Text>
</Card>
);
}
With a custom drag handle
When using the withDragHandle prop on the Card, you can also pass a custom drag handle render function. This is useful for more advanced use cases such as supporting keyboard navigation, where you would want to handle key events on the drag handle component. When using a custom drag handle, you should pass padding="none" to the Card to make sure the drag handle does not render inside the Card's content.
function WithCustomDragHandle() {
const styles = {
card: css({
position: 'relative',
}),
dragHandle: css({
alignSelf: 'stretch',
}),
};
const [items, setItems] = React.useState([
'Tech',
'News',
'CMS',
'Contentful',
]);
function SortableCard({ id }) {
const { attributes, listeners, setNodeRef, transform, transition, active } =
useSortable({
id,
});
const zIndex = active && active.id === id ? 1 : 0;
const style = {
transform: CSS.Translate.toString(transform),
transition,
zIndex,
};
return (
<Card
className={styles.card}
dragHandleRender={() => (
<DragHandle
as="button"
className={styles.dragHandle}
label="Move card"
{...attributes}
{...listeners}
/>
)}
padding="none"
withDragHandle
ref={setNodeRef}
style={style}
>
<Box padding="spacingM">{id}</Box>
</Card>
);
}
const handleDragEnd = (event) => {
const { active, over } = event;
if (active && over && active.id !== over.id) {
setItems((items) => {
const oldIndex = items.indexOf(active.id);
const newIndex = items.indexOf(over.id);
return arrayMove(items, oldIndex, newIndex);
});
}
};
return (
<DndContext onDragEnd={handleDragEnd}>
<SortableContext items={items} strategy={verticalListSortingStrategy}>
<Flex flexDirection="column" gap="spacingS">
{items.map((item) => (
<SortableCard key={item} id={item} />
))}
</Flex>
</SortableContext>
</DndContext>
);
}