Card Continue

A horizontal card for displaying in-progress content items in a “Continue where you left off” section. Shows an image on the left, a breadcrumb path and title on the right, and a continue action button.

Examples

Basic

Default state with all sub-components composed together.

Preview

Histology of the Cardiovascular System

API

CardContinue structure

Component	Description	Usage
CardContinue	Root container with border and rounded corners	Wraps image and content in a horizontal flex layout
CardContinueImage	Left image area fixed at 200×122px with rounded corners	Pass `src` for an image or add children for custom content. Falls back to a muted background when empty.
CardContinueContent	Right content column with space-between layout (padding comes from the card root)	Wraps `CardContinueHeader` at the top and `CardContinueButton` at the bottom
CardContinueHeader	Vertical group for breadcrumb and title with tight spacing	Use to visually group `CardContinueBreadcrumb` and `CardContinueTitle` together
CardContinueBreadcrumb	Compact breadcrumb built on the project’s `Breadcrumb` component, rendered at `text-xs`	Pass `items` as an array of strings; the last item is highlighted as the current page
CardContinueTitle	Semibold `text-lg` primary-foreground title, clamped to 2 lines	Main heading of the content item
CardContinueButton	Pre-built emphasis-soft action button with ArrowRightSm icon	Renders a `size="sm"` Button. Must always pass label via `children`.

CardContinue

Prop	Type	Default	Description
…props	React.ComponentProps<“div”>	-	All native div props are supported.

CardContinueImage

Prop	Type	Default	Description
src	string	-	Image URL. When provided, renders an `<img>` covering the image area with `object-cover`.
alt	string	""	Alt text for the image element.
children	React.ReactNode	-	Rendered when `src` is not provided. Use for custom overlays or fallback content.
…props	React.ComponentProps<“div”>	-	All native div props are supported.

CardContinueButton

Prop	Type	Default	Description
children	React.ReactNode	-	Button label text. Required to localise or define the call-to-action.
…props	ButtonProps	-	All Button props are supported. Defaults to `variant="emphasis-soft"` and `size="sm"` with `ArrowRightSm` icon.