Card

Design File

Figma link

Introduction

This is the custom card component for the Libraries. It updates the typography and layout spacing of the card to ensure consistency with the overall design system.

Component Structure

The card component consists of a title, a card link, an optional eyebrow, an optional description, an optional image, optional date information, and an optional link. It is designed for use with the layout builder; therefore, it does not have any specific layout or outside padding.

Variants

There are three variants: Standard, Overlay, and Icon.

1. Standard

This is the default variant of the card component. It provides a card with complete information, but can still be used with or without an image.

2. Overlay

This variant provides a relatively minimal card compared to the Standard variant, with only basic information. It should be used to present content without the need for an image.

3. Icon

This variant provides a simple card with an icon of the user's choice. It is useful for quick identification of the content the card represents.

Props

Field	Requirement	Description	Note
Icon Name	Optional	Icon for the Icon variant.	Name of the icon to display in the card (only for the Icon variant). Please refer to the Lucide icons documentation for available icons.

Slots

Field	Type	Requirement	Description
Card Image	Media Image URL	Optional	It defaults to a 3:2 aspect ratio and uses object-fit: cover for proper display.
Card Image Alt Text	String	Conditional	Required if the Card Image is used.
Eyebrow Text	String	Optional	The eyebrow text can be used to provide a category or short description. It is recommended to limit it to 30 characters.
Card Title	String	Required	It is recommended to limit it to 100 characters for optimal display.
Card URL	String	Required	This is the main link the card uses for the card title.
Date	Date	Optional	This is used to show the date information. The format should be "July 4, 2025".
Description	WYSIWYG	Optional	The WYSIWYG editor is used for the description field and should use plain text format. Avoid adding links or anything other than pure text.
Link Text	String	Conditional	Text for the emphasized link. Only available for the Standard and Overlay variants; required if Link URL is used.
Link URL	String	Conditional	Link for the emphasized link. Only available for the Standard and Overlay variants; required if Link Text is used.

Embedded Components

[Component] UMD Lib Emphasized Link

The UMD Lib Emphasized Link is used to add the link information in the Card. It follows all constraints and styles defined in the UMD Lib Emphasized Link.