Edit on GitHub

Card 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';


desc?stringThe description will only be visible if no image is provided.
image?stringImage url
pathstringLink to a Gatsby page
tag'Design' , 'Development'


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>;

  • Home
  • About
  • Blog
  • Design System
© Copyright 2021 Nathan Simpson. Made in Sydney Australia.