Richtext

The Richtext component offers a rich text editor that allows for easy text editing in a simplified in-line editor. The edit dialog features inline editing with limited options. Using the design dialog, text formatting options such as headings, special characters, and paragraph styles can be configured.

Keeping consistency and sticking to logical hierarchies ensures that elements in the UI are clear and easily recognizable when scanning the page. Text sizes, styles, and layouts were selected to balance content and UI to foster familiarity.

The Richtext component should always be used in a Column Control nesting with a maximum width of 8 columns.

6:6 setting in Column Control to structure text shouldn't be considered, when no image is used, except an (un-) ordered list exceeds 5 list items.

Align Text left

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

How to format the text with the Richtext palette.
The text per default (like this one) is "Regular". There are several possibilities for formatting  (bold, italic, underline, ...)  a text. The text is formatted using the Richtext palette.

 ❶ Formating the text

• Bold (Use <strong> to emphasize text.)
• Italics (Use <em> to italicize text.)
• Underlined (used to apply underlined formatting to selected text or underlined text entered after the cursor.)

❷  List (see examples below)

• Unordered lists to group related items.
• Use ordered lists to group items in a pre-determined order.
• Remove/cancel a list
• Indent a text
  

❸ Link

• Path of the link or URL
• Alternative text
• Target "Same Tab" or "New Tab/Window"

❹ Remove a link

Select the link to be removed and then click on ❹ .