CardModule
A flexible card component for displaying content modules in a catalog or grid layout.
Examples
Default — Not started
Initial state of a module with no progress defined (0%). The progress bar is always rendered.
Preview
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.
Preview
Module 110 items
Histology
70% de progresso
Default — Completed
When progress={100}, the status automatically displays “Completed”. The progress bar is always rendered.
Preview
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 calendar date chip. The action button goes inside CardModuleFooter as children.
Preview
Module 29 items
Laboratory Practices
Não iniciado
Disponível em 11/05
API
CardModule structure
| Component | Description | Usage |
|---|---|---|
| CardModule | Root container with border, rounded corners and variant context | Wraps all card content and provides variant state to children |
| CardModuleHeader | Wrapper that groups label and title in a single div | Use to visually group CardModuleLabel and CardModuleTitle together with tighter spacing |
| CardModuleLabel | Label row with optional count on the right | Identifies category and count of the module (e.g. “Module 1” + “10 items”) |
| CardModuleTitle | Primary title with semibold font | Main heading of the card |
| CardModuleProgress | Status text + progress bar combined | Renders the status label and bar together. Blocked: “Not started” (no bar). Default: “X% progress” + bar, or “Completed” when progress ≥ 100. |
| CardModuleFooter | Availability date with calendar icon, separator and action slot | Only visible when variant is “blocked”. Accepts children for action button to the right of the date. |
| CardModuleButton | Pre-built action button with ArrowRightMd icon | Renders a size="sm" Button with ArrowRightMd icon. Accepts all Button props as overrides. |
| CardModuleAction | Right-aligned action slot for default variant | Wraps any children in a flex container aligned to the right. Use with CardModuleButton. |
CardModule
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | ”default” | “blocked" | "default” | Controls the visual state of the card. “blocked” requires availableDate and renders a distinct background. |
| availableDate | string | - | Required when variant="blocked" — TypeScript enforces this. String displayed in the footer (e.g. “11/05”). |
| …props | React.ComponentProps<“div”> | - | All native div props are supported. |
CardModuleLabel
| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | string | - | Optional count displayed on the right (e.g. “10 items”). |
| children | React.ReactNode | - | Label text (e.g. “Module 1”). |
| …props | React.ComponentProps<“div”> | - | All native div props are supported. |
CardModuleProgress
| Prop | Type | Default | Description |
|---|---|---|---|
| progress | number | - | Progress value (0–100). Out-of-range values are clamped automatically. Omit for 0% state. |
| …props | React.ComponentProps<“div”> | - | All native div props are supported. Status text and bar are driven by variant context. |
CardModuleFooter
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Rendered to the right of the date chip. Typically CardModuleButton. |
| …props | React.ComponentProps<“div”> | - | All native div props are supported. Only renders when variant="blocked" and availableDate is set. |
CardModuleButton
| Prop | Type | Default | Description |
|---|---|---|---|
| …props | ButtonProps | - | All Button props are supported. Defaults to size="sm" with ArrowRightMd icon — override as needed. |
Last updated on