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.
It's time to onboard a new team member in September. Preparations need to be done by tomorrow, 14 September, 2022.
<divclass="container"><divclass="row"><sectionclass="hero-card"><divclass="col-md-7 col-lg-6 col-xl-7"><divclass="hero-card-content"><h2class="card-title">Welcome, <strong>Smith</strong></h2><p>It's time to onboard a new team member in <strong>September</strong>. Preparations need to be done by tomorrow, <strong>14 September, 2022</strong>.</p><divclass="btn-block"><buttontype="button"class="btn">Workflow overview</button><buttontype="button"class="btn btn-primary">Begin preparation</button></div></div></div><divclass="col-md-5 col-lg-6 col-xl-5 pr-md-0 mb-n32 justify-content-center justify-content-md-end"><pictureclass="hero-card-illustration"><imgclass="show-on-light"src="<?php if (isset($assetImagePath)) echo $assetImagePath. 'yoga-illustration-light.svg'; ?>"alt="Yoga illustration"><imgclass="show-on-dark"src="<?php if (isset($assetImagePath)) echo $assetImagePath. 'yoga-illustration-dark.svg'; ?>"alt="Yoga illustration"></picture></div></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.
It's time to onboard a new team member in September. Preparations need to be done by tomorrow, 14 September, 2022.
<divclass="container"><divclass="row"><sectionclass="hero-card flex-wrap"><divclass="col-md-7 col-lg-6"><divclass="hero-card-content"><h2class="card-title">Welcome, <strong>Smith</strong></h2><p>It's time to onboard a new team member in <strong>September</strong>. Preparations need to be done by tomorrow, <strong>14 September, 2022</strong>.</p><divclass="btn-block"><buttontype="button"class="btn">Workflow overview</button><buttontype="button"class="btn btn-primary">Begin preparation</button></div></div></div><divclass="col-md-5 col-lg-6 pr-md-0 mb-md-n32 justify-content-center justify-content-md-end"><pictureclass="hero-card-illustration"><imgclass="show-on-light"src="<?php if (isset($assetImagePath)) echo $assetImagePath. 'house-illustration-light.svg'; ?>"alt="House illustration"><imgclass="show-on-dark"src="<?php if (isset($assetImagePath)) echo $assetImagePath. 'house-illustration-dark.svg'; ?>"alt="House illustration"></picture></div></section></div></div>
Options
Larger illustration
Add .hero-card-illustration-lg class to the illustration wrapper (.hero-card-illustration) to have a larger illustration.
Demo page! Here you can find a demo page where you can test the this hero card.
<divclass="container"><divclass="row"><sectionclass="hero-card"><divclass="col-lg-6"><divclass="hero-card-content"><h2class="card-title">Welcome, <strong>Smith</strong></h2><p>It's time to onboard a new team member in <strong>September</strong>. Preparations need to be done by tomorrow, <strong>14 September, 2022</strong>.</p><divclass="btn-block"><buttontype="button"class="btn">Workflow overview</button><buttontype="button"class="btn btn-primary">Begin preparation</button></div><p>By the way, expect your next payment on <strong>25 of September, 2021</strong>.</p><divclass="d-flex flex-wrap justify-content-between"><spanclass="h1"><b>2,340.30 €</b></span><aclass="btn btn-link"href="#!">More details <spanclass="caret caret-arrow caret-large-primary ml-8"></span></a></div></div></div><divclass="col-lg-6 pr-lg-0 mb-lg-n32 justify-content-center justify-content-lg-end"><pictureclass="hero-card-illustration hero-card-illustration-lg"><imgclass="show-on-light"src="<?php if (isset($assetImagePath)) echo $assetImagePath. 'house-illustration-light.svg'; ?>"alt="House illustration"><imgclass="show-on-dark"src="<?php if (isset($assetImagePath)) echo $assetImagePath. 'house-illustration-dark.svg'; ?>"alt="House illustration"></picture></div></section></div></div>
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.
It's time to onboard a new team member in September. Preparations need to be done by tomorrow, 14 September, 2022.
<divclass="container"><divclass="row"><sectionclass="hero-card"><divclass="col-lg-6 col-xl-7"><divclass="hero-card-content"><h2class="card-title">Welcome, <strong>Smith</strong></h2><p>It's time to onboard a new team member in <strong>September</strong>. Preparations need to be done by tomorrow, <strong>14 September, 2022</strong>.</p><divclass="btn-block"><buttontype="button"class="btn">Workflow overview</button><buttontype="button"class="btn btn-primary">Begin preparation</button></div></div></div><divclass="col-lg-6 col-xl-5 pr-0 mb-n32 justify-content-end d-none d-lg-flex"><pictureclass="hero-card-illustration"><imgclass="show-on-light"src="<?php if (isset($assetImagePath)) echo $assetImagePath. 'yoga-illustration-light.svg'; ?>"alt="Yoga illustration"><imgclass="show-on-dark"src="<?php if (isset($assetImagePath)) echo $assetImagePath. 'yoga-illustration-dark.svg'; ?>"alt="Yoga illustration"></picture></div></section></div></div>
Design System
