Skip to main content

WYSIWYGs

This provides guidance on the use of WYSIWYGs

Many of the components in this system feature an optional WYSIWYG alongside structured fields such as Title and Paragraph.

The WYSIWYG should only be used where it is not possible to achieve the desired outcome using the structured fields as this provides an obvious risk to the integrity of the design system.

Where the advanced formatting of text styles is required and a WYSIWYG is used, there are some simple rules you give consideration to.

Headings​

Do not make the headings H1 unless you are using the WYSIWYG within a Hero component. Where using H2, H3 and H4 for your headings, ensure that you are following the correct semantical hierarchy.

Formatting​

You must ensure you remove the formatting of any text before copying and pasting it into the WYSIWYG. Failure to do so can cause special characters to show on the live page.

Long URLs that would risk to bleed out of the container on mobile can have the class url-break applied which will make them break/wrap correctly.

Standard HTML anchor links can be created within the WYSIWYG.

Images​

If an image is placed within a link the image alt tag can be left blank if would have matched the text content of the link. This is for accessibility reasons to prevent doubling up of readable content.

An image needs either an alt tag or a title tag if they are the same copy. This is for accessibility reasons to prevent doubling up of readable content.

Align images inline by wrapping the image in a single div and setting the class coh-style-wysiwyg-image-inline to the wrapper.

When using a WYSIWYG inside a link item such as a 'Link - Responsive Block' or 'Link - Slide item', do not add any links into the WYSIWYG. Nesting links within link items will break the layout of the component.