Page to demo the general features of the WYSIWYG Component.

 Copy/Pasting from Microsoft Word
Copy/Pasting from Microsoft Word or other text processing software, can bring along formatting from the original document which could affect existing content and layout of the page. To get around this you can use the Paste as plain text button in the WYSIWYG Toolbar or, if not supported, use the following keyboard key combination to paste as plain text: Ctrl + Shift + V or Cmd + Shift + V on Mac

WYSIWYG Headings

H2 heading

H3 heading

H4 heading

H5 heading
H6 heading

unordered list

  • List item level 1
    • List item level 2
      • List item level 3

ordered list

  1. Normal
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
  2. Type a
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
  3. Type i
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
  4. Type A
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4
  5. Type I
    1. List item 1
    2. List item 2
    3. List item 3
    4. List item 4

Text alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac lorem in quam accumsan aliquet. Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac lorem in quam accumsan aliquet. Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac lorem in quam accumsan aliquet. Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

 

Image media Display options

Original Display
Default Display
WYSIWYG Display
Full content Display

Trees
Bench under trees
square.png

Trees
Bench under trees

Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

 

 

Trees

 Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

WYSIWYG | Advanced Image left

Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

WYSIWYG | Advanced Image right

Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus. Nullam scelerisque mi porta mi laoreet, vitae elementum purus blandit. Fusce varius ultricies elit. Nunc non posuere dolor. Cras tempor purus sed lectus fringilla finibus.

Linked text zip linked

Link text buttons

Classes: button primary
Primary

Classes: button hollow
Primary Hollow

Classes: button secondary
Secondary

Classes: button secondary hollow
Secondary Hollow

Card title style button | Classes: button button-card | Fullwidth: expanded
Card title style button

<a class="button button-card" href="#"><span>Card title style button</span></a>
  
// To expand buttons across the fullwidth add class expanded
<a class="button button-card expanded" href="#"><span>Card title style button</span></a>