Banner Component

A banner can be placed at the top or middle of a webpage and can host "Call to Action" buttons, customized images and logos.

You will be guided to the components that can be used for each banner and how to further develop the banner for the page you are creating.

Active banner components on live pages will be displayed on this page as examples for how the banner components work. Use the accordions for step by step instructions on editing and updating the applicable component.

The dimensions for the banner image varies depending on the banner component being applied. Below are the banner components and the suggested dimensions applicable:
- Customer Banner : 1900 x 465
- Banner Full Width: 1900 x 330
- Banner Initiatives: 1900 x 650
By following the banner image dimension guidelines mentioned above, ensures the image is high quality and fits in the banner image space and loads correctly.
The Site Banner Search component is typically used on the Miami-Dade.gov home page, and allows users to search the website.
- The component does not allow for edits
  - Cannot change background banner image
  - Cannot update text
  - Unknown if the layout/appearance can be edited
The below changes can be made to the banner initiative component.

Content

Main Title
- Displays in the middle of the banner in bold and capital letters
Main Sub-title
- Displays below the main title, in bold and sentence case
Font
- Defaulted white
- Black font is optional
Banner Background Image
Images for the banner if it does not already exist, can be created by the graphics team. For images that already exist, add them by using any of the following links listed and search through for the folder/file name.
- Import picture
- Select existing
- Select modified
Description
Field under the background image, should be completed to add a description of the picture being used, for ADA compliance purpose.
- Size: All banner images must be 1600 x 800-pixel resolution and <999KB size if possible. This ensures that your photo is high quality, fits in the banner image space and doesn't take a while to load on the page.
- No text: Banner images are decorative and should not include any text. This is to maintain accessibility standards.
- Subject: Use the rule of thirds to ensure the intended subject of your photo is also the focus of your photo. Position the subject in the middle band to ensure they don't get cut off when you place the image on the page in Cascade.

Important Message

Include the message that the department is trying to relay!

Interest Categories

Online Services

News & Social Media

Create a new miamidade.gov account

Elected Officials

County Agencies

Transparency & Open Data

Employee Information

My Employee Portal

Interest Categories

Online Services

News & Social Media

Create a new miamidade.gov account

Elected Officials

County Agencies

Transparency & Open Data

Employee Information

My Employee Portal

Banner Component

Banner Image Dimensions

Site Banner Search

Banner Initiative

Notes from FIU guide

Communications and Customer Experience

Important Message

banner-full-width

Search Miami-Dade