Executive profile

Executive profiles help your visitors learn more about your agency leadership. They can be displayed vertically or in a horizontal banner at the bottom of your homepage.

Profiles usually include a(n):

  • Image or icon of the executive
  • Name
  • Job title
  • Agency or department name
  • Link to contact information or bio (optional)

Default

The background color is your color theme’s secondary color.

Transparent

Light background

Use this version on a white or light background (like the secondary color of your color theme).

Dark background

Use this version on a black, dark gray, or dark background (like the standout color of your color theme).

Usage

When and how to use it

Keep the executive profile simple. It should only display a portrait and basic information about an agency leader, then link to a bio or about page for detailed information if needed.

Common agency leaders include the:

  • Governor
  • Agency secretary
  • Department director

The executive profiles are transparent. Select colors that work for your background color. Use dark text on light backgrounds, and light text on dark backgrounds.

Note: Make sure to get approval before using a person’s banner. For instance, the Governor’s Office may want to use a specific image or content.

How not to use it

Do not feature more than three executive profiles on a page.

Do not use the executive profile to feature staff members. This pattern should be reserved to the directorate level of leadership.

Layout

These sample layouts show the recommended visual arrangement of executive profiles.

Default

Vertically stack default profiles next to a large area of content above the footer.

sample page layouts with executive profiles arrangements

Transparent: Dark background

Horizontally place transparent profiles next to each other above the footer. These profiles will vertically stack on smaller devices.

sample page layouts with executive profiles arrangements on dark background

Accessibility

Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes