The Awesome Table Cards app offers you the most freedom and versatility in enhancing your content. It uses the responsive Flexbox Layout module, aligning your cards flexibly and intuitively.
What is the Cards app?
The Awesome Table Cards app is an extensible container with various content and layout settings. Its features allow for an attractive presentation of your data that's arranged like a deck of cards.
Live example using Keywords and CSS
Keywords specific to the Cards app
Below is a list of keywords specific to the Cards app.
| Keyword | Description |
|---|---|
|
Specifies which column is displayed by the app.
|
|
| CardsColor |
Sets specific colors for your cards.
|
Other keywords
You can also use these keywords with the Cards app.
| Keyword | Description |
|---|---|
| Hidden | Hides a column in your data presentation |
| HyperlinkType | Adds links to text or image elements. It can be an alternative to using templates. That is useful if you want to generate links in your table without showing the full links (only text or images are shown). It also hides the URL column. |
| ButtonType | Displays a button that redirects to a link. You can also specify your link's colour (using HTML Color Names like red, blue, green or hex color codes). |
| ImageType | Displays images from a column containing links to images. That is an alternative to using templates. When users hover over the image, a larger version pops up. |
| IconType | Displays icons without using a template. Choose any icons from https://material.io/icons/. |
| RatingType | Transforms numbers from 0 to 5 to star-rating icons. |
| ListType | Transforms CSV values into HTML ordered lists. |
| NumberedListType | Transforms CSV values into HTML numbered lists. |
Create a Cards app
In the Awesome Table editor:
1. In the sidebar, open the App configuration section.
2. Select Cards under Visualization type.
3. Click Update app to apply your changes.
If there's no Template sheet, the app displays blank cards.
Specify where your template range ends
Settings in the Cards app
When you select Cards under Visualization type (1) the settings for the Cards app are displayed. The following settings are mandatory; we used these values in the live example:
- (2) # of columns: 3
- (3) # of rows: 1
- (4) Min card width: 250px
- (5) Max card width: 250px
| Setting | Description |
|---|---|
| # of columns |
Specify either:
warning The number of columns displayed is adjusted based on other settings (minimum card width, browser width, the device used, etc.).
|
| # of rows |
Specify either:
warning We strongly advise refraining from using 'none' if you have more than 300 records (300 only serves as a guide). The Cards app isn't optimized to support large datasets, with load time being affected by the number of images and their resolution, your HTML's component size, and complexity (layout, CSS and/or JavaScript).
info If you have lots of records with a high volume of text and images, we recommend using pagination to optimize your Cards app (instead of using none). You can do this by specifying smaller values (for example, 5 or 10) in the # of rows field.
Pagination improves your Cards app functionality by:
|
| Min card width | Specify the minimum card width. Values can be expressed as:
warning It's not recommended to use high values here.
|
| Max card width | Specify your preferred maximum card width. Values can be expressed as:
|
Cards app with HTML template
Live example 1 (simple - using Keywords)
Live example 2 (advanced - using HTML and CSS)
If you need more flexibility and freedom in designing your card's content, customizing the Cards app with an HTML Template is the best option for you.