Skip to content
OZEAON Wiki

Cards

Shared card pieces. The CondensedCard* parts compose the fixed-width article and project cards used in carousels. CollapsibleCard is the expandable section card used in editor forms and organisation member lists. The cards barrel exports only the three CondensedCard* parts, so import the other two from their own files. See also Cards & Layout.

Condensed Cards

Section titled “Condensed Cards”

CondensedCardShell is the carousel-snapping frame, CondensedCardCover is the linked cover image with a badge and category chips, and CondensedCardActions is the arrow link at the bottom. They compose like this:

<CondensedCardShell>
  <CondensedCardCover type="article" href={href} src={coverUrl} alt={title} badge={badge} categories={categories} />
  {/* byline, title, summary */}
  <CondensedCardActions href={href} label={`Read ${title}`} />
</CondensedCardShell>

Source: CondensedCardShell.tsx, CondensedCardCover.tsx, CondensedCardActions.tsx

CardCategoryBadges

Section titled “CardCategoryBadges”

Category chips fitted to a single line, with a “+N” chip whose tooltip lists the hidden categories. It is built on MeasuredChipRow from Display.

Source: src/components/ui/cards/CardCategoryBadges.tsx

CollapsibleCard

Section titled “CollapsibleCard”

A collapsible card with a clickable header, a chevron and an optional delete button that confirms before calling onRemove. Use it for repeatable form sections (FAQs, team members, content sections) and org member/invite cards. The delete click doesn’t toggle the card.

Source: src/components/ui/cards/CollapsibleCard.tsx