Components

Components are the reusable building blocks of the State Template.

When we designed our components, we made sure:

  • To consider performance and accessibility
  • They were modular and compatible
  • To enhance the user experience and needs

All components

Use these components to present information and images.

accordion component

Accordion

A list of headings that hide or reveal additional content when selected.

Alert banner component

Alert

Keeps visitors informed of important and sometimes time-sensitive changes.

Blockquote component

Blockquote

Emphasizes important speaker quotes or content excerpts.

Breadcrumb component

Breadcrumb

Indicates the current page's location within a navigational hierarchy.

Buttons component

Button

Draws attention to your primary call to action with a large clickable surface.

Countdown component

Countdown timer

Emphasizes an important event by counting toward or away from a fixed point in time.

Executive profile component

Executive profile

Displays a profile image with content.

Featured search component

Featured search

Highlights search as the primary task, typically placed prominently on the homepage.

Form components

Form elements

Allows visitors to enter and submit information to a server.

Horizontal separator component

Horizontal separator

A style component that uses a line to separate content into sections.

List component

Lists

A vertical grouping of related content.

Modal components

Modal

Displays content in a temporary window that appears over the page content.

Number counter component

Number counter

Adds rolling animation to numbers.

Page navigation component

Page navigation

Allows navigation to content sections available on your page.

Pagination component

Pagination

Allows navigation between large groups of content separated by pages.

Parallax component

Parallax

Allows background and foreground elements to move at different speeds.

Progress bar component

Progress bar

Displays the current status of a multi-step task.

Side navigation component

Side navigation

Allows page-level navigation with anchor links.

Social media icons component

Social media icons

Lets you share your agency’s social media pages with visitors.

Table component

Table

Displays large amounts of data in rows and columns.

Tabs component

Tabs

Organizes related content into panels and enables visitors to navigate between them.

CSS style shortcuts

Enhance the design and appeal of your web pages with our CSS style shortcuts. Add CSS units to format page layout, colors, and fonts.