Apr 4 2020
Easter Egg Hunt: Cancelled
This event has been cancelled because of the ongoing coronavirus pandemic. Hunt for eggs and special gold eggs at the Annual...
Read More »
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.
- Eleanor Roosevelt
- Ruth Bader Ginsburg
- 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