Agriculture Design System
Beta
Design System for the Export Service

Card

Also known as Tiles, Cards are a layout component that link to more information on a topic.

View in FigmaView in StorybookView in Github
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.

Open in Playroom, opens in a new tab
<Flex gap={1} flexDirection="row">
	<Flex
		flexDirection="column"
		flexGrow={1}
		palette="light"
		padding={1}
		background="body"
	>
		<Card shadow clickable>
			<CardInner>
				<Stack gap={1}>
					<Heading as="h3" type="h4">
						<CardLink href="#">Card link</CardLink>
					</Heading>
					<Text>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non
						finibus leo.
					</Text>
				</Stack>
			</CardInner>
		</Card>
	</Flex>
	<Flex
		flexDirection="column"
		flexGrow={1}
		palette="dark"
		padding={1}
		background="body"
	>
		<Card clickable>
			<CardInner>
				<Stack gap={1}>
					<Heading as="h3" type="h4">
						<CardLink href="#">Card link</CardLink>
					</Heading>
					<Text>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non
						finibus leo.
					</Text>
				</Stack>
			</CardInner>
		</Card>
	</Flex>
</Flex>

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.

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.

Open in Playroom, opens in a new tab
<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.

Open in Playroom, opens in a new tab
<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.

Open in Playroom, opens in a new tab
<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.

Open in Playroom, opens in a new tab
<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>
  • Search filters – Search filters help users find what they’re looking for by displaying options that meet specified criteria.
Edit this page