```ts
import Card from "~/components/ui/Card.vue"
```
# 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 Props
```ts
{
title: string
category?: true | "h1" | "h2" | "h3" | "h4" | "h5"
tags?: string[]
image?: string | { src: string, style?: "withPadding" }
icon?: string
alertProps?: PastelProps
} & Partial
& (PastelProps | ColorProps | DefaultProps)
& RaisedProps
& VariantProps
& WidthProps
```
:::
```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
Add a `:to` prop, either containing an external link (`"https://..."`) or a Vue Router destination:
```ts
```
If you add interactive elements, only the surrounding surfaces will be linked.
For details, see the section on [interactive elements on top of a linked card](#interactive-elements-on-top-of-a-linked-card)
## 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,5}
```
## Add an Image
Pass an image source to the `image` prop or set both `image.src` and `image.style` by passing an object.
```vue-html{3,8-9}
/>
```
## Add an Icon
```vue-html{4,10}
Visit the Docs and learn more about developing Funkwhale
```
Visit the Docs and learn more about developing Funkwhale
You can combine this prop with any other prop configuration. If you combine it with an image, keep an eye on the contrast ratio between the icon color and the image.
## Add an Alert
```vue-html{2-4}
Please annotate all items with the required metadata.
```
Please annotate all items with the required metadata.
::: info
To add props to the alert, add the `alert-props` property to the card. Check out [the Alert component docs](/components/ui/alert) to find out which props are supported
:::
## Add a topright action
```vue-html
```
## 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}
All items have been assimilated. Ready to go!
```
All items have been assimilated. Ready to go!
## 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.
## Interactive elements on top of a linked card
Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This is an uncommon pattern and will confuse users.
```vue-html
Open this file in a new window
```
Open this file in a new window
Instead, use the [action area](#add-an-action) to offer the primary link:
```vue-html
Open this file in a new window
Details
```
Open this file in a new window
Details
## Add color
- Choose a color: `default`, `primary`, `secondary`, `destructive`, or a Pastel (red, yellow, purple, green or blue)
- Choose a variant: `raised`, `solid`, `outline`,...
Read more: [Using Color](/using-color)
## Set size
`large` (304px), `medium` (208px), `auto`, `small`, ...
Read more: [Using Width](/using-width)