TEST Basic Page Styles
The Key Message field is the lead at the top of a page; teaser text.
Testing document links
Here is a test PDF.
Headings
Search engines use the headings to index the structure and content of your web pages; they are also used by screen readers. It is important to use headings to show the document structure.
Heading 1 is used for the page title and so should never be used in the Body field. Heading 2 should be used next, and then the less important Heading 3, and so on. Headings should not be used to make text large or bold.
Heading examples can be seen below.
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Button Links
Links can be styled as buttons:
- Create your link
- Highlight the link and then select the desired style from the Styles dropdown in the Button Bar.
Button styles are shown below.
Primary Default Primary Large Primary Small Primary Tiny
Secondary Default Secondary Large Secondary Small
Success Default Success Large Success Small
Warning Default Warning Large Warning Small
Alert Default Alert Large Alert Small
Callouts: These are three different styles of callouts. This is the default, which does not use an icon.
Secondary Callout: Business Licene renewals and payments must be submitted or postmarked by February 28, 2022 to avoid penalty and interest.
Warning Callout: Tests indicate that bacteria levels at Aquatic Park currently exceed State Water Quality standards. Restricted use, minimize contact with water.
Alert Callout: Air quality in Berkeley is 350: hazardous. Avoid going outside unless necessary. Keep windows and doors closed, and minimize physical activity.
Lists
Ordered List
- Cheese (essential)
- Pepperoni
- Bacon
- Sausage
Link List
Select Link List from the Styles dropdown to add icons showing link or file type to an unordered list of links.
Text Styles
Paragraph Lead
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph Small
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Normal Text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Embedded video
Tables
| TABLE HEADER | TABLE HEADER | TABLE HEADER | TABLE HEADER |
|---|---|---|---|
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
STRIPED TABLE
| TABLE HEADER | TABLE HEADER | TABLE HEADER | TABLE HEADER |
|---|---|---|---|
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Table Scroll
| TABLE HEADER | TABLE HEADER | TABLE HEADER | TABLE HEADER |
|---|---|---|---|
| Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
| Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
We must be cognizant that Berkeley - like all cities - does not live in a bubble. The actions we take have a ripple effect across the region.
Jesse Arreguín - Mayor of Berkeley
Related Documents
