These CSS classes were meant to extend or decorate elements without the need of also adding an option into an element.
u-title-dashes
This is a decorative css class that is intended to be used on heading elements. It will add 2 lines before and after the title eg: https://d.pr/i/LZW4Ux and can be found used in London demo’s shop cover .
u-hover-img-animation
This is a decorative css class that is intended to be used on image elements, to animate themselves on user hover interaction eg: https://d.pr/v/nvvhPY and can be found used in Beijing demo Featured categories section.
u-transparent-gradient
This is also a decorative css class and also a problem fixer, that is intended to be used on header page covers, to provide a better contrast through a subtle gradient, from darker to transparent. Can be found used in Melbourne demo in the header and in Milano demo in the header as well.
The class is applied on the section that holds the header eg: https://d.pr/v/sXfvMd .
Note: a gradient background could’ve been applied on the section, however this css class applies this gradient on :before pseudo-selector, allowing the gradient to stretch vertically 1.5x than the section height.
At some point these css classes might be converted into element options at some point, but for the moment, this solution is clean too, even though not really intuitive.