Card Containers in Serene Grey The following Card Containers can be found in the Serene Grey palette. Card Type | Icon | Description | Example Use |
---|
Basic | Image Added | A standard card container with no styling that displays the content of each row of data on a backing table. Content is displayed by adding fields or dynamic text to a card. |
| Contacts | Image Added | A card container with icon and button styling that displays the content of each row of data on a backing table. Content is displayed by adding fields or dynamic text to a card. Buttons can be configured to perform actions, such as calling a phone number or creating a new email. |
| Comment | Image Added | A card container with button styling, displaying data from another table. | See 22. Exercises | Read Only | Image Added | A card container that shows one card, displaying data from another table. |
| Expandable | Image Added | A card container that shows one card with an expandable area.
| Use when there is extra data that does not require displaying. | Filter List | Image Added | A card container that displays an aggregate view to group repeated values to display as a list. Users can then select records to filter an existing grid or card component.
| Add next to an existing grid or card component to filter its content. Filter can be applied to the existing grid or card component to filter the records by the selected card. | Counter | Image Added | A card container that displays a counter that can generate a total. It provides a circular card component that can be used to display a numeric value. This component requires a backing aggregate view that returns a single value in an attribute called "Count". |
| Labelled Counter | Image Added | As above. Includes a label field. |
| Triple Counter | Image Added | A card container that displays a counter that can generate 3 totals, with label fields. It provides 3 circular counters in a single card component that can be used to display numeric values. This component requires a backing aggregate view that returns three total values. By default these are called "Count" but the names will need to be changed to display the values shown in the backing view. |
| Kanban Board 1 | Image Added | A card container that displays a basic Kanban board, designed to display the statuses of different tasks. |
| Kanban Board 2 | Image Added | As above. Includes styling to display the cards as yellow sticky notes. |
|
|