WYSIWYG Functions

Bold or Italic, Strikethrough, Superscript, Subscript

 and Anchors and Hyperlinks

Button Button 1 Button 2 Button 3  Button 4

Button 5

 

  • Bulleted
  • List

 

  • In different
  • styles

 

  • any more
  • styles

 

  1. Numbered
  2. List

Typography selectors (see Typography here)

Block Quote Style

Horizontal Line 


Tables 

 Column 1Column 2
Row 1  
Row 2  

Column Layouts 

2-Columned Content Column 1

2-Columned Content Column 2

 

2-Columned Content Column 1 - with keyline

2-Columned Content Column 2 - with keyline

 

2-Columned Content Column 1

2-Columned Content Column 2

 

3-Columned Content Column 1

3-Columned Content Column 2

3-Columned Content Column 3

 

3-Columned Content Column 1 - large left

3-Columned Content Column 2 - large left

3-Columned Content Column 3 - large left

 

3-Columned Content Column 1 - large center

3-Columned Content Column 2 - large center

3-Columned Content Column 3 - large center

 

3-Columned Content Column 1 - large right

3-Columned Content Column 2 - large right

3-Columned Content Column 3 - large right

 

4-Columned Content Column 1

4-Columned Content Column 2

4-Columned Content Column 3

4-Columned Content Column 4

Back

Common Column Uses

Person's Name

You can enter a person's bio here. And as the bio text continues, the text will always stay constrained within this 2/3 section, and will not wrap around the image. When the viewport is small enough, the text will all flip under the image, which is the preferred behaviour to wrapping until just a single word or even letter appears beside the picture.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum mi a est mattis tincidunt. Ut placerat, metus sit amet vestibulum aliquet, leo mauris condimentum massa, tincidunt dictum felis tortor ac leo. Aliquam erat volutpat. Donec sit amet nisi placerat, vulputate lorem sagittis, elementum libero. Pellentesque mollis justo ut fermentum luctus. Nam eleifend a eros in pharetra. Curabitur vitae arcu in ligula lobortis hendrerit ut eget lorem. Ut tortor justo, egestas vel ex at, consequat posuere ipsum. Pellentesque nec vulputate magna, eget faucibus nisi. Nullam porttitor porttitor dui. Sed augue orci, ullamcorper ac augue nec, ullamcorper ultrices felis.

As opposed to:

Person's Name

You can enter a person's bio here. And as the bio text continues, the text will eventually wrap around the image, and in responsive settings, this can cause major display problems.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vestibulum mi a est mattis tincidunt. Ut placerat, metus sit amet vestibulum aliquet, leo mauris condimentum massa, tincidunt dictum felis tortor ac leo. Aliquam erat volutpat. Donec sit amet nisi placerat, vulputate lorem sagittis, elementum libero. Pellentesque mollis justo ut fermentum luctus. Nam eleifend a eros in pharetra. Curabitur vitae arcu in ligula lobortis hendrerit ut eget lorem. Ut tortor justo, egestas vel ex at, consequat posuere ipsum. Pellentesque nec vulputate magna, eget faucibus nisi. Nullam porttitor porttitor dui. Sed augue orci, ullamcorper ac augue nec, ullamcorper ultrices felis.

 

It can also be used to display Icons or card-style displays and maintain the relationship between text and images 

 Text Title or Description here

 Text Title or Description here

 Text Title or Description here

 

Coloured Boxes

You can enter full WYSIWYG content here with full editing capabilities

 

Accordions

 

Images via Media or Insert Image (resizable)

This image can be resized by clicking any corner and dragging the image, or using the size dropdown to identify the exact size numerically in pixels. 

It also requires alternate text (primarily for accessibility), or the decision that te image is purely decorative and doesn't need any alternate text. 


UBC Crest The official logo of the University of British Columbia. Urgent Message An exclamation mark in a speech bubble. Caret An arrowhead indicating direction. Arrow An arrow indicating direction. Arrow in Circle An arrow indicating direction. Arrow in Circle An arrow indicating direction. Chats Two speech clouds. Facebook The logo for the Facebook social media service. Information The letter 'i' in a circle. Instagram The logo for the Instagram social media service. Linkedin The logo for the LinkedIn social media service. Location Pin A map location pin. Mail An envelope. Menu Three horizontal lines indicating a menu. Minus A minus sign. Telephone An antique telephone. Plus A plus symbol indicating more or the ability to add. Search A magnifying glass. Twitter The logo for the Twitter social media service. Youtube The logo for the YouTube video sharing service.