Skip to Content
DocumentationCardsCard Module

Card Module

A card for displaying content modules in a catalog or grid layout. It shows a stacked-cards depth effect behind the card, a label with an item count, a title, a progress indicator and an action button. Supports a default state and a blocked state for locked content with an availability date.

Examples

Default — Not started

Initial state of a module with no progress defined (0%). The progress bar is always rendered, and the stacked-cards depth effect appears behind the card.

Module 110 items
Histology
0% de progresso

Default — In progress

Pass a progress value between 0 and 100 to display the progress bar and status text.

Module 110 items
Histology
70% de progresso

Default — Completed

When progress={100}, the status automatically displays “Completed”. The progress bar is always rendered.

Module 110 items
Histology
Concluído

Blocked

Locked modules not yet available. Requires availableDate. Displays a distinct background, “Not started” status text, a separator and a date chip with a lock icon. The action button goes inside CardModuleFooter as children.

Module 29 items
Laboratory Practices
Não iniciado
Disponível em 11/05

Without stack

Set showStack={false} to hide the stacked-cards depth effect (e.g. inside dense lists or when the card is already nested in a stacked container).

Module 110 items
Histology
70% de progresso

API

CardModule structure

ComponentDescriptionUsage
CardModuleRoot container with rounded-2xl border, variant context and a stacked-cards depth effect behind the card (toggle with showStack)Wraps all card content and provides variant state to children
CardModuleHeaderWrapper that groups label and title in a single divUse to visually group CardModuleLabel and CardModuleTitle together with tighter spacing
CardModuleLabelLabel row with optional count on the rightIdentifies category and count of the module (e.g. “Module 1” + “10 items”)
CardModuleTitlePrimary title with semibold fontMain heading of the card
CardModuleProgressStatus text + progress bar combinedRenders the status label and bar together. Blocked: “Not started” (no bar). Default: “X% progress” + bar, or “Completed” when progress ≥ 100.
CardModuleFooterAvailability date with lock icon, separator and action slotOnly visible when variant is “blocked”. Accepts children for action button to the right of the date.
CardModuleButtonPre-built action button with ArrowRightMd iconRenders a size="sm" Button with ArrowRightMd icon. Accepts all Button props as overrides.
CardModuleActionRight-aligned action slot for default variantWraps any children in a flex container aligned to the right. Use with CardModuleButton.

CardModule

PropTypeDefaultDescription
variant”default” | “blocked""default”Controls the visual state of the card. “blocked” requires availableDate and renders a distinct background.
showStackbooleantrueToggles the stacked-cards depth effect rendered behind the card. Set to false to render the card on its own.
availableDatestring-Required when variant="blocked" — TypeScript enforces this. String displayed in the footer (e.g. “11/05”).
…propsReact.ComponentProps<“div”>-All native div props are supported.

CardModuleLabel

PropTypeDefaultDescription
countnumber | string-Optional count displayed on the right (e.g. “10 items”).
childrenReact.ReactNode-Label text (e.g. “Module 1”).
…propsReact.ComponentProps<“div”>-All native div props are supported.

CardModuleProgress

PropTypeDefaultDescription
progressnumber-Progress value (0–100). Out-of-range values are clamped automatically. Omit for 0% state.
…propsReact.ComponentProps<“div”>-All native div props are supported. Status text and bar are driven by variant context.

CardModuleFooter

PropTypeDefaultDescription
childrenReact.ReactNode-Rendered to the right of the date chip. Typically CardModuleButton.
…propsReact.ComponentProps<“div”>-All native div props are supported. Only renders when variant="blocked" and availableDate is set.

CardModuleButton

PropTypeDefaultDescription
…propsButtonProps-All Button props are supported. Defaults to size="sm" with ArrowRightMd icon — override as needed.
Last updated on
Card ContinueCard News