OCard

OCard groups related content in a bordered surface with an optional header (title and subtitle), body, and footer. It stays flat by default; elevation raises clickable cards with a shadow on hover.

Usage

Step by step

1. Import OCard from the ooko-ui/card public subpath.
2. Set title and subtitle, put the main content in the default slot, and add actions to the footer slot when needed.
3. The title renders as an h4 and the subtitle as an h5. Use the title and subtitle slots for inline markup such as a link, or the header slot to choose other elements.

Example

The rendered example and its source come from the same Vue single-file component.

Team plan

Billed yearly

Five seats, shared projects, and priority support.

Interactive playground

Edit the title and subtitle, toggle the body and footer, and turn hover elevation on or off.

Team plan

Billed yearly

Hover the card to preview its elevation.

Title Subtitle Color Noneprimarysecondaryinfosuccesswarningdangerneutral Elevation Glass Body Footer

Props

Prop	Type	Default	Description
title	string	undefined	Title displayed as an h4 at the top of the header.
subtitle	string	undefined	Secondary text displayed as an h5 below the title.
elevation	boolean	false	Raises the card with a shadow on hover. Reserve it for interactive cards; section panels stay flat.
glass	boolean	false	Uses a translucent, blurred background and a thin border, for panels over a decorated background. Defaults to the app's glass option.
color	"primary" | "secondary" | "info" | "success" | "warning" | "danger" | "neutral"	undefined	Tints the card background with a pastel of this color, for summary and category cards. Leave it unset for a plain surface.

Events

Event	Payload	Description
none	none	No custom Vue events are emitted.

Slots

Slot	Props	Description
header	none	Replaces the whole header, including the title and subtitle.
title	none	Replaces the title prop text inside the title h4.
subtitle	none	Replaces the subtitle prop text inside the subtitle h5.
actions	none	Places actions, such as a button, at the end of the header row, beside the title and subtitle.
default	none	Provides the optional main content.
footer	none	Provides the optional footer, such as actions or metadata.

CSS custom properties

Custom property	Default	Description
--o-card-padding	var(--o-space-5)	Sets the inner spacing around the card sections.
--o-card-gap	var(--o-space-4)	Sets the spacing between the header, body, and footer.
--o-card-border	1px solid var(--o-border-glass)	Sets the card border shorthand.
--o-card-border-radius	var(--o-radius-surface)	Sets the card corner radius.
--o-card-background	var(--o-background-glass-strong)	Sets the card background.
--o-card-backdrop-filter	var(--o-backdrop-filter-glass)	Sets the filter applied to the content behind the card.
--o-card-tint-strength	20%	Sets how much of its color a tinted card mixes into its background.
--o-card-hover-shadow	0 var(--o-space-3) var(--o-space-6) var(--o-card-shadow-color)	Sets the shadow applied on hover when elevation is enabled.
--o-card-glass-background	var(--o-background-glass)	Sets the translucent background of a glass card.
--o-card-glass-border	1px solid var(--o-border-glass)	Sets the border shorthand of a glass card.
--o-card-glass-backdrop-filter	var(--o-backdrop-filter-glass)	Sets the filter applied to the content behind a glass card.

Override example

:root {
  --o-card-padding: var(--o-space-6);
  --o-card-border: 0;
  --o-card-background: var(--o-background-neutral-subtle);
  --o-card-hover-shadow: none;
}

Define the same custom properties on a container instead of :root to limit an override to one part of an application.

Accessibility

• The root and its sections are plain div elements, so the card adds no role or landmark of its own. Native header and footer elements are deliberately avoided because they would become page landmarks outside a sectioning element.
• The title is an h4 and the subtitle an h5, so both appear in the page heading outline. When those levels do not fit the page, provide your own elements in the header slot.
• The title and subtitle slots render inside those headings, so they accept inline content only.
• To expose a card as a named region, forward role="region" and aria-label. Every attribute is forwarded to the root.
• The hover shadow is decorative and does not make the card interactive. elevation is off by default, because most cards are static section panels; enable it on cards that are clickable.
• The subtitle uses a muted text color that keeps at least a 4.5:1 contrast ratio on the default background in both themes.
• The hover shadow transition is removed when reduced motion is requested.
• Forced-colors mode receives an explicit border even when --o-card-border is 0.

Behavior and edge cases

• The header renders when title, subtitle, or one of the header, title, and subtitle slots is provided. The title and subtitle slots replace their prop text; the header slot replaces both, including their slots.
• The body and footer wrappers render only when their slot renders content: a slot that only holds v-if branches that are off or blank text adds no empty grid row, so a collapsed card keeps its header centered. An empty card renders only its root.
• The actions slot sits at the end of the header row, centered beside the title and subtitle, and also renders the header on its own. It stays outside the header slot, so both can be combined.
• Cards are glass by default: a translucent, blurred surface with a light edge that lets an o-halo backdrop show through. color layers a pastel of that color over it (--o-card-tint-strength, 20% by default), for summary and category cards.
• glass draws a lighter translucent background and a thin border through the --o-card-glass-* properties, for panels laid over a decorated background. Browsers without backdrop-filter show the translucent background without blur.
• The last child of each section loses its trailing block margin so --o-card-gap alone separates sections.
• The card emits no events and has no app defaults. Make it interactive by placing native links or buttons inside it rather than on the root.