Typography
A variety of stylistic options are available to the editor through the WYSIWYG editor. Showcasing elements and styles that are available to editors when authoring content.
Heading 2
Text
Heading 3
Text
Heading 4
Text
Heading 5
Text
Heading 6
Text
Table
| header a | header b |
|---|---|
| a | b |
| aa | bb |
Table - Striped
| header a | header b |
|---|---|
| a | b |
| aa | bb |
Lists
Unordered
- One.
- Two.
- Three. Well, probably this list item should be longer. Note that for short items lists look better if they are compactly presented, whereas for long items, it would be better to have more vertical spacing between items.
- Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.
- Nested list item.
Ordered
- One.
- Two.
- Three. Well, probably this list item should be longer. Note that for short items lists look better if they are compactly presented, whereas for long items, it would be better to have more vertical spacing between items.
- Four. This is the last item in this list. Let us terminate the list now without making any more fuss about it.
- Nested list item.
Quotes
A basic quote added via the WYSIWYG quote button.
Buttons / Links
Standard colour
Title of the blockquote
Description of the blockquote
This is standard colour.
Alternate colour
Title of the blockquote
Description of the blockquote
This is alternate colour.
Primary colour
Title of the blockquote
Description of the blockquote
This is primary colour.
Secondary colour
Title of the blockquote
Description of the blockquote
This is secondary colour.
Accent colour
Title of the blockquote
Description of the blockquote
This is accent colour.
Neutral colour
Title of the blockquote
Description of the blockquote
This is neutral colour.
Alerts
Neutral alert — this is a plain notice with no semantic colour, just the base alert box.
Info alert — heads up, here's some helpful information you might want to know.
Success alert — your changes have been saved successfully.
Warning alert — please double-check this before continuing.
Error alert — something went wrong and needs your attention.
Neutral alert — this is the neutral variant with the soft modifier layered on top.
Soft alert — this is the info variant with the soft modifier layered on top.
Success alert — this is the success variant with the soft modifier layered on top.
Warning alert — this is the warning variant with the soft modifier layered on top.
Error alert — this is the error variant with the soft modifier layered on top.