Style Guide

This is an H1

An H1 is used for the page title. You won't normally need to use an H1 in the body of the page. 

This is paragraph text, called "Normal" text in the editor. 

This is an H2

An H2 is used as a primary heading.

This is an H3

An H3 is used as a subheading.

This is an h4

H4 is used as a sub-subheading.

H5 and H6 are unstyled headers, so we won't use them at all.

Text Styles

This is bold text. Use bold text to emphasize important words or phrases, but try not to overuse. Bold text helps readers scan the page for important information. For instance, you might bold the phrase, Register for the seminar by May 15, 2016.

This is italics. Use italics sparingly, as it is difficult to read long passages that are italicized.

This is underlined text. Don't use underlined text at all, as it can be confusing: users associate underlined text with hyperlinks, and may be confused when an underlined phrase isn't a link. 

This is a bulleted list (sometimes called an "unordered list" in programming lingo). Use when the order of the items doesn't matter:

  • Sojourner Truth
  • Margaret Sanger 
  • Harriet Tubman

This is a numbered list (sometimes called an "ordered list"). Use when putting things into a heirarchy.

My three favorite treats are:

  1. Cookies
  2. Brownies
  3. Candy

Use the Quote button in the editor to create a blockquote. Use this style for quotes and other information that you want offset from the regular paragraph text.

This is a horizontal line. Use sparingly to separate elements of the page. 


Headlines

Try to make blog post headlines as succint as possible. 

Blog Images

Blog images must be at least 830 x 440 pixels. If you don't have an image for a blog post, you can use the ETV logo that we've provided as a default. Open the File Browser (the link is right above the image field) and choose the "blog_image" folder. The logo will be inside this folder.

Links

Using descriptive link text improves accessibility for disabled users, because they navigate the page by hearing the links read out loud. Never use "Here" or "Click Here" as link text, because those labels don't give blind users any useful information. 

No: Visit the City of Columbia's website here.

NoClick here to visit the City of Columbia's website.

Yes: Visit the City of Columbia's website

Buttons

What is the difference between a button and a link?

As a general rule, buttons indicate that you want the user to do something, while links usually just mean they are being directed to another page. For example, you might want to use a button for "Apply Now" or "Donate." 

To add a button link, highlight the text and choose the link icon in the editor, as you normally would. Enter the URL, then click on the Advanced tab and enter the button style in the Stylesheet Classes box, then click OK. Specific styles for each color are below.

For an Orange Button enter "button" in the Stylesheet Classes box.

For a Smaller Blue Button enter "button b-blue b-sm" in the Stylesheet Classes box.

Enjoy your new website—we enjoyed building it for you!

-The Cyberwoven Team