Styleguide

With these preset visual editor styles, the need to manually enter font sizes, colors, etc. should go away.

The use of manually selected font sizes, colors, etc. is not recommended as it typically leads to complexity, potential for inconsistent styling, and difficulty in management (since having all of the styles centralized in the theme allows for one update to affect all elements site-wide.) This styleguide may not take all conditions into account, but this should show the essential elements & widgets used throughout the site.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1 with bolded and italicized text added with a link, too.

Heading 2 with bolded and italicized text added with a link, too.

Heading 3 with bolded and italicized text added with a link, too.

Heading 4 with bolded and italicized text added with a link, too.

Heading 5 with bolded and italicized text added with a link, too.
Heading 6 with bolded and italicized text added with a link, too.

Paragraph of text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel placerat elit. Aenean vel est dictum, tristique felis at, auctor nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tincidunt erat vestibulum porttitor volutpat. Suspendisse vehicula urna ante, eu dictum nisl vestibulum ac. Aenean elementum, elit in tincidunt vulputate, orci sem posuere sem, et tincidunt tellus neque sit amet nisi. Ut eu finibus quam. Integer diam justo, facilisis sit amet tempor quis, dignissim ac tortor. Nam justo augue, pulvinar eget orci eget, consequat feugiat mi.

Quotes

Here’s a quote.

This can have paragraphs shown within it.

– Some Person

Links within text can look like this.

Inline Media

PlaceholderLorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Placeholder

Placeholder

PlaceholderLorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis strong dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Native Video Player

External Video Player (YouTube)

Lists

Lists can be

  • Bulleted/unordered
  • like
  • this

Or…

  1. Numbered/ordered
  2. like
  3. this

Or

Definition Lists
As seen here
Definition Term Title 2
Definition term description
Definition Term Title 3
Definition term description

Forms














Fieldset








Radio Fieldset

Checkbox Fieldset


Tables

Tables should only be used for showing tabular data, but they look like this:

 Example 1 Table Header 1 Table Header 2 Table Header 3 Table Header 4 Table Header 5 Table Header 6
First Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Second Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Third Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Fourth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Fifth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Sixth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Seventh Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Eighth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Ninth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Tenth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Eleventh Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Twelfth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link

Here’s a table with the default styling & interactivity disabled:

 Example 2 Table Header 1 Table Header 2 Table Header 3 Table Header 4 Table Header 5 Table Header 6
First Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Second Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Third Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Fourth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Fifth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Sixth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Seventh Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Eighth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Ninth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Tenth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Eleventh Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link
Twelfth Entry Division 1 Division 2 Division 3 Division 4 Division 5 Link

Note: Setting whether a row is a heading (via row properties) and which cells are headings (via cell properties) can be important for accessibility, informs the styling of the table elements, and also allows the table to be mobile responsive.