MiniCard

A compact card, with MiniCardStack for collapsing several into a stack.

Installation

import { MiniCard } from "@o/pipeline/experimental/components/mini-card";

Variants

default

Default

dashed

Dashed

MiniCardStack

  • Item 1 of 5
  • Item 2 of 5
  • Item 3 of 5
  • Item 4 of 5
  • Item 5 of 5

Collapsing the MiniCardStack

Example: Controlled with 1 item

  • Item 1 of 1

Example: Controlled with 2 items

  • Item 1 of 2
  • Item 2 of 2

Example: Controlled with 3+ items

  • Item 1 of 5
  • Item 2 of 5
  • Item 3 of 5
  • Item 4 of 5
  • Item 5 of 5

Example: defaultOpen={false}

By default, the MiniCardStack is open. Set defaultOpen={false} to start it collapsed.

  • Item 1 of 5
  • Item 2 of 5
  • Item 3 of 5
  • Item 4 of 5
  • Item 5 of 5

Implementation details

  • For now, MiniCardStack requires a count prop and MiniCardStackItem requires an index prop. We have an open issue to explore automatically generating these values.