Card
This is one of the Budibase UI components within the design area of the platform.
Use the Card component to display records in a compact layout.
Cards BlockUse the Cards Block if you want to render a data source as a card list.
Layout
Cards support two layout modes:
- Vertical places the image above the text
- Horizontal places the image to the left of the text
Use Horizontal in the Settings Panel to switch layout modes.
Card elements
| Element | Description |
|---|---|
| Title | Primary label |
| Subtitle | Secondary label below the title |
| Description | Supporting text below the subtitle |
| Image | Optional image shown above or beside the text |
Button
Cards can also show an optional button. Set the button label with text or a binding, then configure the click action from the settings panel.
Define ActionsSee Actions for how to configure the button click.
Common use
Cards work well for:
- Search results
- Related records
- Profile summaries
- Dashboard summaries
Tutorial pattern
To build a card list from data:
- Add a data provider
- Add a repeater inside the data provider
- Add a card inside the repeater
- Bind the title, description, image, and button fields to the row data
Updated 4 months ago
What’s Next
Quickly convert your data to a list of cards? Check the Blocks page to learn more about the Cards Block
Did this page help you?