Website Resources & Style Guide

Overview

OpenCities has various webpage elements that staff can use to improve readability, usability, and overall design of their pages. This page shows each available element.

These webpage elements can be used to style your pages, add functionality, and enhance the user experience.

Accordion & Tabs

Accordions and tabs are used to break up content so that site visitors aren’t presented with daunting walls of text. These tools provide readers with concise information and an option to see more detail. Learn how to insert accordions or tabs into body content.

Accordion

Accordion Title 1

Text and other content goes here

Accordion Title 2

Text and other content go here.

Tabs

Tab 1

This is tab content.

Tab 2

This is tab content.

Buttons

Buttons entice users to take action. Anyone who clicks the button will be taken to a page to complete a task. They're useful for linking out to registration forms, applications, email subscription forms, etc.

 

Primary Button    Secondary Button    Alternate Button    Call to Action Button

Emphasis Boxes

Emphasis boxes are used to highlight important information.
Emphasis Box 1

Notice of Electoral Board Meeting. An electoral board meeting will be held Thursday, March 25, 2021 at 5 p.m.

Emphasis Box 2

Notice of Electoral Board Meeting. An electoral board meeting will be held Thursday, March 25, 2021 at 5 p.m.

These styles can be added to your body content using the Apply CSS Class selection box in the menu. See more examples in the OpenCities Help Center.

emphasis-box-class.png

Headings

Headings are used to distinguish page sections and that section's relation to other sections. Headings make a page easier to browse and help boost your search engine optimization (SEO). Headings also play an important role for those with visual impairments because they are better able to skip to the page section they need without reading all of the text.

Headings should have a consistent hierarchy and should never jump around (e.g., using a Heading 4 before a Heading 2). 

In OpenCities, whatever you enter in the Page Title field will become a Heading 1 on the page. Make sure your next heading is a Heading 2.

Heading 1

Heading 2*

Heading 3

Heading 4

Heading 5
Heading 6

*This example is actually an H3 that is set to display to 110% in size to preserve this page's functionality while visually representing what an H2 would look like. Please do not change heading sizes. 

Featured Links

Featured links are useful as navigation in featured sections. Learn how to insert featured links on your page.

 

Lists

Unordered List (aka Bulleted List)

  • This is a bullet
  • This is a bullet
  • This is a bullet
    • This is a bullet
    • This is a bullet
      • This is a bullet

Ordered List

  1. This is an ordered list
  2. This is an ordered list
  3. This is an ordered list
    1. This is an ordered list
    2. This is an ordered list
      1. This is an ordered list
      2. This is an ordered list

Image Sizes

Page background image
1920 px wide by 1080 px height. In some cases, where the background image uses header space, 1920x1440 is better.

Featured News Image Size
760px wide x 350px height

Featured Content Image Size

Homepage Promo Box Image Size

Tiles/Cards
364px wide

Body Content Main Image
at least 480px wide

 

Tables

Tables are used to show the relationship between two or more items in rows and columns. Learn how to insert and customize a table. Tables should not be used for design purposes (like displaying content in multiple columns) because the content will be less accessible to screen readers. You should also use the responsive table class to ensure your table display is optimized across various device sizes.

Title 1 Title 2 Title 3
Info Info Info
Info Info Info