Banner Content

The banner content component can be used to highlight information on the clinic, medical specialty or basic content pages. Here are some examples of content that can be highlighted using the component: 

The banner content component can be used to highlight information on the clinic, medical specialty or basic content pages. Here are some examples of content that can be highlighted using the component: 

Here are helpful forms to use and fill-out as a part of your process to request one of these banners if you would like one added to the website.

• Banner with an icon and button
• U.S. News & World Report banner

Banner text formatting

Select from two styles for the banner content text, the size 20 px option or the size 16 px option.

Do’s:

Use the 20 px option if pairing with just a headline or with a headline and button.

Use the (16 px) option for body text in a simple grid. (The 20 px font size can be used if the text is 100 characters with spaces or less.)

Don’ts

The styles for H2, H3 and H4 from the WYSIWYG should not be used.

If you use a H2, H3, H4 option from the WYSIWYG it will result in unapproved styling within the banner, such as the below:

Why is this unapproved?

• The weight of the header styles unbalances the banner.
• It draws focus from the header and the button (if present).

Do not add two “headings” in the component.

Why is this unapproved?

They compete for user attention, and can often be combined to simplify information presented in the component, like the below example.

Button options

There are currently two buttons styles available, an outline style and fill style. 

Due to the current implementation of the banner, the outline style must be used with the purple background and the fill style must be used with the grey background.

Do’s

Option 1: Purple banner with white outline button style

For CMS editors: When the outline button style is selected with the purple background also selected, the button will be white. (This is an automatic setting.)

Please use the below CMS settings to achieve this white outline button on a banner with a purple background.

Option 2: Grey banner with blue fill button style

For CMS editors: When the solid button style is selected with the grey background also selected, the button will be blue. (This is an automatic setting and the only button color available at this time.)

Please use the below CMS settings to achieve this blue fill button on a banner with a grey background. The accent slide button is not approved for use on the grey banner until additional functionality is added to the CMS.

Don’ts

• Use a fill button style on a purple banner
• Select an accent button on a grey banner
• Select an accent color for the banner

Any of these settings will conflict with the automatic settings for the banner that are currently programmed and may result in unapproved styling such as the below:

Color

There are currently three color options for the background color within the banner content component, white along with mid purple and grey. 

The background color fills the entire width of the screen.

Header content guidelines

• The header should be sentence case unless it includes a proper noun.
• If a proper noun is included, it should be capitalized.
• Preferred character count for the header: 42-82 characters with spaces or less

Body content guidelines

• Preferred character count: 120-232 with spaces
• Maximum character count: 318 with spaces
• Minimum character count: 94 with spaces

Image guidelines

An image can be displayed at the following widths — 

• Extra narrow: 220 px (2 Bootstrap columns)
• Narrow: 255 px (3 Bootstrap columns)
• Medium: 350 px (4 Bootstrap columns)
• Wide: 445 px (5 Bootstrap columns)
• Extra wide: 540 px (6 Bootstrap columns)

Image height

When adding an image or icon, the height of the total content (image, header and body copy combined) will determine the height of the banner content component. 

For example, if your original image is 800 px by 1000 px and you would like the image to appear as a square within the banner content component, you must crop the height before providing the image for upload to the CMS. 

The component can also appear with or without an image/icon/illustration. 

Image placement 

By default, the image will appear on the left for wider screens but will stack above the header and body content on smaller screens (767 px and below).  If desired, the image can be displayed on the right on larger screens, while still maintaining the default smaller-screen stacking behavior. 

Image type

For illustrations, icons, graphics or pictures added outside of the simple grid, the component currently accepts image file types .png and .jpeg. 

Note: The uploaded image can be wider than the maximum width selected, selecting an image width in the CMS will scale the image/icon to the above width. 

Additional image customization

There may be times, when it is desired to center the image within the image area to achieve such an effect as the below. 

The image area size can be customized, along with the placement of the image within it. 

Optional image area sizes are: 

• Narrow: 255 px (3 Bootstrap columns)
• Medium: 350 px (4 Bootstrap columns)
• Wide: 445 px (5 Bootstrap columns)
• Extra wide: 540 px (6 Bootstrap columns)

To illustrate this concept, see below for a narrow image (255 px) in an extra wide image area (540 px) above.

Optional image placement options within the image area include: 

• Right 
• Left 
• Center

Padding/stacking between component elements

Above 767 px screen widths

Below 767 screen widths

Text size options + responsive text sizing

At the 992 px breakpoint, the banner H2 sizes down from 35 px to 24 px. Body contents sizes down from 20 px to 16 px, unless 16 px was the starting body size within the component instance. 

Top padding above the component

There is 5 px of padding between the top of this component and other components.

Banner type: U.S. News & World Report

Here is an example of the component in use on a location page to feature an award. 

U.S. News & World Report banner specifications: 

• This banner should always have the purple background. 
• The icon size selected should always be: Narrow (sized 255 px). 

Banner type: Process steps

Here is an example of the component being used to communicate process steps. 

The element that allows icons to be positioned on the same lateral line as text is called the simple grid. 

Simple grid specifications 

Icons — 
Icons can be added optionally as an SVG, PNG or JPEG. The recommended color for icons in a simple grid is #A6ACB1; however, technically they can be any color within our brand palette.

For designers: The maximum width for an icon is 60 px. There is 30 px padding between the edge of the icon and the start of the text for breakpoints above 767 px. Icons delivered to the Web team for use in the simple grid must have their height and width defined due to how the CMS is currently built. To do this, uncheck ‘Responsive’ in Adobe Illustrator when you export the file. Icons need not be 60 px wide. (Ex. See the mobile phone icon above.)

Reminder — 
Body text in the simple grid can be set to 16 px or 20 px.

Banner type: Text with icon

When requesting, a banner with an icon. The image should always be set to ‘Narrow’ or ‘Extra narrow’. We have been using the brand purple #5D348B for large icons in the banner content component.

Banner type: Header only announcement

This component may function without body content in the “large headline announcement” style pictured below. In this instance, punctuation after the headline may be desired.