This is an example "Header 1" (H1)
This is an example "Header 2" (H2)
This is an example "Header 3" (H3)
This is an example "Header 4" (H4)
This is an example "Header 5" (H5)
This is an example "Header 6" (H6)
This is an example paragraph. This Kitchen Sink page displays most of what's possible using only the WYSIWYG (What You See Is What You Get) content editors in WordPress on this site.
This is another example paragraph with some additional elements. This is bold text elit, sed do eiusmod tempor incididunt ut inline link labore et dolore magna aliqua. Ut enim ad minim veniam, strikethrough text laboris nisi ut aliquip ex ea commodo consequat. Underlined text reprehenderit in marked text velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <inline code>
non proident, sunt in culpa qui officia this is abbr text mollit anim id est laborum. ctrl + , (keyboard instructional text).
Example unordered list:
- Item 1
- Item 2 (a longer item here) lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
- Item 3
- Nested Item 1
- Nested Item 2
- Item 4 donec id elit non mi porta gravida at eget metus. Donec sed odio dui.
- Item 5 etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Example ordered list:
- Item 1
- Item 2 (a longer item here) lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
- Item 3
- Nested Item 1
- Nested Item 2
- Item 4 donec id elit non mi porta gravida at eget metus. Donec sed odio dui.
- Item 5 etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Example definition list:
- Definition Term
- Definition description.
- Definition Term 2
- Definition description 2.
- Definition Term 3
- Definition description 3.
Example blockquote:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Example <hr>
(horizontal rule):
AVAILABLE SHORTCODES:
The following custom shortcodes can be copied and pasted into any WYSIWYG editor on the site to output dynamic content. The red
examples below show default values; in other words, if you omit certain attributes when using the shortcode, the default values will be applied.
[btn]
[cta]
[columns-two]
[columns-three]
[columns-four]
[collapse]
[icon]
Buttons #
[btn text="Contact Us" url="/contact-us/" color="primary" size="" ghost="false" block="false" xclass=""]
- Change
text
to whatever text you want displayed on the button (defaults to "Contact Us" if not defined). - Change
url
to wherever you want the button to link to (defaults to "/contact-us/" if not defined) color
can beprimary
(default, green),green
,secondary
(blue),blue
,light
ordark
.size
can besmall
, empty (default, which is medium-sized), orlarge
.ghost
can betrue
orfalse
(default), which generates an outlined button instead of a solid background.block
can betrue
orfalse
(default), which generates a full-width block button.xclass
- include any additional CSS classes you wish to add here.
Small Regular (no size defined) Large
Primary Color (no color defined) Secondary Color Light Dark
Primary Ghost Secondary Ghost Light Ghost Dark Ghost
CTA Box #
[cta color="white" smalltext="Refer businesses" largetext="$250" button="Refer Now" url="/public/refer-a-business"]
color
defaults to white; optionally change to blue (as seen below).smalltext
is the small text at the top.largetext
is the large centered text.button
defines the button text.url
defines the button URL.
Columns #
Split content into two, three or four equal-width columns. Vertically align content to the top
(default), middle
or bottom
of the columns. Optionally condense the width of the overall container by setting condensed
to true
. Optionally include additional CSS classes via xclass
.
[columns-two valign="top" xclass="" condensed="false"]
...your content here... [column-split]
...your content here... [/columns-two]
- or -
[columns-three valign="top" xclass="" condensed="false"]
...your content here... [column-split]
...your content here... [column-split]
...your content here... [/columns-three]
- or -
[columns-four valign="top" xclass="" condensed="false"]
...your content here... [column-split]
...your content here... [column-split]
...your content here... [column-split]
...your content here... [/columns-four]
Expandable/Collapsible Content #
[collapse button_text="View More" button_class="btn-primary" xclass=""] ... [/collapse]
(replace the ellipsis above with the content you wish to expand/collapse)
button_text
- define the button text (defaults to "View More").button_class
- define button styling using Bootstrap 4 button classes (btn
is already added).xclass
- add extra CSS classes to the element's outer wrapper (separate multiple by spaces).
…put your content here…
CL_NM Icon Library & Shortcode #
[icon icon="CLIENT_CODE_LWR" url="" size="lg" xclass=""]
- Do NOT use the XML in WYSIWYG editors; use the shortcode instead.
- Optionally add
url="https://www.google.com/"
to the shortcode to turn the icon into a link (changing the URL). - Optionally change
size
toxs
,sm
,md
orxl
(lg
is default):
xs
sm
md
lg
xl
xxl
- You can change an icon's color by adding these CSS classes as an
xclass
parameter on the shortcode:lime
green
blue
white
gray
gray-dark
(default)
- (The suo logo and mark, and sign-in icons cannot change colors.)
- For example, "
[icon icon="icon-school" url="https://stevenson.edu/online" xclass="green"]
" will display the following (notice its color and that it's a link):
Preview | Name | Shortcode | XML (requires loading of symbol.svg, which is loaded sitewide) |
---|---|---|---|
icon-advising | [icon icon="icon-advising"] |
<svg><use xlink:href="#icon-advising"></use></svg> |
|
icon-chevron-left | [icon icon="icon-chevron-left"] |
<svg><use xlink:href="#icon-chevron-left"></use></svg> |
|
icon-chevron-right | [icon icon="icon-chevron-right"] |
<svg><use xlink:href="#icon-chevron-right"></use></svg> |
|
icon-class | [icon icon="icon-class"] |
<svg><use xlink:href="#icon-class"></use></svg> |
|
icon-clock | [icon icon="icon-clock"] |
<svg><use xlink:href="#icon-clock"></use></svg> |
|
icon-lock | [icon icon="icon-lock"] |
<svg><use xlink:href="#icon-lock"></use></svg> |
|
icon-meeting | [icon icon="icon-meeting"] |
<svg><use xlink:href="#icon-meeting"></use></svg> |
|
icon-person | [icon icon="icon-person"] |
<svg><use xlink:href="#icon-person"></use></svg> |
|
icon-school | [icon icon="icon-school"] |
<svg><use xlink:href="#icon-school"></use></svg> |
|
suo-logo | [icon icon="suo-logo"] |
<svg><use xlink:href="#suo-logo"></use></svg> |
|
suo-logo-white | [icon icon="suo-logo-white"] |
<svg><use xlink:href="#suo-logo-white"></use></svg> |