Cards
The Card Component in Akuko empowers you to create dynamic and visually appealing cards that loop through data and display a custom set of fields. Whether you want to showcase individual data records, highlight key insights, or present information in a card format, the Card Component provides a flexible and interactive solution.
Key Features
The Card Component allows you to loop through data in a Source and render a Card for each row.
Customizable Fields
Each card within the Card Component is highly customizable. You can select and arrange fields from your data source to create a custom card layout. Fields can include text, charts, numbers, etc.
Pagination Support
For data sets with a large number of records, you can enable pagination to break down the cards into manageable pages. This improves the user experience and ensures efficient loading of content.
Interactivity
Make your cards interactive by adding click events or other actions to each card. Users can click on cards to access more details, initiate actions, or navigate to other sections of your data story.
Properties
The Card Component offers several properties to configure its appearance and behavior:
name
string
The component name
source
uuid
The uuid of the data Source
width
string
The width of the Cards
cardGutter
number
Card gutter in pixels
cardHeight
number
Max height of card in pixels
cardShadow
boolean
Shadow on card
defaultPageSize
number
Number of cards shown per page
padding
number
Padding on Card
perRow
number
Cards per row
rowMargin
number
Margin between rows
rows
number
Number of rows in Card layout
columns
number
Number of columns in Card layout
pagination
boolean
Enable or disable pagination for large data sets
filters
array
Array of filters
Examples
Explore examples of the Card Component in action: