Sample Styles Page

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

This is an H2 Header

An H2 can be used as a primary heading or for a short sentence of introductory text.

This is an H3 Header

An H3 is used as a subheading.

This is an H4 Header

H4 is used as a sub-subheading.

This is an H5 Header

H5 is used as a sub-subheading.

This is an H6 Header

H6 is used as a sub-sub-subheading.

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.

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

This is a blockquote. Use this style for quotes.

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. 

Check the text on your blockquotes against your regular paragraph text. It can look funny if one word is dangling on a line so play around with it until the spacing looks right. If you're thinking "the spacing looks fine," expand your browser to full-width to spot the issue.

This is a data table of potential female candidates for the portrait on the $10 bill. Data tables are normally used to show things like schedules or fees.

 

Sojourner Truth Margaret Sanger
Harriet Tubman Eleanor Roosevelt
Ruth Bader Ginsburg Rosa Parks

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.

  1. Eleanor Roosevelt
  2. Ruth Bader Ginsburg
  3. Margaret Thatcher

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

Links

Using descriptive link text improves accessibility for disabled users.

No: Visit the City of Goose Creek's website here.

No: Click here to visit the City of Goose Creek's website.

Yes: Visit the City of Goose Creek's website. 

Headlines

Try to make blog post and news headlines as succint as possible, since the headlines can appear as related content and get unwieldy if they are too long. 

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 CSS Classes box, then click OK. Specific styles for each color are below.

For an Orange Button enter "button" into the CSS Classes box

For a Pink Button enter "b-pink button" into the CSS Classes box

For a Teal Button enter "b-teal button" into the CSS Classes box

For a Blue Button enter "b-blue button" into the CSS Classes box

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

-The Cyberwoven Team