Card
Learn about the Cards component within Budibase
Use the Card component to display data from your tables to your users in a structured, repetitive manner. Cards contain content and in some cases images and actions about a single subject. There is currently two types of Card component; vertical and horizontal.
Important! If you select the Repeater component, select a table, and add the Card component to it, you can generate multiple cards at once.

How to add a new Card

To add a new Card to your designs:
    Click the card button
    Select the card type you would like to add

How to display data from your tables as Cards

    Click the layout dropdown, and select the Repeater component
    Link your Repeater component to the Table which contains the data you would like to display
    Click the Card component dropdown, and select a Card type
    In the Card's Setup panel, bind your data from your Tables to your Card component using the ✎ icon.

How to style your Card

There are 2 types of Cards within Budibase. Each Card has its own unique settings. The Card component can also accept some style updates from the Design panel i.e Background - Gradient: Heavy Rain:

Vertical

The Vertical Card is structured in a vertical manner - items are stacked on top of each other.
The Vertical Card component comes with the following settings:
Setting
Description
Name
Change the name of the component
Image
Add an image to your Card
Heading
Add a heading to your card, directly under the image
Description
Add a description to your card, directly under the heading
Link Text
Add the text of your link to your card, directly under the description
Link URL
Activate your link with a URL
Link Color
Change the color of your link
Hover Color
Change the hover color of your link
Image Height
Set your image's height (in rem)
Card Width
Set the width of your Card

Horizontal

The Horizontal Card is structured in a horizontal manner - items are stacked alongside each other.
The Horizontal Card component comes with the following settings:
Setting
Description
Name
Change the name of the component
Image
Add an image to your Card
Heading
Add a heading to your card, directly under the image
Description
Add a description to your card, directly under the heading
Subtext
A muted text which sits underneath your description.
Link Text
Add the text of your link to your card, directly under the description
Link URL
Activate your link with a URL
Link Color
Change the color of your link
Hover Color
Change the hover color of your link
Image Width
Set your image's width (in rem)
Card Width
Set the width of your Card
Card Height
Set the height of your Card
Last modified 1yr ago