These are examples of some of the styles available in North Shore, the theme used by the WSO website.

Theme Colors

This is the theme’s Light Teal: 33a7a4

This is the theme’s Dark Teal: 004652

Headings

This is an H1 heading

This is an H2 heading

This is an H3 heading

This is an H4 heading

This is an H5 heading

This is an H6 heading

Paragraph Text

This is paragraph text.

Lorem ipsum dolor sit amet, ut legere noster volumus cum, ex sit vide fabulas detracto, vix ei modo epicuri delicatissimi. Has in etiam laudem, sit et dicunt comprehensam. Latine fierent accumsan in nec. In dolor quaestio eam, te civibus voluptaria vim. Denique atomorum pertinacia eos et. Nam amet ubique disputando no, vix delenit nusquam efficiantur te, epicuri maluisset an vim.

Per eu putent accommodare, ad eos doctus cotidieque, has ne denique persecuti. Cu dolor albucius per. Epicuri albucius adipisci id eum. Nostrum indoctum no nam, in vix debet mnesarchum.

Lists

This is the first item in the bulleted list.
This is the second item in the bulleted list.
This is the third item in the bulleted list.
This is the fourth item in the bulleted list.
This is the fifth item in the bulleted list.

This is the first item in the numbered list.
This is the second item in the numbered list.
This is the third item in the numbered list.
This is the fourth item in the numbered list.
This is the fifth item in the numbered list.

Tables

First column header	Second column header	Third column header
First row, first column	First row, second column	First row, third column
Second row, first column	Second row, second column	Second row, third column
Third row, first column	Third row, second column	Third row, second column

This is an (optional) caption for the table.
(Captions have proven difficult to center!)

Buttons

This is a “fill” button
with bold text

This is an “outline” button
with bold text

How to Handle Underlining

The WordPress Gutenberg editor (Block editor) doesn’t have an option for underlined text in its floating menus. Thus to underline text, one has to do some very simple HTML editing:

Create the text in a block the way you want it.
Select from the floating menu (right dropdown): Edit as HTML . The HTML code for that block will be displayed.
Add the characters <u> just before the text you want underlined. Add the characters </u> just after the text you want underlined.
Select Edit Visually from the floating menu. The block should then appear “normal”, with the underlining.
If all looks good, you’re done!