Card

Introduction

The card component is primarily designed for article previews but can also be used for other content where illustrations or images are essential to the card layout. Not to be confused with the more generic Box-component.

Variants

The card component can be customized in various ways to suit different use cases. Below are some common variants:

• Basic card: A simple card with title, content and button
• Card with icon: A card that includes a icon.
• Card with image: A card featuring an image banner at the top.
• Card with icon and image: A card that includes a banner and a profile image/icon.

Interactive demo

Try the interactive demo below to explore the card component.

Anatomy

Card is a component that can include several optional subcomponents, which makes it very flexible. You can also add links and buttons to make the card interactive.

• Card image: Add a banner image to the top of the card.
• Card title: Add a title with a larger text size.
• Card content: Add text content to the card.
• Card icon: Add a circular image or icon, typically used for profile pictures.
• Card button: Add a call-to-action button at the bottom of the card.

Usage

The card component can be made clickable, but it's important that the call to action is clear, concise and descriptive.