Images

Drone photo of City Hall and the Mississippi River during the day

Title

Use this section to explain why users should take action. Clearly communicate the value or outcome of the action—whether it's signing up, learning more, or accessing a service. A strong, purposeful message helps motivate users and builds trust.

You can choose from a standard button style for general actions or an arrow button style for directional cues or forward movement. Select the style that best supports your content and guides users effectively.

Call to Action Button

Title

Use this component when you want to draw attention to a single, focused action—such as applying for a program, reading more about a topic, or starting a process. It’s ideal for situations where a clear, singular next step is needed.

Call to Action Button

Title

Use this component when you want to represent multiple options within the same category. It’s ideal for displaying grouped content—such as City Council members, Saint Paul wards, or departments—where each item shares a common structure or theme.

This layout works best when stacked vertically, allowing users to easily scan and compare options. It helps organize related information in a consistent, accessible way while supporting clear navigation or selection.

Call to Action Button

Subtitle (label, category, or topic of the gallery)

Title

Use this section to provide a written overview or summary of the image gallery content. This is especially helpful for users who may not be able to view all images, are using assistive technologies, or prefer a quick summary. Including a description improves accessibility and offers multiple ways for users to engage with the visual content—by understanding the theme, purpose, or context of the gallery at a glance.

Guidelines

- Hero: Use at the top of a page to create a strong visual impact and introduce the page’s purpose or theme.
- Call to Action: Use when you want to pair a compelling image with a clear, actionable message (e.g., “Learn More About...,” “Register Now for...”).
- Overlay Block: Use when text needs to be layered over an image to highlight key messaging without requiring additional layout space.
- Color Block: Use to break up content sections visually or to emphasize a theme or mood using color and imagery.
- Gallery: Use when showcasing multiple related images, such as event photos, product shots, or visual case studies.
- Don’t overload the page with multiple large images that compete for attention—prioritize clarity and hierarchy.
- Avoid using the gallery component when only one or two images are available; instead use a single image layout, or embed it in the body text component.
- Avoid using images that are purely decorative—ensure they support the content and message.
- Provide alt text for all images, that describe the image’s purpose or content.
- Avoid using images with embedded text on them. These cannot be read by screen readers and might be cropped depending on the user’s screen size.
- If text must be part of an image (e.g., logos), provide the same information in alt text or nearby content.
- Ensure images scale properly when users zoom in (up to 200%) without losing clarity or breaking layout.
- Avoid images that flash more than 3 times per second to prevent triggering seizures in users with photosensitive epilepsy.

You are using an unsupported browser. Please use Microsoft Edge.

Title

Title

Title

Subtitle (label, category, or topic of the gallery)

Title

Guidelines

When to Use

What to Avoid

Accessibility Tips