Callouts and Styles

Call-to-action buttons

Call-to-action buttons or CTA buttons generally appear higher up on the page and should link to the main actions that would help support the patient's next step in their journey. Most often these buttons link to a filtered list of doctors or locations that offer that particular service, but the button link destination is flexible. Two CTA buttons can be added to a page at a time and can also include icons for each button. See the following CTA button examples: 

.

[Back to Top]

Accordions and tabs

Accordions or tabs can be placed on any page template to house multiple sections of content related to that page topic. Accordions will appear collapsed on default and the user can click on each title to expand (and then collapse) each section. Tabs will display the first panel on default and the user can click on each tab to bring that specific panel forward. A title should be included for each accordion or tab. The max amount of sections for each accordion or tab component is 10. Multiple accordions or tabs can be used throughout the page and can feature images or other styles available from the website. See the following examples.

Full-width CTA single button

The main call to action with a single button is shown below. It features a heading, description, and a button. To ensure that the callout displays properly across all view ports, character limits have been established for the heading and description. A 40 character limit has been set for the heading, and a 50 character limit has been set for the description, including punctuation.

The CTA can appear at the top or bottom of the page. If there is a hero image on the page, the CTA will appear underneath. See the following image and a live full-width CTA example further down the page.

Full-width CTA multiple buttons

The main call to action with multiple buttons is shown below. It features a heading and up to three buttons. To ensure that the callout displays properly across all view ports, character limits have been established for the heading and buttons. A 40 character limit has been set for the heading, and a 50 character limit has been set for the button text.

The CTA can appear at the top or bottom of the page. If there is a hero image on the page, the CTA will appear underneath. See the following image and a live full-width CTA example further down the page.

[Back to Top]

Blue and white text CTAs

Blue and white text features feature an icon, heading/link, and body copy. To ensure that the callouts display properly across all view ports, character limits have been established for the heading and body copy. Blue text features work best when there are two callouts displayed. White text features work best when there are three callouts displayed. Either one can be used independently or both can be featured together. These callouts appear at the bottom of the page and should feature related content for that section.

A 50 character limit has been set for the heading, and a 150 character limit has been set for the body, including punctuation. See the following images and example blue and white text CTAs further down the page.

[Back to Top]

Rotating text feature

The rotating text feature has a heading, body, and a button. This callout can house up to four unique slides and can be rotated manually by clicking on the controls. The rotating text feature can only appear on homepages, such as microsites and regional location (hospital) pages. To ensure that the callout displays properly across all view ports, character limits have been established for the heading and body. 

A 50 character limit has been set for the heading, and a 120 character limit has been set for the body. See the following image and example as shown on the henryford.com homepage.

[Back to Top]

Show me

The Show Me section displays news articles, classes and events, blog articles and Instagram posts in a callout feature. The Show Me results can be filtered by keyword, such as service line or location, and will dynamically feed the latest posts from that particular category in a teaser format which may also include an image. Any of the Show Me categories can be included or omitted. The user can toggle between each Show Me link to see four results from each category and can then click on the specific feature link or "View All" link to find all results from that category. See the Show Me example at the bottom of the page.  

[Back to Top]

Flexible CTAs

Virtual Care

Convenient comfort from your own home.

Schedule a virtual visit

Flexible CTAs can be featured with or without an image and can be displayed inline, right or left aligned, or as a full width CTA. Character count recommendations: 50 characters for the heading, 120 characters for the body, 40 characters for the button/link text. However, since these are flexible, more text characters can be added, if needed. These CTA features are ideal for featuring content that is directly related to the body copy that is it displayed within. See the following examples for inline and full width CTA options.

Inline flexible CTA, with image

Images should be sized 346 x 158px for the inline CTA.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at nunc orci. Etiam blandit, leo quis vestibulum laoreet, lectus justo rhoncus velit, nec sollicitudin mi dolor a nibh. Integer sed orci augue. Cras euismod, neque a consequat scelerisque, quam nulla aliquet arcu, vel dignissim dolor risus ut odio. Duis in ante cursus, tempor libero a, aliquet lorem. Ut porttitor odio orci, sit amet sodales lacus ultrices tristique. Integer consectetur nunc a molestie faucibus. Duis in diam scelerisque, aliquam nulla eu, dignissim nibh. Vivamus porttitor sem ante, at condimentum lectus ultrices eget. Nunc hendrerit ante quam, non ultrices neque venenatis eget.

Inline flexible CTA, without image

Praesent eu risus nec ante porttitor euismod vel in nisi. Maecenas velit dolor, accumsan vitae nibh laoreet, pretium lobortis augue. Praesent ac lacus non enim venenatis mattis. Aliquam iaculis metus dictum, vulputate libero condimentum, placerat diam. Nullam accumsan odio et ultricies convallis. Pellentesque non quam vel ante dictum venenatis in vitae augue. Curabitur vitae malesuada ante.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ac vulputate neque. Aenean rhoncus est eget scelerisque lacinia. Ut mollis nulla sit amet eros dignissim, a faucibus felis rhoncus. In non diam sed diam tristique venenatis. Quisque ultrices erat urna, in lobortis tortor vehicula et. In at rhoncus metus. Proin cursus mi arcu. Donec ornare, lacus malesuada gravida tempor, nibh libero sollicitudin risus, sed volutpat sem magna in nisi. Nulla feugiat feugiat sodales.

In euismod ligula at sem faucibus venenatis. Curabitur tristique ac est quis pretium. Integer tincidunt velit ac pellentesque pretium. Suspendisse suscipit metus ligula, quis faucibus mauris luctus non. Quisque faucibus purus eu arcu tempor, sit amet lobortis lectus convallis. Vestibulum sed sem nec lacus gravida venenatis et blandit mauris. Nulla elementum felis eu metus pulvinar, nec gravida risus cursus. Sed interdum sagittis nibh nec pharetra. Pellentesque ac nisi non nunc sodales consectetur.

Full width flexible CTA, with or without image

Images should be sized 450 x 300px for the full width CTA.