Cards
Cards are used to separate and highlight elements on dashboards. These are white boxes with a shadow underneath and can contain filters, KPIs, charts, tables and text. Cards can be full width as well as split into multiple segments across a page.
When multiple elements are within a single card (such as filters or KPIs) then these are separated by grey dividers.
Individual element cards
The easiest way is to use and create cards is to start with the empty templates and use the existing cards. Copy, paste and adjust if required.
Individual element cards
- The card should be a white container with 16px inner padding
-
A 2px height container with background colour of #D8DBDC should be placed underneath to create the shadow
- A new vertical container should be placed within the card
- The elements can now be placed within this new vertical container
- The inner padding of each element should be 16px top (apart from the top element)
Multiple element cards (such as filters and KPIs)
The easiest way is to use and create cards is to start with the empty templates and use the existing cards. Copy, paste and adjust if required.
Multiple element cards (such as filters and KPIs)
- The card should be a white container with 16px inner padding
- A 2px height container with background colour of #d8dbdc should be placed underneath to create the shadow
- A new horizontal container should be placed in the card with a background colour of #d8dbdc
- The elements can now be placed within this new horizontal container
- The inner padding of each element should be 16px left (apart from the further left element) and 16px right
- Each element should have a white background
- The outer padding of each element should be 1px left (apart from the furthest left filter) to give the dividers
- All elements within the card should be in equal width