Rich Text - ariel-fer/Araena GitHub Wiki

Rich texts are basically a group of other elements, added as a main single element.

Pre-requisites

The following classes must be set prior to this one:

  • Titles
  • Texts
  • Lists
  • Wrappers

Set properties

last-child element

It is important to understand that even after setting exactly the same properties, there will always be a margin added to the last element that cannot be taken out the same way we do with our single elements, in which the margin is added by a wrapper and can be controlled for each element, but not in a rich texts where you can apply properties to all or none of them.

In order to overcome that, we apply a custom code to last-childs of the rich text class:

/* Remove margins from last element in rich content*/
.c-rich-content :last-child {
  margin-bottom: 0;
}

Verify Titles are displayed correctly

Can be seen in the Style guide section for this element:

image.png

A succeeded rich text element means that each of its elements is equally aligned to its equal single element. The following shows that using X-ray, none is properly aligned:

image.png

Classes related

Class Description
c-rich-content Default rich text
⚠️ **GitHub.com Fallback** ⚠️