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	Data Type	Requirement	Description	Note
Heading Level	String	Required	The HTML heading level for the card title.	Options: h2–h6. Defaults to h3. Choose based on the heading hierarchy of the page.
Icon Name	String	Conditional	The name of the icon to display in the card.	Only applies to the Icon variant. Refer to the Lucide icons documentation for available icon names.
Component ID	String	Optional	An ID for the component, useful for in-page anchor linking.

Slots

Field	Data Type	Requirement	Description	Note
Card Image	Media Image URL	Optional	It defaults to a 3:2 aspect ratio and uses object-fit: cover for proper display.	Not available on the Icon variant.
Card Image Alt Text	String	Conditional	Alt text for the card image.	Required if Card Image is used.
Eyebrow Text	String	Optional	A short label displayed above the title, used for category or content type.	Recommended to limit to 30 characters.
Card Title	String	Required	The title of the card.	Recommended to limit to 100 characters for optimal display.
Card URL	String	Required	The main link used for the card title.
Date	Date	Optional	The date associated with the card content.	Use the format "Month Date, Year" (e.g., "July 4, 2025"). Not available on the Icon variant.
Description	WYSIWYG	Optional	A brief description of the card content.	Use plain text format. Avoid adding links or complex formatting. Not available on the Icon variant.