Docs
Card

Card

Displays a card with header, content, and footer.

Loading...

Installation

	npx svell@latest add card

Usage

	<script lang="ts">
  import * as Card from "$lib/components/ui/card";
</script>
 
<Card.Root>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card Description</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Card Content</p>
  </Card.Content>
  <Card.Footer>
    <p>Card Footer</p>
  </Card.Footer>
</Card.Root>

Modify the heading level

By default, the <Card.Title> component renders an <h3> element. You can change this by passing a tag prop to the component.

For example:

	<Card.Title tag="h1">This will render an H1</Card.Title>

...

	<Card.Title tag="h6">This will render an H6</Card.Title>

Examples

Loading...

Built & designed by shadcn. Ported to Svelte by netronk. The source code is available on GitHub.