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,
} from '@enso-ui/card/bulma';
</script>

<Card collapsible>
    <CardHeader>
        <template #title>Orders</template>
        <template #controls>
            <CardBadge :label="12" />
            <CardRefresh @refresh="reload" />
        </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

When the parent Card is collapsible, the header renders the collapse control from the injected card state.

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