Styles and design components

WYSIWYG stands for What-You-See-Is-What-You-Get, an editor interface that allows you to view something very similar to the end result while you create your content.

How and when to use the styles

Make sure the content on your page is relevant to the title and that the structure is clear and logical to the reader. All building blocks on your sites - the page content as a whole, as well as paragraphs and sentences - should be front-loaded with the important information at the beginning.

So ... what's in the Box?

Sorted by the order in the WYSIWYG toolbar we have ...

Undo and redo

Paragraph styles (HTML block styles)

Normal text

Heading 2

Headings are numbered based on the HTML hierarchy that reserves H1 for the title of the node.

Heading 3

Heading 4

We also have headings 5 and 6, but if you need to use those your content might be a bit crowed for an online audience.

Custom styles (HTML paragraph styles)

Lead text, useful to front-load your content for online audiences.

Centered paragraph

Primary Call out to draw your reader's attention

Notice Call out to draw your reader's attention

Alert Call out to draw your reader's attention

Custom styles (HTML inline styles)

Highlighter

Custom button styles (HTML inline button styles)

Primary button Dark button Outline button Arrow Link style

Special characters

Editors can also insert special characters including Maori macrons also know as tohutō (or pōtae - hat) – ā, ē, ī, ō, ū, Ā, Ē, Ī, Ō and Ū

Internal and external links

LinkIT provides a sustainable solution for internal links. You don't have to copy or remember the URL, instead you can highlight the text to link, and use an autocomplete search to select the right page. LinkIT embeds internal links based on ID not URLs so that links don't break when page titles or URL aliases are updated.

For external links just copy and paste the external link into to LinkIt URL field and confirm that it is an external link.

Advanced link attributes allow editors to add classes, aria labels, IDs and link relationships.

HTML anchors allow you to link within a page. Set an anchor and link to it by setting #name-of-your-anchor as the URL in the LinkIT URL field.

To edit or remove links, click on the link text.

Basic text formats

You can make text bold, italic, ~~strike through it~~, and use ^superscript and _subscript.

Lists - unordered

List item 1
List item 2
List item 3
List item 4

You can choose at which number to start and reverse the order

Lists - ordered

List item 1
List item 2
List item 3
List item 4

Increase indent / Decrease indent

Bullet point 1
- Bullet point 2
  - Bullet point 3
Bullet point 4

List item 1
1. Increase indent / Decrease indent
  1. Double Increase indent
List item 3
List item 4

Quotes

Not all those who wander are lost.

Tables

You can define add a table, set a table caption, add and remove rows and columns, and choose between heading rows or column or both. You can also merge and un-merge cells.

table caption
	heading row	table header	table header	table header
heading column	cell	cell	cell	cell
table header	cell	cell	cell	cell
table header	cell	cell	cell	cell
table header	cell	cell	cell	cell
table header	cell	cell	cell

Media

Sector includes the media file manager, preconfigured media types and view modes. Use the 'Insert media' button to upload images and files and insert them into the content or embed remote videos.

Images

Large view mode