Call to Action - Short

When you create a Call to Action item and go to insert it on to a page, you have several template options for display.

This page provides examples of the different choices available when creating the Call To Action template.

Table of Contents

Title and Description Text

The screenshot below shows how the Title and Description Text entered when creating a component will look when using the Call to Action - Short template:

Open

In the Call to Action - Short template, the Banner takes up the whole width of the main column of the page.

• The Call to Action - Short template is very similar to the Call to Action Template, just shorter.

• All three of the above components have a Light Gray background color.

The above examples show how the two different text options (Title and Description Text) appear in the template:

1. If you enter only a Title (highlighted in yellow above), it will appear large in the middle of the Banner.

2. If you enter only Description Text (highlighted in blue above), it shows a much smaller and less emphatic text.

3. If you enter both (highlighted in green above), the Description Text is the same, and the Title becomes smaller, but bolder.

Including a Link

If you include an Internal or External Link, it appears on the right side of the Banner:

Open

The Link is a blue button, unless the background is too similar to the blue color (see the Background Color Options examples for more).

• If you enter text in the Text for link/button field, it will appear on the button.

• If you do not, the button will read “Find out more”

Including an Image

You can attach an Image to serve as the background for the Banner, as opposed to a solid color.

• If you attach an image, you should also use the color menu to choose an overlay.

• If you don’t, it will look like this:

The image becomes the background of the Banner, but as you can see above, the text is white and can get lost in the picture if there isn’t an overlay.

The CTA is more clear if you add the overlay to the image with the Overlay color/color of text background drop down menu.

The screenshot below shows the difference if you use an overlay:

The second Banner (highlighted in yellow above) uses a Blue overlay. As you can see, the text is easier to read with the overlay.

Background Color Options

The following screenshots show examples of the different background color options for banners without images.

Some things to note:

• The link button will change from blue to white if the background color is too close to the blue of the button.

• The text will change from Dark Blue to White depending on the darkness of the color.

Light Gray

Dark Gray

Light Blue

Blue

Dark Blue

Turquoise

Cyan

Coral

Orange

Yellow