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.
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
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 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.
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 are useful as navigation in featured sections. Learn how to insert featured links on your page.
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
Ordered List
- This is an ordered list
- This is an ordered list
- This is an ordered list
- This is an ordered list
- This is an ordered list
- This is an ordered list
-
This is an ordered list
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 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 |