Card

Description

Composable Bulma card primitives for Enso UI.

Installation

Install the package:

yarn add @enso-ui/card

This package is also available through the full enso-ui workspace bundle.

Features

• exports the complete Bulma card shell used by Enso dashboards and detail views
• provides collapsible, removable, and loading card behavior through shared injected state
• ships dedicated header, content, footer, and control primitives for consistent composition

Usage

<script setup>
import {
    Card, CardHeader, CardContent, CardBadge, CardRefresh, CardCollapse,
} from '@enso-ui/card/bulma';
</script>

<Card collapsible>
    <CardHeader collapsible>
        <template #title>Orders</template>
        <template #controls>
            <CardBadge :label="12" />
            <CardRefresh @refresh="reload" />
            <CardCollapse />
        </template>
    </CardHeader>
    <CardContent>
        ...
    </CardContent>
</Card>

API

Card

Root card container that provides shared collapse/remove state to child parts.

Import: @enso-ui/card/bulma

Props:

• collapsed: boolean = false initial collapsed state.
• collapsible: boolean = false enables toggle behaviour.
• loading: boolean = false shows the card loader.

Events:

• collapse
• expand
• remove

CardHeader

Header wrapper with title and controls slots.

Import: @enso-ui/card/bulma

Props:

• collapsible: boolean = false renders an inline collapse control.

CardContent

Content wrapper that collapses automatically when the parent card is collapsible.

Import: @enso-ui/card/bulma

CardImage

Image wrapper matching Bulma card markup.

Import: @enso-ui/card/bulma

CardFooter

Footer wrapper for footer items or custom actions.

Import: @enso-ui/card/bulma

CardFooterItem

Single footer link item.

Import: @enso-ui/card/bulma

CardControl

Low-level clickable wrapper for header controls.

Import: @enso-ui/card/bulma

CardBadge

Header control that renders a Bulma tag.

Import: @enso-ui/card/bulma

Props:

• label: string | number
• type: string | null = null

CardCollapse

Header control that toggles the parent card collapse state.

Import: @enso-ui/card/bulma

CardRefresh

Header control that emits a guarded refresh event.

Import: @enso-ui/card/bulma

Props:

• loading: boolean = false disables repeat emits and spins the icon.

Events:

• refresh

CardRemove

Header control that marks the parent card as removed.

Import: @enso-ui/card/bulma

Depends On

• @enso-ui/dropdown-indicator ↗
• @enso-ui/loader ↗
• @enso-ui/transitions ↗
• Bulma

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

MIT