Dowe

DISPLAY

Card

Cards group related information into one portable visual unit with a clear semantic boundary.

PORTABLE SURFACE

One authored card

Web, Android, and iOS resolve the same variant and token contract.

VARIANTS AND SCHEMES

Four levels of emphasis

Use scheme for semantic color and variant for visual weight. Cards also accept structural background and surface schemes.

SOLID

Primary decision

Use the strongest emphasis for a featured summary or decisive callout.

SOFT

Routine confirmation

Soft color keeps related details visible without competing with the page.

OUTLINED

Contextual boundary

A border separates related information while preserving the surrounding surface.

GHOST

Lowest visual weight

Use a transparent card when hierarchy comes from placement rather than fill.

Card variant:"outlined" scheme:"warning" rounded:"md"
  Grid columns:1 gap:2
    Title size:"xl"
      "Review required"
    Text size:"sm"
      "The card preserves the surface while adding a semantic boundary."

COVER AND OVERLAY

Keep content readable over imagery

cover supplies the base image, overlay adds contrast, and children remain above both layers in every target.

COVER CARD

Foreground stays legible

The image is centered and covers the card without changing child order.

THREE LAYERS

Image, overlay, content

The component owns the layered surface so page layout stays simple.

Card cover:"assets/workspace.webp" overlay:0.62 rounded:"lg" minH:72
  Flex direction:"column" justify:"end" gap:2 minH:60
    Title size:"3xl"
      "A readable card title"
    Text size:"sm"
      "Content renders above the image and overlay."

SPACING AND PLACEMENT

Defaults that adapt, structure that stays explicit

Cards default to p:{ xs:4 lg:5 } and add no gap between children. Use Grid or Flex inside the card, and use spans only as a direct Grid child.

DEFAULT PADDING

Responsive by default

The compact and large-screen padding values are supplied automatically.

EXPLICIT PADDING AND SPAN

The direct Grid child can grow

p replaces the default padding and colSpan expands this card across two desktop tracks.

Grid columns:{ xs:1 md:3 } gap:4
  Card variant:"outlined" scheme:"surface"
    Text
      "Uses default responsive padding."
  Card variant:"soft" scheme:"info" p:{ xs:5 md:7 } colSpan:{ xs:1 md:2 }
    Text
      "Overrides padding and spans two desktop columns."

MOTION

Reveal a card with a portable preset

animation is resolved by Dowe rather than a target-specific runtime. Choose a preset that supports the surrounding content hierarchy.

FADE IN

A quiet appearance for supporting content.

SLIDE UP

A directional entrance for sequential content.

SCALE IN

A focused reveal for a featured visual unit.

Card variant:"soft" scheme:"secondary" animation:"slideUp"
  Text
    "This card enters with the portable slideUp preset."

API

Props

Card also accepts applicable common sizing, border, shadow, font, visibility, and container style props.

Prop	Type	Default
No data There are no records to display

No data