# Card > An
with a header, body and footer, elevated or outlined: a container with no behavior. Page: https://svelte-lean.vercel.app/primitives/card · Markdown: https://svelte-lean.vercel.app/primitives/card.md · Index: https://svelte-lean.vercel.app/llms.txt A surface with media, a header, a body and a footer. Use it for self-contained items such as a plan, a person or a page link. ```svelte

Storage

Team plan, renews in October

Exports older than thirty days are removed. Upgrade to keep them for a year.
``` A container with no behavior; the buttons are native. ## Examples ### Stretched link ```svelte ``` A click anywhere follows the title link; Save stays a separate target. ### Looks ```svelte {#each ['elevation', 'outlined'] as variant}

Monthly usage

data-variant="{variant}"

48,210 requests

{/each} ``` elevation (the default) draws --slean-card-elevation; outlined a border and no shadow. ### Form card ```svelte
event.preventDefault()}>

Invite a teammate

They get an email with a sign-in link.

``` Composed with Field and Input; the footer holds the submit and reset buttons. ### Profile card ```svelte

Amara Okafor

amara@harbor.studio

Admin
``` Parts of nested primitives keep their own styles. ## Usage Plain markup with a stylesheet: install `@svelte-lean/styles`. No JavaScript runs. ```bash npm install @svelte-lean/styles ``` `stylesheets` ```ts import '@svelte-lean/styles/card.css'; ``` Use `
` for self-contained items and a `
`, `
` or `
` for plain groups. Put the title at the heading level the page needs; in a list of cards, put each card in an `
  • `. Wrap media in `data-slean-part="media"` rather than marking the ``, so a global `img { max-width: 100% }` cannot undo the bleed to the edges. Mark the title link `data-slean-part="link"` only when the whole card should open it. In a linked card, the links, buttons, inputs, selects, text areas, summaries, elements with `tabindex`, popovers and dialogs stay their own targets, with everything inside them; any other text, image or label opens the link. The linked card takes no pointer events and is its own stacking context: an element with a `z-index` inside it does not rise above the cards after it, so a menu that must is a popover. ## Anatomy | Part | Element | data-slean-part | Required | Notes | | --- | --- | --- | --- | --- | | root | `
    ` | – | yes | data-variant="elevation" (default) or "outlined". \ or \ when it only groups content. | | media | `
    or
    around an or