Civic Theme

A Bootstrap 5.3 theme inspired by the US Web Design System (USWDS). Accessible, trustworthy, and plain-spoken.

Navbar example

Buttons & Button Groups

Typography example

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lead paragraph showcasing Source Sans Pro.

Body text with a line-height of 1.6 for enhanced readability. This is a link and this is a visited link (if visited).

Muted text for less emphasis.

Accessibility is not a feature, it's a right.

USWDS Principles

Display 1

Display 4

Tables example

Agency Status Contact
Department of State Active contact@state.gov
Environmental Protection Agency Pending info@epa.gov
Social Security Administration Review support@ssa.gov

Forms example

Please provide your name.
Please provide a valid email.
gov.us/

Navs, Tabs & Pagination

Alerts example

Badges example

Primary Secondary Success Danger Pill

Progress & Spinners

List Groups

  • Active agency
  • Secondary agency
  • Notifications 14
  • Disabled agency
Linked Item Active Linked Item Success Item

Cards example

Official Document
Annual Report 2023

Detailed statistics on federal digital service usage and accessibility compliance.

Download PDF
Card image cap
Project Alpha

Modernizing legacy systems.

  • Status: In Progress
  • Priority: High
Federal Blue Card

Important highlight with primary background.

Accordions example

It's a Bootstrap 5 override that brings USWDS aesthetics to any project.

Simply include theme.css after bootstrap.min.css.

Placeholder content for the flush accordion.

Carousel example

Modals example

Offcanvas example

Navigation
Links and additional resources.

Popovers & Tooltips

Toasts example

Placeholders example

Misc example