Card
A card is a container that holds information and actions for single topic.
Breakdown
Card
A card consists of content and an image. It has padding of 18px around all edges regardless of the device it is viewed on. A fox red icon is placed at the bottom right corner to indicate that a card is clickable without the need of a button.
Simple card
A simple a card has no image.
Simple card with icon
A simple card can also contain supportive elements like an icon.
Side by side
Side by side card displays the content horizontally with a 50/50 split. It has padding of 36px around all edges of the text container. A fox red eyebrow can be used above the heading to help contain relevant information to the user but isn’t relevant to SEO.
eyebrow
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a felis quis nulla mollis interdum eu a risus.
Full width card
Much like a standard card, a full width card consists of content and an image. However unlike a standard card, this card is more flexible in it’s content and has a larger padding of 36px around it’s edges. There is no fox red icon used to signify a clickable area and instead uses a standard button. A fox red eyebrow can be used above the heading to help contain relevant information to the user but isn’t relevant to SEO.
Usage
A card is a flexible container that does not require specific components inside of it but instead adapts to the content inside of it. You can create a card to support content or showcase related content. Commonly used elements in side a card are Heading, Paragraph, and Button.
Space within a card is limited so content should brief and action oriented. Information should encourage the user to take an action directly from the card or click through for more info.
Anatomy
Card vertical padding
Cards have a vertical padding of 18px.
Card horizontal padding
Cards have a horizontal padding of 18px.
Card vertical gap
Cards have a vertical gap of 9px between the Heading and paragraph element to create the necessary relationship grouping.
Link button
Cards have an additional 27px container to house a fox red link button. This link button is right aligned to the card itself.
Full width card vertical padding
Full width cards have a vertical padding of 36px.
Full width card horizontal padding
Full width cards have a horizontal padding of 36px.
Side by side vertical padding
Cards have a vertical padding of 36px.
Side by side horizontal padding
Cards have a horizontal padding of 36px.
