Skip to main content
Browse docs

Marwes documentation

Card

Family-local surface-container family with a Card component and thin purpose-card wrappers for product, profile, and stat summaries.

What this family solves

Family-local surface-container family with a Card component and thin purpose-card wrappers for product, profile, and stat summaries.

Use when

  • The UI needs a bordered content surface with optional title and flexible body composition.
  • The product flow clearly maps to ProductCard, ProfileCard, or StatCard and benefits from local purpose metadata.
  • The team wants React, Vue, and Svelte card rendering to stay aligned through one simple core recipe and shared Storybook teaching surfaces.

Avoid when

  • The surface is really an interactive tile, navigation link, or button-like control that should own explicit interactive semantics.
  • The layout needs richer substructure such as actions, dismiss behavior, notifications, or multi-region shells beyond the current card component contract.
  • The team expects the exploratory notification-card design material to be part of the shipped Card family today.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

Card, ProductCard, ProfileCard, StatCard

Types

CardProps, ProductCardProps, ProfileCardProps, StatCardProps

Vue — @marwes-ui/vue

Components

Card, ProductCard, ProfileCard, StatCard

Types

CardProps, ProductCardProps, ProfileCardProps, StatCardProps

Svelte — @marwes-ui/svelte

Components

Card, ProductCard, ProfileCard, StatCard

Types

CardProps, ProductCardProps, ProfileCardProps, StatCardProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { ProductCard } from "@marwes-ui/react"

export function Example() {
  return (
    <ProductCard title="Analytics workspace">
      Monitor product adoption, conversion, and retention in one place.
    </ProductCard>
  )
}

Vue

<script setup lang="ts">
import { ProductCard } from "@marwes-ui/vue"
</script>

<template>
  <ProductCard title="Analytics workspace">
    Monitor product adoption, conversion, and retention in one place.
  </ProductCard>
</template>

Svelte

<script lang="ts">
  import { ProductCard } from "@marwes-ui/svelte"
</script>

<ProductCard title="Analytics workspace">
  Monitor product adoption, conversion, and retention in one place.
</ProductCard>

Accessibility requirements

  • Passive semantics: Keep the card passive unless nested links or buttons provide the actual interaction semantics.
  • Keyboard and screen-reader review: Verify heading structure and reading order in the finished card composition.
  • Manual review boundary: Product-level judgment about when a card should stay passive versus becoming a real interactive control with button or link semantics.
  • Manual review 2: Whether purpose-card wrappers stay honest summaries instead of absorbing richer behavior that belongs in a different family.
  • Manual review 3: Any future expansion toward notification-card or richer shell patterns beyond the current simple surface container.

Theming

Card uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources