User Centered

Prioritizing the User Experience

  • Creating digital framework that focuses on the user’s needs and actions, not an agency table of organization.
  • Using research and design to validate solutions that satisfy an end user’s needs.
  • Implementing data-driven discovery that helps the agency gain a better understanding of their end-user and the user’s journey.

Which supports organizations to...

Shift thinking from "What we want to tell our users" to "What do users want to know"

We do this by...

Creating an information architecture for a new site

Curated Content

Creating Consistent Content

  • Never duplicating content, instead working from a "single source of truth" for content that addresses multiple audiences or is used in multiple areas across the site, never duplicating content
  • Helping content authors to use plain-language for the widest possible audience, scrubbed of agency jargon, acronyms, abbreviations and technical terminology
  • Presenting text at the proper level of fidelity with filler text used to validate patterns replaced with high-fidelity content as the project gets nearer to completion

Which supports organizations to...

Speak to multiple audiences with a single piece of content

We do this by...

Providing content strategy tools for your project

Inclusive Design

Promotiving Accessbility

  • Using consistent, predictable patterns across all IOP sites that support the audience with the greatest need for information, the least comfort with technology and minimum patience
  • Establishing a shared understanding among content authors of the platform’s built-in accessibility features and the importance of maintaining WCAG 2.0AA compliance
  • Prioritizing design for mobile devices, knowing the importance of mobile access to users

Which supports organizations to...

Understand the need to move content from a PDF to text on a page of the site

We do this by...

Providing content author training that discusses accessibility compliance

Accessibility

The state of Ohio is committed to delivering accessible digital solutions to all citizens, including those with perceptual impairments. To achieve that goal, this style guide was developed to adhere to the Web Content Accessibility Guidelines (WCAG) 2.0 AA compliance. For the purpose of this guide, AA compliance is mostly an issue of color contrast; there are other considerations when developing a complaint user interface which are not specified in this style guide. You should review the WCAG 2.0 guidelines and identify which requirements are relevant to your implementation.

The WCAG technical documents are developed by the Web Content Accessibility Guidelines Working Group (WCAG WG), which is part of the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI). For a short summary of the WCAG 2.0 guidelines, see WCAG 2.0 at a Glance.

Some of the WCAG guidelines that are relevant to this style guide include:

  • Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
  • The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
    • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
    • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
    • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
  • Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.
    • Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
    • Customizable: The image of text can be visually customized to the user's requirements;
    • Essential: A particular presentation of text is essential to the information being conveyed."

Color Palette

The two most important considerations when selecting a color theme for your Ohio implementation are brand consistency and color contrast for text accessibility. The primary brand color for Ohio.gov is maroon (700017); however you're given two secondary options if maroon doesn't work for your particular context — blue (3d7aa9) and green (5e8000). You can preview the secondary color themes within this guide by changing the theme using the color wheel icon in the top-right corner of the page.

Keep in mind that the “ADA compliant” colors shown below meet WCAG AA contrast ratios only when used against a white background. When used against other background colors you should check the contrast ratio using a tool like Colour Contrast Analyser. Body text should have a contrast ratio of at least 4.5:1, while “Large-scale text” can go as low as 3:1.

Colored text: Lorem ipsum dolor sit amet.

Colored background: Lorem ipsum dolor sit amet.

Primary Colors (ADA Compliant)

700017
eb1316
525051
000000
3d7aa9
5e8000

Additional Web Colors

a1a1a1
d8d8d8
Slider, Table lines, Progress Disabled Button
f2f2f2
Background
ffffff

Secondary Colors

73a5cc
ffbe0e
b5dc10
000000
ed6102
Warning

Typography

Type on the Ohio websites uses two primary fonts — Serifa and Serifa Bold (URW++) for headlines and subheads (H1 - H3) and Source® Sans Pro (Google Fonts) for smaller subheads and body copy (H4 - P2). The State of Ohio owns MyFonts web licenses for Serifa and Serifa Bold (open the source code for this page for an example of the license comment code), while Source® Sans Pro is Adobe's first open source typeface family, designed by Paul D. Hunt.

Serifa Medium 32 px - 700017

Serifa Regular 32 px - 700017

Serifa Medium 26 px - 700017

Serifa Regular 26 px - 700017

Serifa Medium 20 px - 000000

Serifa Regular 20 px - 000000

Source Sans Pro Bold 18 px - 000000

Source Sans Pro Regular 18 px - 000000

Source Sans Pro Bold 14 px - 525051
Source Sans Pro Regular 14 px - 525051

Source Sans Pro Bold 16 px - 000000

Source Sans Pro Regular 16 px - 000000

Source Sans Pro Bold 14 px - 000000

Source Sans Pro Regular 14 px - 000000

Dependencies

This page lists the files, libraries, and plugins that this style guide is dependent on. All implementations must use the ohio-style.css and ohio-bundle.min.js files, and additional files might be required based on which controls are used. Each UI control specified in this guide that requires additional libraries or plugins states its dependency on the description page of that UI control. Each dependency is summarized below.

Ohio

These files must be included on all pages. Use ohio-bundle.js for development and ohio-bundle.min.js for production.

Typography

Every page that includes MyFontsWebfontsKit.css must also include the license comment. Open the source code for this page for an example.

Font Awesome

Font Awesome Pro kit is being used. (Not included in the bundle)

Bootstrap

Bootstrap 3.3.7 is included in the main bundle. Don't add separate files for Bootstrap.

jQuery

jQuery 3.1.1 is included in the main bundle. Don't add a separate file for jQuery.

File Export

Dependent on DataTables

Flag Icon Css

Flags are included in the main bundle.

Chart.js

Chart.js is included in the main bundle.

Version History

v1.0.0 — December 20, 2016

  • v1.0.0 posted to production

v2.0.0 — January 6, 2016

  • v2.0.0 added 2 new themes, green and blue
  • v2.1.0 added Charts
  • v2.2.0 added Inline Charts
  • v2.2.1
    • moved Flags and Icons to Content
    • moved Cards and Dividers to Layout
  • v2.3.0 Added state flags
  • v2.3.1 changed Serifa Bold to Serifa Medium
  • v2.3.2 fix theme toggle not working on older browsers
  • v2.3.3 fixed IE crashing on load by dynamically loading in the code snippets
  • v2.3.4
    • added breadcrumbs
    • radio button and checkbox groups are now placed in a fieldset element
    • added label to all form element
    • removed all WAVE errors
  • v2.3.5
    • fix header-small of h4 and h5 to be using Lato
    • fix spelling on Step-based progress bar page
    • fix padding issues on larger text fields on page examples for IE and Firefox

v3.0.0 — March 9, 2018

  • v3.0.0 added 8 new UI controls (components), for instance:
    • Cards Carousel
    • Small Cards Carousel
    • Structured Stories
    • Left Navigation
    • Main Navigation
    • Ads Grid
    • River of News
    • Events List

v3.1.0 — April 24, 2018

  • v3.1.0 replaced Lato font by Source Sans Pro

v3.2.0 — Jun 04, 2018

  • v3.2.0 added three new UI controls (components), for instance:
    • Expandable Item List
    • Top Search
    • Upcoming Events

v4.0 - September 23, 2019

  • Updated branding
  • Esri maps
  • Form validation example for email field

Accordions

Accordions are useful when you have hierarchical information where you want user-controllable disclosure of information. This lets you optimize screen space by showing only the section titles initially, then allowing the user to drill into the detail only on the sections they're interested in. You can nest content and/or additional UI controls in these regions, or next the accordion itself into a drawer or some other container.

Collapsible Group Item #1

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Alerts / Toast

Alerts or toast messages are shown to the user when you need to direct their attention to a critical or time-sensitive alert message. Use an Alert when you want to offer inline feedback, like when doing form validation. Use Toast when you want the feedback to be shown immediately regardless of the user's view at any given time. Toast messages are also time-bombed and go away after the timer expires.

Dependencies: Toastr

Alerts

Toasters

window.toastr.options = {
  closeButton: true,
  debug: false,
  newestOnTop: false,
  progressBar: false,
  positionClass: 'toast-top-right',
  preventDuplicates: false,
  onclick: null,
  timeOut: 10000,
  extendedTimeOut: 10000,
  tapToDismiss: false,
  showDuration: 300,
  hideDuration: 1000,
  showEasing: 'swing',
  hideEasing: 'linear',
  showMethod: 'fadeIn',
  hideMethod: 'fadeOut'
}

window.toastr.success('Lorem ipsum dolor sit amet, consect etur adipisicing elit, sed do eiusmod tempor incididunt ut.')
window.toastr.info('Lorem ipsum dolor sit amet, consect etur adipisicing elit, sed do eiusmod tempor incididunt ut.')
window.toastr.error('Lorem ipsum dolor sit amet, consect etur adipisicing elit, sed do eiusmod tempor incididunt ut.')
  

Arrows and Popovers

Arrows are typically used for popover or instructional text. They can be triggered by a rollover or a click/tap on a related button. The examples below show how the Arrow objects defined in the UI section can be used for popover information on rollover of some target (the info icon in this example). Popovers should be used sparingly since there's no equivalent of the rollover trigger on mobile.

Arrows

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
130.1K
130.1K
130.1K

Popovers

Popover on top
Popover on bottom
Popover on right

Badges

Badges are available to draw the user's attention to the quantity of a given item. They can be used in any of the supported theme colors depending on urgency or freshness of the data.

Badges

8 23 8 23 8 23 8 23

Button Badges

Buttons

Buttons can be used at various sizes depending on context, in either a solid or outline style. Generally speaking, solid buttons should be used for primary call to action on a given page or form.

Theme-based

Override Theme

Checkboxes

Checkboxes are binary switches for options that are either on or off. Use the traditional checkbox style even in the mobile (phone) breakpoint, as iOS or Android-native "switch" controls are too specific to either iOS or Android. Except in very limited circumstances, always use a checkbox for any option with two states; never use a two-option radio button group or two-option dropdown menu. The label of a checkbox must always be positioned to the right of the checkbox.

Dependencies: Awesome Bootstrap Checkbox

Enabled Radio Button Group

Disabled Radio Button Group

Date / Time Pickers

There are three versions of the date/time picker, depending on the level of precision you want users to specify. I you only need the day, then use the Simple Date Picker. If you want a time at the hour or half-hour level then use the Time Picker (Imprecise). If you want a time with more precision then use the Time Picker (Precise).

Dependencies: Bootstrap Datepicker3

Simple Date Picker

Time Picker (Imprecise)

Time Picker (Precise)

Drawer

The Drawer lets you nest secondary controls into a hidden UI region on the side of the screen that is exposed with the tap of a button only when needed by the user. Drawers can be nested within any container, but typically should be a child of the main view. You can place any other standard UI control into the drawer, like an accordion or form controls.

Dependencies: Bootstrap Drawer

Esri Maps

Maps should use Esri maps as shown below.

Please wait, we are generating a dynamic map with locations.
Please wait, we are generating a dynamic map with locations.

Events List

A list of events showing their respective information such as beginning date, name and duration.

Expandable Item List

This component shows information about an item in a expandable fashion. Please click on any item of the list to see the expandable area with more information.

Full Banner

A banner used when author features a piece of content to a specific landing page.

Ohio Applicator Forecast

The Ohio Applicator Forecast is designed to help nutrient applicators identify times when the weather-risk for applying is low. The risk forecast is created by the National Weather Service and takes snow accumulation and melt, soil moisture content, and forecast precipitation and temperatures into account.

READ MORE

CAFF Advisory Committee

Summary for CAFF Advisory Committee.

READ MORE

Demo images in this component are from https://unsplash.com

Labels

Labels can be used when you want to draw the user's attention to a specific element. Different colors can be used to suit the purpose of the message being displayed.

Headline Goes Here New Label

Headline Goes Here New Label

Headline Goes Here New Label

Subtitle Line Goes Here New Label

Information Goes Here Danger

Available variations

Default Primary Success Info Warning Danger

Modals

Modal dialog boxes should be used when you want to present the user with a UI region that they must process before interacting with other UI controls (if your UI isn't really modal then you might consider using something else, like a Toastr or Drawer). Modals are triggered by another UI control or a code process, and closed by clicking outside of them or clicking the close button.

Basic

App Modal

Multiple Selects

Use a Multiple Select List control when you want the user to select one or more options from a pick list. Multiple contiguous options can be selected on desktop by dragging the mouse over multiple options, or clicking the first option, then shift+clicking the last option; non-contiguous options can be selected by holding Ctrl (Win) or Cmnd (Mac) while clicking options. On mobile devices the user will be presented with a native picklist control with checkmarks next to each selected option.

Pagination Controls

Pagination controls are used whenever you present paged results of a data set. This allows the user to jump to a specific page in the data set, or progress to the next/previous set of results.

Progress Bars

Well-implemented progress bars are an important part of providing the user with feedback on the status of the interface. All of these progress bars are “determinate”, meaning they indicate how much progress has been completed and how much is yet to complete. However in some cases you'll need to use an “indeterminate” progress bar because you cannot accurately measure how much is left in the process; in that case you should use a Spinner instead (see UI Controls > Spinners).

Percentage-based

Task Title

54% Complete

Step-based

Task Process Update Text

Completed 7 of 13

Radio Button Groups

Radio button groups are for cases where the user can select a single option from a list of mutually exclusive items (i.e. they can only select one). Ideally the top option should be checked by default, but never include a non-option like "Please check an option"; if no logical default can be used then do no set a checked item by default.

Dependencies: Awesome Bootstrap Checkbox

Enabled Radio Button Group

Disabled Radio Button Group

River of News

The River of News shows the most recent news content teasers in a flow, in a style similar to Facebook.

This is title for new
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.

This is title for new
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.

This is title for new
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.

This is title for new
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.

Segmented Controls

A Segmented Control (a.k.a. Tab Control) is a mode selector that's usually attached to another multi-state UI region. It allows the user to specify which group of UI they want to interact with at any given time and allows the designer to use a smaller area of the screen for multiple states of UI.

Sliders

Sliders allow the user to specific a value within a range. They are particularly useful when you're dealing with a non-obvious range of numbers (e.g. negative 360 to positive 360); when you need to enforce a step-based approach like only allowing values in 10-unit increments; or when asking the user to define both a minimum and maximum value (i.e. ranges).

Dependencies: NoUiSlider

Normal Slider

Min
Max
30 %

Step-based Slider

0
300
120

Range Slider

0
100
20,69 to 69

Spinners

Spinners should be used whenever the UI is waiting for a service or processing response that is either quick or indeterminate (see also Progress Bars). Spinners can be used inline, for example when executing a search, or can be put into a blocking modal view when the UI has to wait for the response before allowing additional interaction.

Step-based Progress Bar

The step-based progress bar should be used for indeterminate processes that have internal milestones. They can be used to indicate the progress of a user-based activity like a multi-screen wizard, or a system-based activity like a license application. Coloring shows the user which steps they've completed. Note that the step-based horizontal bar shown below changes to vertical orientation when displayed on very narrow browser windows like phones; this is done to accommodate the icons along the bar, and the text labels of each step. You can see how that works simply by resizing this window to its minimum width.

Generic

Personal Account
Payment Details

Personal Account
Choose Options
Payment Details

Personal Account
Choose Options
Choose Options
Payment Details

Personal Account
Choose Options
Choose Options
Choose Options
Payment Details

In Form

1 Instructions One
2 Instructions Two
1 Instructions One
2 Instructions Two
3 Instructions Three
1 Instructions One
2 Instructions Two
3 Instructions Three
4 Instructions Four
1 Instructions One
2 Instructions Two
3 Instructions Three
4 Instructions Four
5 Instructions Five

Step-based Horizontal (Desktop)

10/12/16 Documents Requested

10/17/16 Expected Completion

10/12/16 Documents Requested

10/14/16 Processing Request

10/17/16 Expected Completion

10/12/16 Documents Requested

10/12/16 Documents Requested

10/14/16 Processing Request

10/17/16 Expected Completion

10/12/16 Documents Requested

10/12/16 Documents Requested

10/14/16 Processing Request

10/14/16 Processing Request

10/17/16 Expected Completion

Step-based Vertical

10/12/16 Documents Requested

10/17/16 Expected Completion

10/12/16 Documents Requested

10/14/16 Processing Request

10/17/16 Expected Completion

10/12/16 Documents Requested

10/12/16 Documents Requested

10/14/16 Processing Request

10/17/16 Expected Completion

10/12/16 Documents Requested

10/12/16 Documents Requested

10/14/16 Processing Request

10/14/16 Processing Request

10/17/16 Expected Completion

Structured Stories

The structured story provides a way to transform content based on HTML headers (h2, h3...). It can generate four different views: Table Of Contents, Vertical Tabs, Horizontal Tabs and Collapsible Sections.

Tab 1

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. 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.

Tab 2

Nullam cursus, risus id euismod cursus, diam lectus consequat velit, id feugiat ipsum neque et est. Vestibulum nec enim quis dui molestie tincidunt. Donec vulputate pellentesque nunc in suscipit. Proin et commodo mauris. Nunc non condimentum lorem. Duis at velit mauris, hendrerit ultricies enim. Sed eu magna nec lorem condimentum pulvinar eget eget neque. Maecenas at molestie nunc. Vestibulum in tincidunt dolor. Suspendisse sollicitudin, purus sed tempor dictum, sem risus viverra urna, vel faucibus arcu augue eu tortor. Aliquam quis aliquet mi. Vivamus placerat sapien vitae nunc dapibus id sagittis ipsum gravida. Maecenas eget ante sem, vitae pretium quam. Maecenas a est ut ipsum cursus porttitor vel a eros.

Tab 3

Pellentesque dictum malesuada posuere. Pellentesque semper interdum sem id mollis. Suspendisse hendrerit risus nec nisi laoreet at tincidunt ligula scelerisque. Integer et ante sit amet turpis tempor laoreet. Nullam bibendum, nisi aliquet placerat egestas, enim sapien fringilla tellus, quis hendrerit quam massa non nisl. Sed eu tellus tellus. Duis adipiscing vehicula felis, eu bibendum purus consectetur quis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent consectetur sapien sed convallis. In hac habitasse platea dictumst. Nulla eget metus elit, sit amet consequat felis. Nulla consectetur elit vel risus accumsan volutpat. Nam eu auctor sem. Phasellus a magna eu elit sodales fermentum.

Text Fields

Edit fields allow the user to enter text. They come in various formats and sizes as illustrated below.

Dependencies: Inputmask FormValidation

Single Line

Password
Form Field with Error
Password too short
Form Field with Input Group Add-on

nameofperson@company.com

Multi Line

Uploaders

Uploaders allow the user to select one or more files from their local hard drive to upload to the service. Use the single or multiple file upload control as required by your implementation.

Dependencies: File Upload

Single File Upload

Multiple File Upload

Vector Maps

In some cases you might need to show a map not as a navigational map, but more as a chart or graph of geographic data. In these cases you can present an SVG map using theme-compliant colors and UI controls as shown below. Note the below implementation is an image-based map, but is provided to illustrate what a vector map should look like (for this reason the maps below don't respond to changes to the color theme in this guide; you should adhere to the selected color theme in your implementation). If your intent is to show navigational information or illustrate where a location is, then you should use a Google Map view instead.

vector map 1

Map Title Goes Here

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

Franklin County

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.

Source: State of Ohio Government

vector map 1

Map Title Goes Here

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.

75,001 +
50,001 to 75,000
25,001 to 50,000
0 to 25,000

Source: State of Ohio Government

Charts

The themes defined in this document should also apply to any charts you include on your page. Various chart types are shown below for reference. If you need a different chart type that's fine as long as you adhere to the color theme.

Dependencies: Chart.js

Flags - Countries

If your implementation requires the display of international flags, you should use the standard bootstrap approach to flags as illustrated below. Update a flag's size by changing its font size.

Dependencies: Flag Icon Css

Default and Squared Example

Full List

Flag Name ISO 3166-2 Code
Afghanistan (‫افغانستان‬‎) af
Albania (Shqipëri) al
Algeria dz
American Samoa as
Andorra ad
Angola ao
Anguilla ai
Antigua & Barbuda ag
Argentina ar
Armenia (Հայաստան) am
Aruba aw
Australia au
Austria (Österreich) at
Azerbaijan (Azərbaycan) az
Bahamas bs
Bahrain (‫البحرين‬‎) bh
Bangladesh (বাংলাদেশ) bd
Barbados bb
Belarus (Беларусь) by
Belgium be
Belize bz
Benin (Bénin) bj
Bermuda bm
Bhutan (འབྲུག) bt
Bolivia bo
Bosnia & Herzegovina (Босна и Херцеговина) ba
Botswana bw
Brazil (Brasil) br
British Indian Ocean Territory io
British Virgin Islands vg
Brunei bn
Bulgaria (България) bg
Burkina Faso bf
Burundi (Uburundi) bi
Cambodia (កម្ពុជា) kh
Cameroon (Cameroun) cm
Canada ca
Cabo Verde (Kabu Verdi) cv
Central African Republic (République centrafricaine) cf
Chad (Tchad) td
Chile cl
China (中国) cn
Colombia co
Comoros (‫جزر القمر‬‎) km
Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo) cg
Congo (Republic) (Congo-Brazzaville) cg
Cook Islands ck
Costa Rica cr
Côte d'Ivoire ci
Croatia (Hrvatska) hr
Cuba cu
Curaçao cw
Cyprus (Κύπρος) cy
Czech Republic (Česká republika) cz
Denmark (Danmark) dk
Djibouti dj
Dominica do
Dominican Republic (República Dominicana) do
Ecuador ec
Egypt (‫مصر‬‎) eg
El Salvador sv
Equatorial Guinea (Guinea Ecuatorial) gq
Eritrea er
Estonia (Eesti) ee
Ethiopia et
Falkland Islands (Islas Malvinas) fk
Faroe Islands (Føroyar) fo
Fiji fj
Finland (Suomi) fi
France fr
French Guiana (Guyane française) gf
French Polynesia (Polynésie française) pf
Gabon ga
Gambia gm
Georgia (საქართველო) gs
Germany (Deutschland) de
Ghana (Gaana) gh
Gibraltar gi
Greece (Ελλάδα) gr
Greenland (Kalaallit Nunaat) gl
Grenada gd
Guadeloupe gp
Guam gu
Guatemala gt
Guinea (Guinée) pg
Guinea-Bissau (Guiné-Bissau) gw
Guyana gy
Haiti ht
Honduras hn
Hong Kong (香港) hk
Hungary (Magyarország) hu
Iceland (Ísland) is
India (भारत) in
Indonesia id
Iran (‫ایران‬‎) ir
Iraq (‫العراق‬‎) iq
Ireland ie
Israel (‫ישראל‬‎) il
Italy (Italia) it
Jamaica jm
Japan (日本) jp
Jordan (‫الأردن‬‎) jo
Kazakhstan (Казахстан) kz
Kenya ke
Kiribati ki
Kuwait (‫الكويت‬‎) kw
Kyrgyzstan (Кыргызстан) kg
Laos (ລາວ) la
Latvia (Latvija) lv
Lebanon (‫لبنان‬‎) lb
Lesotho ls
Liberia lr
Libya (‫ليبيا‬‎) ly
Liechtenstein li
Lithuania (Lietuva) lt
Luxembourg lu
Macau (澳門) mo
Macedonia (FYROM) (Македонија) mk
Madagascar (Madagasikara) mg
Malawi mw
Malaysia my
Maldives mv
Mali so
Malta mt
Marshall Islands mh
Martinique mq
Mauritania (‫موريتانيا‬‎) mr
Mauritius (Moris) mu
Mexico (México) mx
Micronesia fm
Moldova (Republica Moldova) md
Monaco mc
Mongolia (Монгол) mn
Montenegro (Crna Gora) me
Montserrat ms
Morocco ma
Mozambique (Moçambique) mz
Myanmar (Burma) (မြန်မာ) mm
Namibia (Namibië) na
Nauru nr
Nepal (नेपाल) np
Netherlands (Nederland) nl
New Caledonia (Nouvelle-Calédonie) nc
New Zealand nz
Nicaragua ni
Niger (Nijar) ng
Nigeria ng
Niue nu
Norfolk Island nf
Northern Mariana Islands mp
North Korea (조선민주주의인민공화국) kp
Norway (Norge) no
Oman (‫عُمان‬‎) ro
Pakistan (‫پاکستان‬‎) pk
Palau pw
Palestine (‫فلسطين‬‎) ps
Panama (Panamá) pa
Papua New Guinea pg
Paraguay py
Peru (Perú) pe
Philippines ph
Poland (Polska) pl
Portugal pt
Puerto Rico pr
Qatar (‫قطر‬‎) qa
Réunion (La Réunion) re
Romania (România) ro
Russia (Россия) ru
Rwanda rw
Samoa ws
San Marino sm
São Tomé & Príncipe (São Tomé e Príncipe) st
Saudi Arabia (‫المملكة العربية السعودية‬‎) sa
Senegal sn
Serbia (Србија) rs
Seychelles sc
Sierra Leone sl
Singapore sg
Sint Maarten sx
Slovakia (Slovensko) sk
Slovenia (Slovenija) si
Solomon Islands sb
Somalia (Soomaaliya) so
South Africa za
South Korea (대한민국) kr
South Sudan (‫جنوب السودان‬‎) ss
Spain (España) es
Sri Lanka (ශ්‍රී ලංකාව) lk
Saint Barthélemy (Saint-Barthélemy) bl
Saint Helena, Ascension & Tristan da Cunha sh
Saint Kitts & Nevis kn
Saint Lucia lc
Saint Martin (Saint-Martin) mf
Saint Pierre & Miquelon (Saint-Pierre-et-Miquelon) pm
Saint Vincent & Grenadines vc
Sudan (‫السودان‬‎) sd
Suriname sr
Swaziland sz
Sweden (Sverige) se
Switzerland (Schweiz) ch
Syria (‫سوريا‬‎) sy
Taiwan (台灣) tw
Tajikistan tj
Tanzania tz
Thailand (ไทย) th
Timor-Leste tl
Togo tg
Tokelau tk
Tonga to
Trinidad & Tobago tt
Tunisia tn
Turkey (Türkiye) tr
Turkmenistan tm
Turks & Caicos Islands tc
Tuvalu tv
U.S. Virgin Islands vi
Uganda ug
Ukraine (Україна) ua
United Arab Emirates (‫الإمارات العربية المتحدة‬‎) ae
United Kingdom gb
United States us
Uruguay uy
Uzbekistan (Oʻzbekiston) uz
Vanuatu vu
Vatican City (Città del Vaticano) va
Venezuela ve
Vietnam (Việt Nam) vn
Wallis & Futuna wf
Yemen (‫اليمن‬‎) ye
Zambia zm
Zimbabwe zw

Flags - States

If your implementation requires the display of state flags, you should use the standard bootstrap approach to flags as illustrated below. Update a flag's size by changing its font size.

Example

Full List

Flag Name ISO 3166-2 Code
Alabama al
Alaska ak
Arizona az
Arkansas ar
California ca
Colorado co
Connecticut ct
District Of Columbia dc
Delaware de
Florida fl
Georgia ga
Hawaii hi
Idaho id
Illinois il
Indiana in
Iowa ia
Kansas ks
Kentucky ky
Louisiana la
Maine me
Maryland md
Massachusetts ma
Michigan mi
Minnesota mn
Mississippi ms
Missouri mo
Montana mt
Nebraska ne
Nevada nv
New Hampshire nh
New Jersey nj
New Mexico nm
New York ny
North Carolina nc
North Dakota nd
Ohio oh
Oklahoma ok
Oregon or
Pennsylvania pa
Puerto Rico pr
Rhode Island ri
South Carolina sc
South Dakota sd
Tennessee tn
Texas tx
Utah ut
Vermont vt
Virginia va
Washington wa
West Virginia wv
Wisconsin wi
Wyoming wy

Icons

In order to standardize icon usage and reduce their cost of development, the State has selected Font Awesome—a font and icon toolkit based on CSS—as the standard source of fonts for State portals. To view their entirely library of over 600 fonts, see http://fontawesome.io/icons/

Dependencies: Font Awesome

fa-calendar
fa-caret-down
fa-caret-left
fa-caret-right
fa-caret-up
fa-check
fa-check-circle
fa-check-square-o
fa-chevron-circle-down
fa-chevron-circle-up
fa-chevron-down
fa-chevron-left
fa-chevron-right
fa-chevron-up
fa-clock-o
fa-close
fa-credit-card
fa-cubes
fa-envelope
fa-eye
fa-eye-slash
fa-file-o
fa-files-o
fa-filter
fa-info-circle
fa-lock
fa-map-marker
fa-minus
fa-paperclip
fa-plus
fa-repeat
fa-search
fa-sort-down
fa-sort-up
fa-star
fa-star-half-o
fa-star-o
fa-unsorted
fa-user
fa-warning

Social Media Icons

fa-facebook
fa-facebook-square
fa-instagram
fa-linkedin
fa-linkedin-square
fa-rss
fa-twitter
fa-twitter-square
fa-youtube-play

Inline Charts

Mini-charts can be included as inline text content if space is limited and the chart is simple.

Dependencies: Peity

Chart HTML
1/5 <span class="ohio-peity-pie" data-peity='{"fill": ["#700017", "#f2f2f2"]}'>1/5</span>
226/360 <span class="ohio-peity-pie" data-peity='{"fill": ["#700017", "#f2f2f2"]}'>226/360</span>
0.52/1.561 <span class="ohio-peity-pie" data-peity='{"fill": ["#700017", "#f2f2f2"]}'>0.52/1.561</span>
1,4 <span class="ohio-peity-pie" data-peity='{"fill": ["#700017", "#f2f2f2"]}'>1,4</span>
226,134 <span class="ohio-peity-pie" data-peity='{"fill": ["#700017", "#f2f2f2"]}'>226,134</span>
0.52,1.041 <span class="ohio-peity-pie" data-peity='{"fill": ["#700017", "#f2f2f2"]}'>0.52,1.041</span>
479,481,444 <span class="ohio-peity-pie" data-peity='{"fill": ["#700017", "#b5dc10", "#73a5cc"]}'>479,481,444</span>
1/5 <span class="ohio-peity-donut" data-peity='{"fill": ["#700017", "#f2f2f2"]}'>1/5</span>
226/360 <span class="ohio-peity-donut" data-peity='{"fill": ["#700017", "#f2f2f2"]}'>226/360</span>
0.52/1.561 <span class="ohio-peity-donut" data-peity='{"fill": ["#700017", "#f2f2f2"]}'>0.52/1.561</span>
1,4 <span class="ohio-peity-donut" data-peity='{"fill": ["#700017", "#f2f2f2"]}'>1,4</span>
226,134 <span class="ohio-peity-donut" data-peity='{"fill": ["#700017", "#f2f2f2"]}'>226,134</span>
0.52,1.041 <span class="ohio-peity-donut" data-peity='{"fill": ["#700017", "#f2f2f2"]}'>0.52,1.041</span>
479,481,444 <span class="ohio-peity-donut" data-peity='{"fill": ["#700017", "#b5dc10", "#73a5cc"]}'>479,481,444</span>
5,3,9,6,5,9,7,3,5,2 <span class="ohio-peity-line" data-peity='{"fill": "#700017", "stroke": "#700017"}'>5,3,9,6,5,9,7,3,5,2</span>
5,3,2,-1,-3,-2,2,3,5,2 <span class="ohio-peity-line" data-peity='{"fill": "#700017", "stroke": "#700017"}'>5,3,2,-1,-3,-2,2,3,5,2</span>
0,-3,-6,-4,-5,-4,-7,-3,-5,-2 <span class="ohio-peity-line" data-peity='{"fill": "#700017", "stroke": "#700017"}'>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
5,3,9,6,5,9,7,3,5,2 <span class="ohio-peity-bar" data-peity='{"fill": ["#700017"]}'>5,3,9,6,5,9,7,3,5,2</span>
5,3,2,-1,-3,-2,2,3,5,2 <span class="ohio-peity-bar" data-peity='{"fill": ["#700017"]}'>5,3,2,-1,-3,-2,2,3,5,2</span>
0,-3,-6,-4,-5,-4,-7,-3,-5,-2 <span class="ohio-peity-bar" data-peity='{"fill": ["#700017"]}'>0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
5,3,2,-1,-3,-2,2,3,5,2 <span class="ohio-peity-bar" data-peity='{"fill": ["#700017", "#b5dc10", "#73a5cc"]}'>5,3,2,-1,-3,-2,2,3,5,2</span>

Lists

Bulletted or numbered lists are used when you want to present an unordered or ordered list of items.

Bulleted List

  • Item One
  • Item Two
  • Item Three
    • Item Three A
    • Item Three B
  • Item Four
  • Item Five

Numbered List

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four
  5. Item Five

Tables

Tables come in various levels of complexity depending on your requirements. This page shows a basic table. Subsequent pages show additional table capabilities like column sorting, search, pagination, and row actions.

Static Tables

Column Title 16px Column Title Column Title Column Title
Input Input Input Input
Input Input Input Input
Input Input Input Input
Input Input Input Input
Column Title 14px Column Title Column Title Column Title
Input Input Input Input
Input Input Input Input
Input Input Input Input
Input Input Input Input

Advanced Table 1

The table example below adds column sorting, row selection and action, search, and pagination control.

Dependencies: DataTables

Advanced Table 1

First name Last name Email Gender
Lori Bell Female
Richard Griffin Male
Joan Knight Female
Harry Dunn Male
Timothy Boyd Male
Carl Carroll Male
Dorothy Dunn Female
Tina Jordan Female
Carlos Lawrence Male
Fred Knight Male
Bruce Sullivan Male
Deborah Price Female
Frances Hamilton Female
Nancy Rose Female
Frank Perkins Male
Lillian Palmer Female
Douglas Nguyen Male
Rebecca Owens Female
Angela Perry Female
Jacqueline Harvey Female
Laura Rose Female
Linda Carr Female
Judy Freeman Female
Alan Rice Male
Helen Butler Female
Phyllis Fernandez Female
Terry Gordon Male
Paul Knight Male
Rose Carter Female
Christina Moreno Female
Robin Fowler Female
Katherine Henry Male
Arthur Ortiz Male
Ruby Miller Male
Ronald Wagner Male
Henry Burns Male
Eric Ferguson Male
Kathryn Berry Female
Harold Long Male
Heather Richardson Female
Frank Rogers Male
Wayne Bishop Male
William Peterson Male
Ralph Rivera Male
Angela Robinson Female
Joseph Knight Male
Shawn White Male
Lois Lawson Female
Andrew Simmons Male
Robert Hall Male

Advanced Table 2

The example below shows an advanced column title spanning multiple rows.

Dependencies: DataTables

Advanced Table 2

First name Last name Advanced Column Title
Email Gender
Lori Bell Female
Richard Griffin Male
Joan Knight Female
Harry Dunn Male
Timothy Boyd Male
Carl Carroll Male
Dorothy Dunn Female
Tina Jordan Female
Carlos Lawrence Male
Fred Knight Male
Bruce Sullivan Male
Deborah Price Female
Frances Hamilton Female
Nancy Rose Female
Frank Perkins Male
Lillian Palmer Female
Douglas Nguyen Male
Rebecca Owens Female
Angela Perry Female
Jacqueline Harvey Female
Laura Rose Female
Linda Carr Female
Judy Freeman Female
Alan Rice Male
Helen Butler Female
Phyllis Fernandez Female
Terry Gordon Male
Paul Knight Male
Rose Carter Female
Christina Moreno Female
Robin Fowler Female
Katherine Henry Male
Arthur Ortiz Male
Ruby Miller Male
Ronald Wagner Male
Henry Burns Male
Eric Ferguson Male
Kathryn Berry Female
Harold Long Male
Heather Richardson Female
Frank Rogers Male
Wayne Bishop Male
William Peterson Male
Ralph Rivera Male
Angela Robinson Female
Joseph Knight Male
Shawn White Male
Lois Lawson Female
Andrew Simmons Male
Robert Hall Male
Total Column Total Column Total

Advanced Table 3

The example below shows some data export actions you might want to include. Note that these actions only work on selected rows (null selection will export the header labels only).

Dependencies: DataTables File Export

Advanced Table 3

First name Last name Email Gender
Lori Bell Female
Richard Griffin Male
Joan Knight Female
Harry Dunn Male
Timothy Boyd Male
Carl Carroll Male
Dorothy Dunn Female
Tina Jordan Female
Carlos Lawrence Male
Fred Knight Male
Bruce Sullivan Male
Deborah Price Female
Frances Hamilton Female
Nancy Rose Female
Frank Perkins Male
Lillian Palmer Female
Douglas Nguyen Male
Rebecca Owens Female
Angela Perry Female
Jacqueline Harvey Female
Laura Rose Female
Linda Carr Female
Judy Freeman Female
Alan Rice Male
Helen Butler Female
Phyllis Fernandez Female
Terry Gordon Male
Paul Knight Male
Rose Carter Female
Christina Moreno Female
Robin Fowler Female
Katherine Henry Male
Arthur Ortiz Male
Ruby Miller Male
Ronald Wagner Male
Henry Burns Male
Eric Ferguson Male
Kathryn Berry Female
Harold Long Male
Heather Richardson Female
Frank Rogers Male
Wayne Bishop Male
William Peterson Male
Ralph Rivera Male
Angela Robinson Female
Joseph Knight Male
Shawn White Male
Lois Lawson Female
Andrew Simmons Male
Robert Hall Male

Cards

Cards offer a nice way to present groups of information related to a single topic and work well in responsive design. The examples below show the approach to card design with a few different combinations of content.

Card

Profile Picture by Jason Rapert
description
Hocking Hills Scenic Overlook

Card Title Goes Here

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

Card with Icon

Profile Picture Jason Rapert shared Ohio Fall Color
description

Longer Card Title Goes Here Longer Card Title Goes Here

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

Card with User

description
Profile Picture

Jason Rapert

Visual Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

Card with Button

description
Profile Picture

myOhio.gov App

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

Dividers

Dividers give you vertical and horizontal rules for separating blocks of content. Optionally you can include a logical operator like and/or/not to further emphasize the relationship between the content blocks. Note that vertical dividers reflow to horizontal in smaller responsive breakpoints.

Vertical (Desktop)

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.
OR
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.
NOT
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint.

Horizontal

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in.
AND
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in.

Form Layout

This page shows how to arrange multiple text fields into a form. Note the arrangement of fields changes at different breakpoints as the browser width decreases.

Section Title

Section Title

Section Title

Comment Box (textarea)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.

Grid System

The tables below illustrate how to divide your pages into a grid and how that grid responds to breakpoint changes as the browser width decreases across devices.

Example: Stacked-to-horizontal

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Example: Mobile, tablet, desktop

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

404 Page

Page Not Found

We are sorry, the page you requested cannot be found.

The URL may be misspelled or the page you're looking for is no longer available. If you think you have arrived here by our mistake, please contact us.

Return to Homepage

500 Page

Server Error

Looks like something went wrong.

We track these errors automatically, but if the problem persists feel free to contact us.

Return to Homepage