# Card
The Card component wraps content in a surface with an optional title, an image above or below it, and a side by side layout.
## About
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.
## Example
Start by importing the Card component from the theui-svelte library:
```html
```
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.
```html
A short line of body content, so the card has something to wrap around.
```
Alternatively you can use related **snippet** for the card item like title and images.
```html
A short line of body content, so the card has something to wrap around.
```
## Card Elements
There are some prefix elements in the `Card` component. The example are showing below.
### Card Title
You can use either `title prop` or `title snippet` to add card title.
```html
...
```
You can use the `title` snippet also:
```html
{#snippet title()}
Card Title
{/snippet}
```
### Card's Top Image
Use either the `topImage prop` or `topImage snippet` to add image at the top in the `Card` component.
```html
...
```
### Card's Bottom Image
Use either the `bottomImage prop` or `bottomImage snippet` to add image at the bottom in the `Card` component.
```html
...
```
Or, use `bottomImage` snippet:
```html
{#snippet title()}
Card Title
{/snippet}
{#snippet bottomImage()}
{/snippet}
This is card content..
```
### Card Content
Any element the `Card` component will be the card content.
```html
This is card content..
```
### 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`.
```html
...
...
```
## Horizontal 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.
```html
This is card content..
```
## Rounded Corner
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`
```html
... ...
```
## Customization
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.
```html
This is card content..
```
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 `
`.
## Accessibility
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 `
` 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.
## Configuration
### Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | Snippet \| string | `undefined` | The title of the component, which can be a string or a Snippet. A string renders as plain text; use a Snippet for markup. |
| `rounded` | [ROUNDED](https://www.theui.dev/docs/types#rounded-type) | `md` | Defines the border radius of the component. |
| `shadow` | [SHADOW](https://www.theui.dev/docs/types#shadow-types) | `md` | Specifies the shadow depth for the component. |
| `topImage` | Snippet \| [CARD_IMAGE_TYPE](https://www.theui.dev/docs/types#card-image-type) | `undefined` | An optional top image, which can be a Snippet or an object with image properties. |
| `bottomImage` | Snippet \| [CARD_IMAGE_TYPE](https://www.theui.dev/docs/types#card-image-type) | `undefined` | An optional bottom image, which can be a Snippet or an object with image properties. |
| `contentClasses` | string | `` | CSS classes for styling the content area. |
| `titleClasses` | string | `` | CSS classes for styling the title. |
| `imageOverlay` | boolean \| string | `false` | Places the card content over the image with a backdrop. Pass a string to add custom classes to the backdrop. |
### Dynamic props
| Name | Description |
| --- | --- |
| `horizontal` | If added, displays the component in a horizontal layout. |
---
Category: Components
Keywords: card, content, container, display, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss
Full documentation set: https://www.theui.dev/llms-full.txt