CTAs

Primary CTA

The primary CTA (call-to-action) encourages users to engage in a specific task. Primary CTAs can include text, images, video, icons and buttons. Primary CTAs can stretch the full-width of the body content, or can be stacked in columns to highlight multiple actions.

Primary CTA Options

  • Image is 600 pixels wide X 360 pixels high (minimum)
  • Text can be positioned left, right, or center
  • An optional orange button can be positioned right or center

Primary CTA Sample 1

This CTA stretches the width of the body content and features a button element.

a man sitting on rocks looking out at a valley

Primary CTA Sample 2

On large screens this CTA is a 1/3 column with an image and a button. On small screens this CTA will be content-width.

Primary CTA Sample 3

On large screens this CTA is a 1/3 column with a video and a button. On small screens it will be content-width.

Primary CTA Sample 4

On large screens this CTA is a 1/3 column with a text and a button. On small screens it will be content-width. This sample features an icon graphic element.

Full-Width CTA

Full-width CTAs can be used to break up a page and draw considerable attention to important messages and actions. They can incorporate images, video and text.

Full-width CTA Options

  • Image is 960 pixels wide X 478 pixels high
  • Can be oriented left or right (text will alternate sides)
  • Text can be positioned left, right or center
  • An optional orange button can be positioned left, right or center

Full-Width CTA Sample

This is a bold statement designed to command attention and prompt action.

Sidebar CTA

The sidebar CTA is a highly-visible option that does not interrupt the page flow. Sidebar CTAs can incorporate images, video, and text.

Sidebar CTA Options

  • Image (optional) is 600 pixels wide X 360 pixels high (minimum)
  • Text can be positioned left, right or center
  • An optional orange button can be positioned left, right or center

Sidebar CTA Sample with Icon

On large screens this CTA is a 1/3 column to the right of the main content. On smaller screens this content will appear at the bottom of the main content.

Flip box CTA

Flip box CTAs are an interactive and highly-customizable option. They can incorporate images, icons, text and buttons.

Flip box CTA Options

  • Image (optional) is at least 600 pixels wide.
    • Can include branded color screens on images
    • If multiple images are used, all should have a similar orientation and image ratio
  • Text can be positioned left, right, or center on each side
  • An optional orange button can be positioned left, right or center

Sample Flip Box 1 - Front

An icon adds a graphic element to the front.

Sample Flip Box 1 - Back

This flip box features a solid background on front and back. An icon decorates the front of the flipbox.

Sample Flip Box 2 - Front

Sample Flip Box 2 - Back

This flip box features a color-screened image on the front with a solid color back and an orange button.

Sample Flip Box 3 - Front

Sample Flip Box 3 - Back

This flip box features an image on the front with a solid color back. Text is not recommended on the front side if the image is too busy or light. Text can remain on the back.

Story Card CTA

Story Card CTAs are an interactive and highly-customizable option that is also a great alternative to Flip Box CTAs. They can incorporate images, icons, text and buttons. Story Card CTAs are recommended in groups of 3 or 4 per row.

Story Card CTA Options

  • Image (optional) is at least 600 pixels wide.
    • Can include branded color screens on images
    • If multiple images are used, all should have a similar orientation and image ratio
  • An optional orange button can be positioned left, right or center
Emergency entrance at Stephens Memorial Hospital

This story card features a zoom in when you hover over the image.

Bob and Sandy Bahre Health Center

This story card features a zoom out when you hover over the image and an orange button.

Leapfrog top rural hospital banners

This story card features a text link similar to common blog formatting. – Continue Reading

Closing CTA

The closing CTA can be used to reinforce page messaging and to prompt a visitor to take an action.

Closing CTA Options

  • Size is variable, depending on the content
  • Can incorporate images, icons, text and buttons
  • Can be unique to one page or recurring on each page
  • Cannot live in the page footer

Help us forge a healthier future >