Appearance
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.
| Prop | Data type | Required? | Description |
|---|---|---|---|
title | String | No | The title of the card. |
image | String | No | The URL of an image to display on the card. |
button-title | String | No | The text that appears on the button. |
category | Boolean | No | Whether the card is a category card or not. |
tags | Array<String> | No | An array of tags. These are rendered as pills. |
Basic card
Basic cards only contain textual information. You can set a title for the card by passing a title prop.
template
<fw-card title="For music lovers">
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.
</fw-card>
For music lovers
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 card
You can make a card interactive by passing an event to the @click handler. When a user clicks on the card, the event fires. Use this to add links or events to your cards.
template
<fw-card
title="Frequently Asked Questions"
@click="alert('A quick answer!')"
>
Got a question about Funkwhale? Get a quick answer!
</fw-card>
Frequently Asked Questions
Got a question about Funkwhale? Get a quick answer!
Category card
Category cards are basic cards that contain only a title. To create a category card, pass a category prop.
template
<fw-card
category
title="Example Translations"
@click="alert('hello')"
/>
Example Translations
Image card
Cards can contain images for extra visual appeal. Pass an image URL to the image prop to create an image card.
template
<fw-card
title="For music lovers"
image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
>
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.
</fw-card>
For music lovers
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.
Button card
You can add a button to the bottom of a card to present a clear action to users. Pass the title of the button to the button-title prop and pass an event to the @click handler.
INFO
When you add a button-title and a @click handler, you event only fires when the user clicks on the button.
template
<fw-card
title="Join an existing pod"
button-title="Find a pod"
@click="alert('Open the pod picker')"
>
The easiest way to get started with Funkwhale is to register an account on a public pod.
</fw-card>
Join an existing pod
The easiest way to get started with Funkwhale is to register an account on a public pod.
Card tags
You can include tags on a card by adding a list of tags. These are rendered as pills.
template
<fw-card
title="For music lovers"
:tags="['rock', 'folk', 'punk']"
>
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.
</fw-card>
For music lovers
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.