Kitchen Sink

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)

Display 1

Display 2

Display 3

Display 4

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:

Example ordered list:

  1. Item 1
  2. Item 2 (a longer item here) lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
  3. Item 3
    1. Nested Item 1
    2. Nested Item 2
  4. Item 4 donec id elit non mi porta gravida at eget metus. Donec sed odio dui.
  5. 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.

Someone famous in Source Title

Example <hr> (horizontal rule):


Mega Menu

  1. Place Top Level main navigation items first (the items that always display on desktop sizes)
  2. If you want to create a mega menu you will need to place some dummy nav items in order to create start and ending column markers
    • These can be made with the Custom Links option and placing a # in the URL.
    • Link Text should be something like START or END so that it is easily recognized
    • Expand the new menu item and toggle Start Column or End Column, depending on need
    • You can also designate a column as a green background "CTA" column by checking the appropriate button under CTA. Note this is only available under Start Column items
  3. For each column in the mega menu you will need a Start and an End (the text of these are not shown)
  4. Between the Start and End items you can add in your menu items which will be links
  5. For menu items you can also add Text Content that will be displayed
  6. Under Style tab you can select to make a menu item a Title, adjust size, or display as button
  7. Note it is not recommended to go more than 3 levels deep in linking. The third level will be display as a slide out and this should only be used on the right most column.

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.

[callrail_form][file_modified][search][noindex][searchform][columns][btn][icon][cta][amp-gist][table][table-info]

Buttons #

[btn text="Contact Us" url="/contact-us/" color="primary" size="" ghost="false" block="false" xclass=""]

Small Regular (no size defined) Large

Primary Color (no color defined) Secondary Color Light Dark

Primary Ghost Secondary Ghost Light Ghost Dark Ghost

Example Block Button


Columns #

Split content into columns by defining column size based on a 12 column grid. e.g. cols="6,6" or cols="3,3,6" etc. Optionally you can define one column and it will be applied to subsequent columns. This is a good option for longer lists of images e.g. cols="2" Vertically align content to the top (default), middle or bottom of the columns. Optionally you can set a minimum column width col_min="#" which will be the final column width of all columns, where 6 would be two per row. Optionally condense the width of the overall container by setting condensed to true. Optionally include additional CSS classes via xclass.

[columns cols="4,4,4" cols_min="6" valign="top" xclass="border p-4" condensed="false"]
...your content here...
[column-split]

...your content here...
[column-split]

...your content here...
[/columns]

…your content here…

…your content here…
…your content here…


CTA

[cta id="CTA_ID" xclass="" hide_title="true/false"]

Created to be used in Blog Posts. Replace the CTA_ID with the ID of the CTA to use that can be found on the CTA listing.


Icon Library & Shortcode #

[icon icon="search" url="" size="lg" xclass=""]

Preview Name Shortcode XML (requires loading of symbol.svg, which is loaded sitewide)
arrow [icon icon="arrow"] <svg><use href="#arrow" xlink:href="#arrow"></use></svg>
calendar [icon icon="calendar"] <svg><use href="#calendar" xlink:href="#calendar"></use></svg>
check [icon icon="check"] <svg><use href="#check" xlink:href="#check"></use></svg>
chevron-down [icon icon="chevron-down"] <svg><use href="#chevron-down" xlink:href="#chevron-down"></use></svg>
chevron-left [icon icon="chevron-left"] <svg><use href="#chevron-left" xlink:href="#chevron-left"></use></svg>
chevron-right [icon icon="chevron-right"] <svg><use href="#chevron-right" xlink:href="#chevron-right"></use></svg>
chevron-up [icon icon="chevron-up"] <svg><use href="#chevron-up" xlink:href="#chevron-up"></use></svg>
close [icon icon="close"] <svg><use href="#close" xlink:href="#close"></use></svg>
envelope [icon icon="envelope"] <svg><use href="#envelope" xlink:href="#envelope"></use></svg>
ext_link [icon icon="ext_link"] <svg><use href="#ext_link" xlink:href="#ext_link"></use></svg>
facebook [icon icon="facebook"] <svg><use href="#facebook" xlink:href="#facebook"></use></svg>
filter-off [icon icon="filter-off"] <svg><use href="#filter-off" xlink:href="#filter-off"></use></svg>
filter-on [icon icon="filter-on"] <svg><use href="#filter-on" xlink:href="#filter-on"></use></svg>
industry [icon icon="industry"] <svg><use href="#industry" xlink:href="#industry"></use></svg>
linkedin [icon icon="linkedin"] <svg><use href="#linkedin" xlink:href="#linkedin"></use></svg>
logo [icon icon="logo"] <svg><use href="#logo" xlink:href="#logo"></use></svg>
marker [icon icon="marker"] <svg><use href="#marker" xlink:href="#marker"></use></svg>
phone [icon icon="phone"] <svg><use href="#phone" xlink:href="#phone"></use></svg>
pie-chart [icon icon="pie-chart"] <svg><use href="#pie-chart" xlink:href="#pie-chart"></use></svg>
search [icon icon="search"] <svg><use href="#search" xlink:href="#search"></use></svg>
search-white [icon icon="search-white"] <svg><use href="#search-white" xlink:href="#search-white"></use></svg>
twitter [icon icon="twitter"] <svg><use href="#twitter" xlink:href="#twitter"></use></svg>
vena [icon icon="vena"] <svg><use href="#vena" xlink:href="#vena"></use></svg>
vna-left [icon icon="vna-left"] <svg><use href="#vna-left" xlink:href="#vna-left"></use></svg>
vna-right [icon icon="vna-right"] <svg><use href="#vna-right" xlink:href="#vna-right"></use></svg>
vna-vertical [icon icon="vna-vertical"] <svg><use href="#vna-vertical" xlink:href="#vna-vertical"></use></svg>
youtube [icon icon="youtube"] <svg><use href="#youtube" xlink:href="#youtube"></use></svg>