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).

Your Color Palette:

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:

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.

Example <hr> (horizontal rule):

Bootstrap 4 Helper Classes

See also the Bootstrap 4 margin and padding utility classes, which you can use on any element via the "Text" tab of WYSIWYG editors to add or remove margin and padding, as such:

<h2 class="pt-0 mb-3">This header element will not have any top padding, but it will have 1rem of margin on the bottom</h2>

All the other Bootstrap 4 utility classes are available as well.

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 automatically. Anywhere you see xclass as an available attribute below, it stands for "extra classes"—here you can add any additional CSS classes to the element, separating multiple by spaces.

Columns ^#

[columns valign="top" xclass=""] ... [column-split] ... [column-split] ... [/columns]

Divide content into equal-width columns. Replace the ellipses with each column's content. Separate with as many [column-split]s as you want to define the end of one column and the beginning of the next. Optionally adjust vertical alignment between columns with valign as top, middle or bottom.

This example has an xclass of py-4 to add vertical padding (top and bottom) to the whole row:

Buttons ^#

[btn text="Get Started" url="/get-started/" onclick="" size="" color="primary" outline="false" block="false" target="" xclass=""]

• Change text to whatever text you want displayed on the button (defaults to "Get Started" if not defined).
• Change url to wherever you want the button to link to (defaults to "/get-started/" if not defined)
• Define onclick to override URL destination (e.g. to launch a Privy Popup with something like onclick="Privy('show',1204426);")
• size can be small, empty (default, which is medium-sized), or large.
• color can be primary/teal, secondary/blue, light/white or link.
• outline can be true or false (default), which generates an outlined button instead of a solid background.
• block can be true or false (default), which generates a full-width block button.
• target can be set to _blank to open the link in a new window.
• xclass - include any additional CSS classes you wish to add here.

Small Regular (no size defined) Large

Primary (no color defined) Secondary Light

Primary Outline (no color defined) Secondary Outline Light Outline

Example Block Button

Dropdown Buttons ^#

[dropdown-btn text="Get Started" text1="First Dropdown Option" text2="Second Dropdown Option" text3="Third Dropdown Option" url1="" url2="" url3="" size="" color="primary" outline="false" block="false" target="" xclass=""]

Present additional link options that drop down when a button is clicked:

Marketo Form ^#

[marketo_form id="" header="" redirect="" xclass=""]

Display a Marketo form on the page. You can find the ID in the URL when viewing/editing the form in Marketo. The end of the URL should look something like #FO123B22. The form ID is everything after the "FO" and everything before the next letter in the URL. In this case, the form ID would be 123.

• Optionally define a header (prepends as an H3 element).
• Optionally define a URL for redirect -- this is the thank-you page destination upon form submission; which overrides any post-submission action defined within Marketo.

Button That Launches a Marketo Form in a Modal ^#

[modal_form_button button_text="Contact Us" button_class="btn btn-primary" form_id="" redirect="" modal_title="Contact Us"]

• The attributes function similarly to the [marketo_form] shortcode above; just note that id is form_id here.
• The text in the button that launches the modal is defined via button_text.
• Style the button that launches the modal with CSS classes via button_class, separating multiple classes with spaces.
• Prepend the form within the modal with header text via modal_title.

Accordion ^#

[accordion xclass=""][accordion-item header=""] ... [/accordion-item][accordion-item header=""] ... [/accordion-item][accordion-item header=""] ... [/accordion-item][/accordion]

Replace the headers with each accordion item's toggle text; replace the ellipses with the content within each accordion item.

Expand/Collapse ^#

[expand link_text="Continue Reading"] ... [/expand]

Replace the ellipsis with the text you wish to display when the user clicks "Continue Reading" to expand additional content. For example, here we have just a portion of the larger blob of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Badge ^#

[badge text="Coming Soon!"]

iFrame ^#

These two shortcodes do the same thing; they just output an iFrame that runs the adjustIframeHeight script to (hopefully) resize the iFrame to match its content:

[iframed src="https://k2p-fugue.herokuapp.com/trials?sku_trial_id=cv_cmd_7_trial&thanks_url=http://knowledgetopractice.com/physicians/currentmd-free-trial/thank-you&q=/physicians/currentmd-free-trial/"]

[iframed_form src="https://k2p-fugue.herokuapp.com/trials?sku_trial_id=cv_cmd_7_trial&thanks_url=http://knowledgetopractice.com/physicians/currentmd-free-trial/thank-you&q=/physicians/currentmd-free-trial/"]

Icon Library & Shortcode ^#

[icon icon="wrench" url="" size="lg" viewbox="" xclass=""]

We load your custom SVG icon library on every page of the site. This shortcode will display a particular icon amongst your content.

• 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 to xs, sm, md, xl or xxl (lg is default):
  

  xs	sm	md	lg	xl	xxl

• For example, "[icon icon="search" url="https://www.k2p.com/"]" will display the following: