Hero card
A hero card is a dashboard element that includes a big card that draws extra attention to important information or actions. It typically uses larger font sizes, an illustration and a primary action. It can use static content, but can also be used to highlight information and actions that are of importance at a certain moment in time, in combination with e.g. notifications.
Examples of usage in Visma products 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.
See examples in the prototypes of Visma Recruit, Visma Flyt Kindergarten, Payroll Go and more.
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.
<div class="row">
<div class="col-xl-8">
<!-- Hero card structure -->
<section class="hero-card">
<div class="col-md-7 col-lg-6 col-xl-7">
<div class="hero-card-content">
<h2 class="card-title">
Welcome, <strong>Smith</strong>
</h2>
<p>
It's time to onboard a new team member in <strong>September</strong>...
</p>
<div class="btn-block">
<button class="btn">Workflow overview</button>
<button class="btn btn-primary">Begin preparation</button>
</div>
</div>
</div>
<div class="col-md-5 col-lg-6 col-xl-5 pr-md-0 mb-n32 justify-content-center justify-content-md-end">
<picture class="hero-card-illustration">
<img class="show-on-light" src="...path-to-img/yoga-illustration-light.svg" alt="Yoga Illustration">
<img class="show-on-dark" src="...path-to-img/yoga-illustration-dark.svg" alt="Yoga Illustration">
</picture>
</div>
</section>
</div>
<div class="col-xl-4">
<section class="panel rounded-10">
Basic panel example
</section>
</div>
</div>
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.
<section class="hero-card flex-wrap">
...
</section>
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.
<section class="hero-card">
<div class="col-lg-6">
<div class="hero-card-content">
...
</div>
</div>
<div class="col-lg-6 pr-lg-0 mb-lg-n32 justify-content-center justify-content-lg-end">
<picture class="hero-card-illustration hero-card-illustration-lg">
<img src="...path-to-img/house-illustration.svg" alt="House Illustration">
</picture>
</div>
</section>
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.
Also you can display a different illustration on dark mode (to fit the colors), light/dark mode helper classes.
Welcome, Smith
It's time to onboard a new team member in September. Preparations need to be done by tomorrow, 14 September, 2022.