Card
Edit on GitHubCard is used to link to site content like projects or blog posts.
Typically Cards are tiled together, using the Tiles component.
Cards can appear with or without images. If no image is provided, the desciption text will be visible instead.
import { Card, useCardStyles } from 'design-system/card';
Props
Prop | Options | Desc |
---|---|---|
desc? | string | The description will only be visible if no image is provided. |
image? | string | Image url |
path | string | Link to a Gatsby page |
tag | 'Design' , 'Development' | |
title | string |
useCardStyles
The useCardStyles hook is available if you want to decorate an element with the same styles as the Card component's container.
const styles = useCardStyles();const Element = () => <div style={styles}>Using Card Styles</div>;