# Card
Funkwhale cards are used to contain textual information, links, and interactive buttons. You can use these to create visually pleasing links to content or to present information.
::: details Parameters
#### Props
```ts
interface Props extends Partial {
title: string;
category?: true | "h1" | "h2" | "h3" | "h4" | "h5";
color?: Pastel;
image?: string | { src: string; style?: "withPadding" };
tags?: string[];
}
```
You have to set a title for the card by passing a `title` prop.
#### Style
- Set `--width` on the element to override the default Card width.
:::
```vue-html
Access your personal music
collection from anywhere.
Funkwhale gives you access to
publication and sharing tools
you can use to promote that
your content across the web.
```
Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
## Card as a Link
::: warning
TODO: Test if it works. Set up a mock router in vitest.
:::
Add a `:to` prop, either containing an external link (`"https://..."`) or a Vue Router destination:
```ts
:to="{name: 'library.albums.detail', params: {id: album.id}}"
```
Got a question about Funkwhale? Get a quick answer!
## Card as a Category header
Category cards are basic cards that contain only a title. To create a category card, pass a `category` prop.
```vue-html{1}
```
## Add an Image
Pass an image source to the `image` prop or set `image.src` and `image.style`.
```vue-html{4,11-12}
```
## Add an Alert
```vue-html{2-4}
Please annotate all items with the required metadata.
```
Please annotate all items with the required metadata.
## Add a Footer
Items in this region are secondary and will be displayed smaller than the main content.
```vue-html{3-9}
There are no items in this list
```
There are no items in this list
## Add an Action
Large Buttons or links at the bottom edge of the card serve as Call-to-Actions (CTA).
```vue-html{3-6}
The easiest way to get started with Funkwhale is to register an account on a public pod.
```
The easiest way to get started with Funkwhale is to register an account on a public pod.
If there are multiple actions, they will be presented in a row:
```vue-html{4,7}
You cannot undo this action.
```
You cannot undo this action.
## Add Tags
You can include tags on a card by adding a list of `tags`. These are rendered as [pills](./pill.md).
```vue-html{3}
Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
```
Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.