Components - Material themed cards

These cards are meant to be themed using only the following variables:

  --primary-hue: 265;
  --primary-saturation: 90%;
  --primary-lightness: 47%;

  --surface: white;
  --background: white;
  --card-text: #424242;
  --body-text: #424242;

It works with HSL colors, by inputting the --primary-hue, --primary-saturation and --primary-lightness separately.

These cards can be used anywhere and will fit 100% of their parent container. We recommend using them with a grid system, like the one used here.

All cards are prented with a sticky filter bar, to present how they can interact. The sticky bar is compatible with the color theming, but is not required.

Those cards follow the material design guidelines. If you need to build your page around those cards, visit

Line chart

Bar and pie chart

Data table

Sticky filter

A material themed version of a sticky filter component. Fit for dashboards with cards.

Full dashboard

This is a reproduction of the monitoring dashboard using the above components.

Full dashboard with multiple primary colors

You can use multiple color theme on the same page by adding classes that redefines the same color variables as in :root ( --primary-hue, --primary-saturation etc.) . In this example, we add the following css class: is-info, is-warning, is-success. Then we apply them on <section class="row is-XXX">…</section> to give specific colors to sections.