Lines | Fonts | Buttons | Page Menus | Typefaces
Here's the link to the styling guide. Here you can find our COLORS, FONTS, and CONTENT STYLING.
2.3 em size increase to above title
Add a subtitle here. Here's the link to the STYLING GUIDE (PDF). The font is styled Normal (body), Italic, and increased in size by 150%.
Here's the link to the theme options styling guide. Here you can find our COLORS, FONTS, and CONTENT STYLING.
Welcome to the Oklahoma County Government website, where you can also find webpages of 9 elected officials, and online services each office offers. Add a subtitle here. The font is styled Normal (body), Italic, and increased in size by 130%.
Add a subtitle here. The font is styled Normal (body), Italic, and increased in size by 150%.
Option #1:
The above line is our theme's default horizontal line, which is best used to highlight and/or signify important page topics. In other words, placing it under page headings using the H2 (heading 2) style is attention grabbing and helps visitors better navigate the page.
Option #2:
The above line works best after the subheading following the page title, and above an anchor menu.
Option #3:
The above line works best to break up content, especially sidebar widgets.
Option #4:
The above line is a custom line, which can be used for separating content.
Below is an example of each font styling for this website.
Paragraph, body, normal, or content font styling (p).
The above text is Normal plus 130% larger in size. Reference District Attorney development page or Boston's City Clerk's page.
Align button to the left:
Align button to the right:
The following menus are for anchor links only. It is a web best practice to reserve menu links of this type for on-page links only (no external links or to pages that take you away from the current webpage.
*Note: In the case a page menu item links to an internal webpage, though not recommended, add the internal-links_2.png icon next to the menu item label. See the example below from the Treasurer's page.
Public Access Search
Option 1:
The above menu is styled with h6 and bold.
Option 2:
The menu above is using the h6, bold, capitalized styling with an added font-size:small; code to reduce font size.
Option 3:
The above menu is styled with h6, capitalized, and bold with a font-size:medium;.
Option 4:
The above text is styled with the h6, bold styling with a font-size:70%.
Option 5:
About | Payments | News | Crime Victims | Diversion Courts | Criminal Justice System
The above menu is the default / standard anchor menu, which is using the Normal font styling, and is Title Text form.
Option 6:
The above menu is using the h6 and bold font styling, and is Title Text form.
If you need to replace your typefaces with system defaults, and Google web fonts aren’t available, it is recommended to replace Montserrat with Arial and Lora with Georgia. All stylistic rules apply in the same fashion.
COLORS:
FONT COLOR:
CUSTOM COLOR:
CONTENT STYLE:
DESIGN:
Body Background Color
LOADING STYLE:
Accent Color 4
LOADING STYLE
Monserrat (Title font = H1, H2, H4, and H6), Lora (body/content font = H3, H5, Paragraph)
Heading 1, Title font, ALL CAPS
Heading 2, Subtitle, Title Case
Heading 3
Heading 4
Heading 5
Heading 6
Paragraph font, content body
Title and Heading font
This is a custom accordion module with icons on the left on, rather than both sides of each accordion title.
Add detailed description here.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra vel turpis nunc eget lorem dolor. Risus pretium quam vulputate dignissim suspendisse in est. Elementum tempus egestas sed sed risus pretium quam. Nam at lectus urna duis convallis convallis. Tellus integer feugiat scelerisque varius. Fusce id velit ut tortor pretium viverra. Vulputate ut pharetra sit amet. Libero id faucibus nisl tincidunt eget nullam non. Nec feugiat in fermentum posuere urna nec tincidunt praesent.
Sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Feugiat scelerisque varius morbi enim nunc faucibus. At quis risus sed vulputate odio ut. Pellentesque id nibh tortor id aliquet lectus proin. Quis eleifend quam adipiscing vitae proin. Feugiat pretium nibh ipsum consequat nisl vel. Tristique senectus et netus et. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Amet nisl suscipit adipiscing bibendum est ultricies. Duis ut diam quam nulla porttitor massa.
Add text here. Note: the amount of text changes the size of the flipbox.
Add text here
Note: the amount of text changes the size of the flipbox
Add body text here.
Adding additional text here to show the variation of the flipbox in effect.
Text example.
Text example. Best for brief information.
Body text example. Body text example. Body text example. Body text example. Body text example. Body text example.
Back body text example.
Add text.
Add more text.
Play button
Address: Yanta District, XianShi, Shaanxi, China
Tel: (+086)-2566-8799
Email: sample@gmail.com
Hours: 8:00am-5:30pm (Mon-Fri)
Address: Oklahoma City, OK
Tel: 405-270-0082
Email: sheena.youngers@oklahomacounty.org
Hours: 7 am - 4 pm (M-F)
