Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/danielitoCode/compose_svelted/llms.txt

Use this file to discover all available pages before exploring further.

Card is a themed container component built on top of Surface that encapsulates common patterns for grouping related content with an elevation-based drop shadow and configurable corner radius. Three related components — OutlinedCard, DropdownMenu, and DropdownMenuItem — are present in the source repository as empty placeholder files and have no implementation yet.

​
Card

Card wraps Surface and adds an elevation-based drop shadow with a configurable corner radius. It is the right choice when you want content visually lifted off the background. The shadow is derived from a numeric or string elevation value using the formula: 
box-shadow: 0 {v} calc({v} * 3) rgba(0,0,0,0.16)
where {v} is the elevation coerced to a CSS length (e.g. 1 → 1px). Passing 0 or "" removes the shadow entirely.

​
Props

​
elevation
number | string
default:"1"
Elevation depth. A number is treated as pixels; a string CSS length is used directly. Pass 0 for a flat card with no shadow.
​
shape
Shape
default:"RoundedCornerShape(16)"
Corner radius of the card. Defaults to RoundedCornerShape(16) (16 px all corners), matching the M3 medium component shape.
​
modifier
Modifier
default:"Modifier.empty()"
Layout modifier passed through to the underlying Surface.

​
Slot

SlotDescription
defaultAny content to render inside the card.

​
Basic example

<script>
  import { Card, Text, Column, Modifier, Arrangement } from '@danielito1996/compose-svelted';
</script>

<Card modifier={Modifier.padding(16).fillMaxWidth()}>
  <Column verticalArrangement={Arrangement.spacedBy(8)}>
    <Text textStyle="titleMedium">Card title</Text>
    <Text textStyle="bodyMedium">
      Supporting text that describes the card content.
    </Text>
  </Column>
</Card>

​
Flat card (no shadow)

<script>
  import { Card, Text, Modifier } from '@danielito1996/compose-svelted';
</script>

<Card elevation={0} modifier={Modifier.fillMaxWidth().padding(16)}>
  <Text textStyle="bodyLarge">Flat card — no elevation shadow.</Text>
</Card>

​
Elevated card with custom shape

<script>
  import {
    Card, Column, Text, Button,
    Modifier, Arrangement, RoundedCornerShape
  } from '@danielito1996/compose-svelted';
</script>

<Card
  elevation={4}
  shape={RoundedCornerShape(24)}
  modifier={Modifier.fillMaxWidth().padding(20)}
>
  <Column verticalArrangement={Arrangement.spacedBy(12)}>
    <Text textStyle="headlineSmall">Notification</Text>
    <Text textStyle="bodyMedium">
      You have a new message waiting in your inbox.
    </Text>
    <Button onClick={() => console.log('view')}>View message</Button>
  </Column>
</Card>

​
Placeholder stub components

The following three components exist as empty files in the source repository. They have no implementation and therefore have no documented props or behavior. Do not use them in production.
ComponentFileStatus
OutlinedCardcards/OutlinedCard.sveltePlaceholder stub — 0 bytes
DropdownMenumenus/DropdownMenu.sveltePlaceholder stub — 0 bytes
DropdownMenuItemmenus/DropdownMenuItem.sveltePlaceholder stub — 0 bytes
These stub components contain no Svelte script, markup, or styles. Importing them will produce an empty element with no behavior. Props and usage examples listed in any earlier version of this documentation for these variants were inaccurate and have been removed.
When OutlinedCard, DropdownMenu, and DropdownMenuItem are implemented, they will be documented here. Watch the changelog for updates.

Build docs developers (and LLMs) love

Get started for freeTalk to us