Oasis Design System

components

Header

The HTML markup for a step header within an interaction

View raw

Changing the icon & text colour

The colour of the header icons & text may need to change for certain steps. For instance, in cases where the step background colour is dark and the icons + text need to be light.

The default colour for the icons and header title is set within the theme’s CSS file but can be over-ridden by applying a colour class to the element’s markup. For example:

<button class='step-header__action left-0 text-black btn--back-step'>

So adding the class text-black will override the icons default colour and show it as black.