Card

Variant

Your workspace

A card controlled by props, with reactive content.

Saved changes: 0

Outline

A defined border to separate content.

Project details and related content.

Soft

A subtle background, without a visible border.

Supporting information within a view.

Solid

The accent color to highlight content.

A relevant message for the team.

Elevated

A surface raised with a shadow.

Content that needs to stand out from the background.

Custom header

Snippets keep the content and actions of your application.

You can also use only the body, without a header or footer.

Usage and snippets

meeko

<script lang="ts">
  const count = signal(0)
</script>

<template>
<UICard title="Your workspace" variant="outline">
  <p role="status">Saved changes: {count.value}</p>
  <snippet name="footer">
    <UIButton on:click="() => count.value++">Save change</UIButton>
  </snippet>
</UICard>
</template>

The header can come from title and description or from the header snippet, which takes priority. default holds the body and footer the actions.

Props
Name	Type / default	Description
`title / description`	`string`	Optional header text.
`variant`	`outline \| soft \| solid \| elevated` outline	Visual variant; supports ui.defaults.card.
`class`	`string`	Additional classes.

The default snippet is required. header and footer are optional. The component uses a section with an accessible name when a title is given.

Contents