Hero illustrations

Hero illustrations are decorative images used in product pages, empty states, and onboarding flows. They help communicate a message or set the tone for a section of the application.

These images are very large in size. You will likely need to resize them before implementing them in your code to ensure optimal page performance and loading times.

You can download all hero illustrations in a .zip file here.

Available illustrations

Below is a list of all available hero illustrations. Use the .img-fluid class to make them responsive within their container.

checkbox_hero.png

cloud_hero.png

coin_hero.png

heart_hero.png

hourglass_hero.png

paper_plane_hero.png

pie_chart_hero.png

plant_hero.png

platform_hero.png

star_hero.png

Usage

Add the .img-fluid class to make the illustration scale with its parent container. You can also combine it with shape classes such as .img-rounded or .img-squerkle.

<img class="img-fluid" src="{path}/star_hero.png" alt="Star hero illustration">