Text Points

A list of text components.

How to

The Text Points component is used to display a list of text components, each one including a title and a description.

In the .text-points--counter variation, the counter element, next to each question, is created using the .text-points__title::before pseudo-element. Its content is automatically updated using the css counter-increment property applied to the .text-points__item elements.

In the .text-points--icon variation, the icon is added using the mask CSS property: encode the SVG of the icon, then add it as the value of the URL attribute. Remember to remove width and height from the SVG code. Alternatively, you can add the icon as background-image.

Categories

• Typography

Bug report & feedback

Component Github page ↗