Card
Cards are a way to display information, they can be part of a series or feed of similar content and function as a standalone unit. You can add text link or buttons to a card for primary action. This component is used on the dashboard.
Examples of usage in Spiris includes encouraging payroll administrators to start preparing the next wagerun period when the previous one is closed, encouraging employees to report their time for the previous week or month and encouraging recruiters to review recent applications to open positions. It is very common that the hero card includes both a primary action and a secondary action.
Use when
- You need to highlight important information and actions for the user
- You want to encourage the user to perform a time sensitive action
- You want to give the user quick access to key tasks
Basic design
The hero card is constructed around grid system and helper classes (eg. spacings, display, flex) for a better integration in your project.
Welcome, Smith
It's time to onboard a new team member in September. Preparations need to be done by tomorrow, 14 September, 2022.
More examples
For the image to wrap under the hero card content, add the .flex-wrap class (flex helper classes) to the main wrapper or .order-* (order helper classes) to the box you need to re-order.
Welcome, Smith
It's time to onboard a new team member in September. Preparations need to be done by tomorrow, 14 September, 2022.
Options
Larger illustration
Add .hero-card-illustration-lg class to the illustration wrapper (.hero-card-illustration) to have a larger illustration.
Welcome, Smith
It's time to onboard a new team member in September. Preparations need to be done by tomorrow, 14 September, 2022.
By the way, expect your next payment on 25 of September, 2021.
Show/Hide illustration (responsiveness/light-dark mode)
To hide/show the illustration at a certain grid breaking point, use the display helper classes on the illustration column grid wrapper.
First add the .d-none class as a general start point and then .d-flex appropriate variant for the breaking point that the illustration need to be displayed.
Welcome, Smith
It's time to onboard a new team member in September. Preparations need to be done by tomorrow, 14 September, 2022.