On This Page

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

Title (Call to Action - Button Variant)

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.

Title (Call to Action - Arrow Button Variant)

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
Minnesota

Title (Color Block - Blue Variant - Left)

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
Raspberry

Title (Color Block - Blue Variant - Right)

This layout functions the same as the blue color block, but in this variant, the text is aligned to the right. This design provides more flexibility when creating a web page, allowing you to balance it out with other elements on the page. 

Call to Action Button
Person

Title (Color Block - Transparent Variant - Left)

Use this component when you need 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 consistent structure or theme. You can choose to alternate the layout for visual variety or keep all items aligned on the same side for a more uniform look. This flexibility helps organize related information in a clear, user-friendly way.

Call to Action Button
Rice

Title (Color Block - Transparent Variant - Right)

Functions the same as the above transparent variant. Works well for displaying multiple images in a row to create a tiled look. See homepage for an example.

Call to Action Button

Title (Overlay Block - Left)

Use the overlay block component when you need to display text over an image in a way that ensures readability and visual contrast. Ideal for promotional banners or featured content where the text must stand out.

Call to Action Button

Title (Overlay Block - Right)

Functions the same as the standard overlay, but now you have the option to position the block on the right-hand side of the image instead of centered. Choose the placement based on the orientation of the subject in the image.

Call to Action Button

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

Title (Image Gallery)

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, who are using assistive technologies, or who 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