With this WYSIWYG editor...
...you can do anything!
Large heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed placerat mi. Aliquam vulputate justo in lectus venenatis, a faucibus lorem tincidunt. Sed facilisis sollicitudin rhoncus. Proin ac nibh ipsum. Nunc lobortis ligula maximus iaculis cursus. Cras orci leo, mattis porta consequat sit amet, lobortis et nisi. Nullam volutpat lectus ac enim malesuada pretium.
The accordion component lets users show and hide sections of related content on a page.
Accordions can be contentious from a usability perspective, as they hide content from end users, which can make pages more difficult to browse for some users. But at the same time they can make pages easier to browse for some users, as they make it easier to skim a page's headings.
Only use an accordion if there’s evidence it’s helpful for the user to:
- see an overview of multiple, related sections of content
- choose to show and hide sections that are relevant to them
- look across information that might otherwise be on different pages
For example, an accordion can work well if the user needs to reveal and compare information that’s relevant to them.
Accordions can also work well for people who use a service regularly. For example, users of caseworking systems who need to do familiar tasks quickly.
Test with users to decide if using an accordion outweighs the potential problems with hiding content.
Test content
An alterative to the Accordion is the "Details" component:
An example "Details" component
Why use this component
It can make a page easier to scan by letting users reveal more detailed information only if they need it.
When to use this component
Use the details component to make a page easier to scan when it contains information that only some users will need.
When not to use this component
Do not use the details component to hide information that the majority of your users will need.
Aenean nec mauris metus. Pellentesque in nisi lectus. Praesent est nibh, pretium vitae ex sit amet, lobortis facilisis sem. Nam accumsan justo id ornare placerat.
It's possible to use the WYSIWYG editor to publish videos uploaded to the site:
Mauris congue, erat a efficitur viverra, dui lorem ultrices urna, eu fermentum dolor justo sed dui. Vestibulum sollicitudin turpis accumsan, lacinia nisi at, malesuada tellus.
Nam dignissim arcu a commodo aliquet. In hac habitasse platea dictumst.
An example of the Quote block.
Fusce tempus pharetra tempus. Aliquam id felis quis erat pulvinar rutrum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Duis tempus tempus urna et dictum. Cras feugiat, ante mattis viverra condimentum, metus risus eleifend lectus, posuere interdum quam mauris eu neque.
Medium heading
Vivamus id urna turpis. Aenean pellentesque arcu ut lorem rhoncus gravida. Nunc auctor magna ut augue vehicula, sit amet pulvinar quam sollicitudin. Suspendisse vitae tincidunt nulla. Curabitur ullamcorper pellentesque diam et efficitur.
Maecenas vel bibendum sapien, vel dignissim tellus. Maecenas condimentum neque quis mi egestas, eget commodo augue sodales. Donec posuere leo faucibus diam finibus, quis cursus tortor iaculis.
- Fusce efficitur ac lorem ac eleifend.
- Curabitur sagittis metus enim, a rutrum velit imperdiet et.
- Aliquam erat volutpat. Etiam porta nec arcu consequat imperdiet.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin facilisis, diam id congue commodo, eros purus commodo nibh, sit amet convallis nunc dolor quis ex. Nam vitae purus lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
/*
* an example of the pre-formatted Code block
*/Aliquam erat volutpat. Integer quis nisl quam. Maecenas ac luctus dolor, sit amet aliquet enim. In et laoreet purus. Cras lobortis justo lacus, id volutpat augue efficitur et. Aliquam in suscipit mi. Aenean fringilla sed augue ac imperdiet. Donec et risus lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut convallis odio id tellus laoreet, nec consectetur massa lobortis. Mauris tristique ac metus et vestibulum. Ut finibus dui vitae tortor euismod placerat.
Vestibulum dignissim in quam accumsan blandit. Vestibulum sollicitudin ultrices diam, eget scelerisque leo suscipit a. Sed in justo lacus. Duis venenatis, orci vitae pulvinar ornare, mi nunc molestie mauris, consequat fringilla velit massa eget tellus. Cras tempor suscipit mauris, et iaculis mauris elementum a. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Beethoven - Piano Sonata No.14, Opus 27 No.2 (Moonlight Sonata)
Media & Text Component
Donec posuere quam eu massa rhoncus cursus. Pellentesque finibus eros in quam tempor bibendum. Donec fermentum erat tincidunt hendrerit volutpat. Cras lorem neque, efficitur ut elementum at, aliquam ut nisi. Quisque iaculis convallis nulla, sit amet mattis quam dignissim eu. Nullam in enim imperdiet, volutpat est et, accumsan enim. In mattis lectus sapien, eu consectetur metus posuere in.
It's possible to add structural elements such as columns to pages...
25% Spacing
Nam vel condimentum enim, sit amet facilisis ligula. Etiam ac eros sit amet massa cursus ullamcorper id vel sem. Maecenas eu velit eget leo consequat lacinia. In nec aliquet nisi. Mauris porttitor, orci mattis cursus pretium, sapien massa laoreet massa, non vehicula neque ante et odio. Integer suscipit lorem nec lacus pretium, ac lacinia sem pulvinar.
50% Spacing
Nullam at leo in orci hendrerit vestibulum. Cras orci sapien, porta nec sem sit amet, feugiat ultrices nulla. Nulla rhoncus lacinia turpis, ac aliquam lectus consequat eu. Pellentesque tincidunt dapibus eros ut dapibus. Aenean viverra risus ex, in pulvinar tellus fermentum sit amet. Proin lacinia est nec lacus venenatis, eu tincidunt lacus sollicitudin. Maecenas quis luctus mauris. Praesent maximus volutpat nunc, sed luctus mauris finibus sit amet. Morbi et lorem nec dolor mattis consectetur. Aenean sed ornare elit. Vivamus et ipsum suscipit, fringilla libero in, varius eros. Maecenas fringilla imperdiet mi vitae blandit. Pellentesque ac augue fringilla, ornare nisl non, rutrum leo.
25% Spacing
Est sit amet facilisis magna etiam tempor orci eu. Turpis egestas integer eget aliquet nibh praesent tristique. Ultrices mi tempus imperdiet nulla malesuada pellentesque. Id consectetur purus ut faucibus pulvinar elementum integer. In tellus integer feugiat scelerisque varius. Iaculis at erat pellentesque adipiscing commodo elit.