Card
Also known as Tiles, Cards are a layout component that link to more information on a topic.
import { ... } from '@ag.ds-next/react/card';Cards are often used to curate groups of related information – for example, Top tasks. There are 2 types of cards – basic and link. They are frequently used on landing pages to help users find what they need.
Cards can contain multiple elements, such as images, links, actions, text and more.
Cards can be placed in a 2, 3, or 4-column layout. Cards in a grid layout should be equal in height and the same type.
Consider using other formats such as tables, if more than 12 cards are required.
<Card> <CardInner> <Stack gap={1}> <Heading as="h3" type="h4"> Card title </Heading> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non finibus leo. </Text> </Stack> </CardInner> </Card>
Do
- use link cards to provide a contextual link to another page
- limit links to one per card
- avoid images for the most part, unless they add relevant information
- use a pictogram (64 pixels) if it provides meaningful context
- use appropriate alt text for images
- wrap related cards in a list to make navigation easier.
Don’t
- include more than 1 topic per card
- use decorative images
- use formatted/rich text (lists, links etc.) in the card content area
- include more than 3 lines of body copy
- repeat images in card groups
- use different card types in the same grid
- add links in the text.
Images
For a full-width image in a card, add the img tag outside the CardInner container. For images with inner padding, add the img tag inside the CardInner container.
<Card> <PlaceholderImage /> <CardInner> <TextLink href="#">Action</TextLink> </CardInner> </Card>
Clickable cards
For cards that contain a single link, the hit area for that link can be made to wrap the entire card. This pattern may be used on cards that act as a preview for an article or blog post, for example. These cards could contain an image, a title and a brief summary of the article. Avoid wrapping an entire card in an anchor tag as this can be a difficult experience for a screen reader user.
<Card shadow clickable> <PlaceholderImage /> <CardInner> <Stack gap={1}> <Heading type="h3"> <CardLink href="#">Title of article</CardLink> </Heading> <Text as="p">Some text</Text> </Stack> </CardInner> </Card>
Feature headers
Use feature headers to give the card heading more visual prominence.
<Columns> <Column columnSpan={6}> <Card> <CardHeader> <Heading as="h3" type="h4"> Feature card title </Heading> </CardHeader> <CardInner> <Text as="p">Additional conent relating to the card</Text> </CardInner> </Card> </Column> <Column columnSpan={6}> <Card> <CardHeader background="bodyAlt"> <Heading as="h3" type="h4"> Feature card title </Heading> </CardHeader> <CardInner> <Text as="p">Additional conent relating to the card</Text> </CardInner> </Card> </Column> </Columns>
Feature footers
Use feature footers to give the card footer more visual prominence. This can be used to guide users to the call to action.
<Columns> <Column columnSpan={6}> <Card> <CardInner> <Stack gap={1}> <Heading type="h3">Card title</Heading> <Text as="p"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, voluptatibus. </Text> </Stack> </CardInner> <CardFooter> <TextLink href="#">Action</TextLink> </CardFooter> </Card> </Column> <Column columnSpan={6}> <Card> <CardInner> <Stack gap={1}> <Heading type="h3">Card title</Heading> <Text as="p"> Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, voluptatibus. </Text> </Stack> </CardInner> <CardFooter background="bodyAlt"> <TextLink href="#">Action</TextLink> </CardFooter> </Card> </Column> </Columns>
Colour
AgDS foreground components respond to the background colour of their parent container. When placed on a dark palette background, the dark palette variant of the component is displayed. When placed on a light palette background, the light palette variant is displayed.
This logic ensures sufficient contrast between foreground and background elements is maintained to meet WCAG 2.1 AA 4.5:1 contrast ratio for text (WCAG 1.4.3) and 3:1 for graphic elements that convey information (WCAG 1.4.11).
<Fragment> <Flex as="ul" gap={1.5} padding={1.5}> <Box as="li"> <Card shadow clickable> <CardInner> <Stack gap={1}> <Heading as="h3" type="h4"> <CardLink href="#">Card light 1</CardLink> </Heading> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non finibus leo. </Text> </Stack> </CardInner> </Card> </Box> <Box as="li"> <Card shadow clickable> <CardInner> <Stack gap={1}> <Heading as="h3" type="h4"> <CardLink href="#">Card light 2</CardLink> </Heading> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non finibus leo. </Text> </Stack> </CardInner> </Card> </Box> </Flex> <Flex as="ul" background="body" gap={1.5} padding={1.5} palette="dark"> <Box as="li"> <Card clickable> <CardInner> <Stack gap={1}> <Heading as="h3" type="h4"> <CardLink href="#">Card dark 1</CardLink> </Heading> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non finibus leo. </Text> </Stack> </CardInner> </Card> </Box> <Box as="li"> <Card clickable> <CardInner> <Stack gap={1}> <Heading as="h3" type="h4"> <CardLink href="#">Card dark 2</CardLink> </Heading> <Text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non finibus leo. </Text> </Stack> </CardInner> </Card> </Box> </Flex> </Fragment>
Related patterns
- Search filters – Search filters help users find what they’re looking for by displaying options that meet specified criteria.