Virginia Department of Elections logo

ELECT 2025 Style Guide

Banner Components

Banners are Components designed to attract the user’s immediate attention, and are often used on homepages or at the top of a page. Landing pages or major section homepages should have a hero or banner of some kind on the top of the page.

Usually, banners have limited amounts of text. 

Although they can be used as just an informational module, typically banners have one or more  CTAs (Calls to Action) linking to other content. 

Hero Component

Heroes are typically used on the top of a homepage or landing page. In this design, they contain only a large image with a white background. For content blocks that require a CTA (Call to Action) link, use one of the other Banner Components.

  • No additional options

Hero Component Template Documentation

 

Image of voters and large word VOTE

Alert Component

Alerts are simple, short full-width Components placed near the top of a page. Their intention is to inform users about important or timely information. They contain one line/one sentence of relevant information and optionally a link in the text.

There are additional Alert Banner Components that meet specific needs. For example, the Alert Banner with Dropdown is used for the QuickLinks banner on the home page. The Alert Banner with Header Component can be used when an urgent message is needed for the home page - for example, emergency closings.

Alert Banner Component Template Documentation

 

This is a sample to illustrate the alert component.

Banner Component

Below is the basic banner component with an optional CTA button. If the button is not used, there is the option to include a  link around the entire banner.

The illustration can be placed on the right or left side of the banner. On phones, the banner illustration stacks on top of the other banner content.

Options:

  • H1, H2 or H3 header
  • Illustration on right or left
  • CTA button or all-banner link

Banner Component Template Documentation

 

Banner Component 2

This is a variation on the basic banner component. It includes a background image for larger screens, and a mobile background image, but no foreground image/illustration. The positioning of the background image on larger screens can be set (top left, center center, etc.) The mobile version of the background image should be semi-transparent so text will be legible on top of it. Like the Banner Component, there is an optional CTA button. If the button is not used, there is the option to include a  link around the entire banner.

On desktop, the text can be placed on the right or left side of the banner. On phones, the text is centered.

Options:

  • H1, H2 or H3 header
  • Illustration on right or left
  • CTA button or all-banner link

Elect Banner Component 2B/2 Buttons is a variation on this template with 2 stacked buttons below the text.

Banner Component Template Documentation

 

Banner Component Centered Text

The Banner Component Centered Text is a simple banner with background image, centered header and text, and a single button below the text. A variation on this component, the Banner w/3 Buttons Component, has three buttons centered on desktop and stacked on mobile.

 

Banner with Image Background Component

This component includes a background image and a floating text box with an optional CTA Button. If the CTA button is not used, an optional link around the entire banner can be utilized. The text box can be positioned on the right or left side. On mobile, the text box floats inside  the cropped  background image.

Options:

  • CTA button or all-banner link

Banner with Image Background Component Template Documentation

 

Highlight Component

The Highlight Component is designed for news stories and announcements that may require slightly longer text that a banner. One to two sentences of text can be used next to the picture. A CTA button is included.

Picture of polling place with no people
Help Virginia Vote

Virginia Counts on Poll Workers

Being a poll worker, also known as an Officer of Election in Virginia, is a way to serve your community, your state and your country.

Banner 3-Col Component

The Banner 3-Col Component is mostly used for primaries where the Democrat and Republican races are being held on the same day. The icons on the right and the left are links to the results for each party.


Press Releases Highlights Component

This component pulls in information off the Press Release template for each of the four most recent stories. The Press Release Boxes that are pulled into the component  are a secondary layout of the Press Releases Content Type and reside in the News Releases section.

The is no documentation for this template as there is only a name field on the template itself.

 

News Releases

June 18, 2026

EARLY VOTING FOR 2026 PRIMARIES HAS BEGUN

Early in-person voting will continue through Saturday, Aug. 1.

Read more

May 08, 2026

SUPREME COURT OF VIRGINIA VOIDS APRIL 21 REDISTRICTING REFERENDUM

NEWLY APPROVED CONGRESSIONAL MAP WILL NOT BE IMPLEMENTED

Read more

April 30, 2026

Virginia Resumes Membership in Multistate Data Sharing Compact

Virginia officially rejoined the Electronic Registration Information Center (ERIC) and became its twenty-seventh (27) member.

Read more

March 06, 2026

EARLY VOTING FOR APRIL 21 REFERENDUM BEGINS MARCH 6

To vote early in person, registered voters should go to a designated early voting location for the locality in which they are registered, present their ID, and cast a ballot.

Read more