@agala-labs/ui

Card

Groups one coherent piece of content with optional header, footer, and accent.

Examples

Default

Warehouse sync Connected

Last completed today at 14:32. All 184 catalog items are up to date.

<AgalaCard accent="top"><template #header>Warehouse sync</template>184 items are up to date.</AgalaCard>

Import

import { AgalaCard } from '@agala-labs/ui'

API

Prop	Type	Default	Description
padding	'none' | 'sm' | 'md' | 'lg'	'md'	Internal spacing.
headerVariant	'default' | 'compact'	'default'	Header density.
accent	'top' | 'left' | 'right' | 'bottom'	—	Accent edge.
accentColor	string	—	Accent CSS color.
class	string	—	Consumer override class.

Slots

• header
• default
• footer

Accessibility

Cards are visual grouping only; use headings and semantic elements inside them.