Card

The Card component groups a title, an image and some body content into one block. The layout, the images and the classes are all set through props. The image can sit above the content, below it, or behind it with a scrim over the top.

Start by importing the Card component from the theui-svelte library:

<script>
  import { Card } from "theui-svelte";
</script>

Here is the Card with a title, an image and some body content. The layout and the styling are adjusted with the props listed further down.

Card Title

A short line of body content, so the card has something to wrap around.

Submit

Svelte

<script>
  const imgData = {src: "https://placehold.co/800x400/6A00F5/white", alt: "A demo image"}
</script>

<Card title="Card Title" topImage={imgData}>
  <p>A short line of body content, so the card has something to wrap around.</p>
  <div>
    <Button>Submit</Button>
  </div>
</Card>

Alternatively you can use related snippet for the card item like title and images.

<Card>
  {#snippet topImage()}
    <img class="block w-full rounded-t-md" src="..." alt="...">
  {/snippet}

  {#snippet title()}
    <h4 class="text-xl font-semibold">Card Title</h4>
  {/snippet}

  <p>A short line of body content, so the card has something to wrap around.</p>
  <div>
    <Button>Submit</Button>
  </div>
</Card>

There are some prefix elements in the Card component. The example are showing below.

<Card title="Card Title">
  ...
</Card>

<Card>
  {#snippet title()}
    <h4 class="text-xl font-semibold">Card Title</h4>
  {/snippet}
</Card>

Card's Top Image

Use either the topImage prop or topImage snippet to add image at the top in the Card component.

Card Title

This is card content..

Svelte

<script>
  const imgData = {src: "https://placehold.co/800x400/6A00F5/white", alt: "A demo image"}
</script>

<Card title="Card Title" topImage={imgData}>
  ...
</Card>

Card's Bottom Image

Use either the bottomImage prop or bottomImage snippet to add image at the bottom in the Card component.

Card Title

This is card content..

Svelte

<script>
  const imgData = {src: "https://placehold.co/800x400/6A00F5/white", alt: "A demo image"}
</script>

<Card title="Card Title" bottomImage={imgData}>
  ...
</Card>

<Card>
  {#snippet title()}
    <h4 class="text-xl font-semibold">Card Title</h4>
  {/snippet}

  {#snippet bottomImage()}
    <img class="block w-full rounded-b-md" src="..." alt="...">
  {/snippet}

  <p>This is card content..</p>
</Card>

<Card>
  <p>This is card content..</p>
</Card>

Image Overlay

Use the imageOverlay prop to place the card title and content over the image, with a backdrop behind the text for readability. Set it to true for the default backdrop, or pass a string of classes to style the backdrop. The default value is false.

Card Title

This is card content..

Svelte

<Card title="Card Title" topImage={imgData} imageOverlay={true}>
  ...
</Card>

<!-- Custom backdrop classes -->
<Card title="Card Title" topImage={imgData} imageOverlay="bg-black/70">
  ...
</Card>

The Card component supports a flexible layout option that allows you to switch between vertical and horizontal orientations, depending on your design needs. To adopt a horizontal layout for the Card component, simply add the horizontal attribute. When this attribute is present, the card's content will be arranged side by side, making it ideal for designs where a wide layout is preferred.

Card Title

This is card content..

Svelte

<Card horizontal>
  <p>This is card content..</p>
</Card>

Control the corner of the card using the rounded prop. Available values are: sm, md, lg, xl, 2xl, full and none, Default value is md

Card Title

This is card content..

Card Title

This is card content..

Svelte

<Card ... rounded="none"> ... </Card>
<Card ... rounded="xl"> ... </Card>

The Card component is easy to customize, letting you style it to match your needs. You can change how any part of the card looks. Whether it's the content, title, shadow, or shape, you have full control.

You can either use snippets for custom components or utilize these props directly for more straightforward customization. Here are the key props available for customization:

• class: Apply custom styles to the card's container.
• contentClasses: Apply custom styles to the card's content.
• titleClasses: Style the title with your preferred classes.
• shadow: Adjust the card's shadow for a more or less prominent effect.
• rounded: Control the card's border-radius to achieve the desired shape.

<Card
  class="border-2 border-green-500 bg-green-100"
  titleClasses="bg-green-500 p-2 rounded-md text-green-50"
  contentClasses="text-green-500"
  shadow="none"
  rounded="xl"
  title="Card Title"
>
  <p>This is card content..</p>
</Card>

Anything else you pass reaches the element itself, so an id, a title, a data-* attribute or an event handler all work the way they would on a <div>.

The Card component is a plain container, so screen readers read its content in order without announcing the card itself. A string title is rendered as an <h4> heading, letting users jump to each card with heading navigation. If you use the title snippet, use a heading element there too. Give image props a meaningful alt text (or an empty one for decorative images), and when using imageOverlay, make sure the text keeps enough contrast against the image.