Callouts

The callout portlet produces a single callout, or "call to action", meant to encourage user interaction. Each callout contains an image, a link, and a single string of text. Because there is only a single string of text, there is no way to control the exact position of a line break. Authors can add/edit/delete callouts, so CSS should be in place to ensure flexibility (ex. callouts displayed inline can wrap to another line gracefully).

Best Practices

Callout images should have large enough dimensions to scale up to HD resolution.
Image file sizes should be compressed as much as possible without large amounts of quality loss (High control image compression).
CSS background images should ONLY be used for decorative elements, never as a replacement for the "img" tag.
Background images should either be large enough to scale or be designed to repeat. For full width or height backgrounds, background-size should be set to cover(covers entire viewport on all sides) or contain(stops when any part of image hits a viewport edge) for responsiveness.
Callout text styling should display properly at all device widths (1920-1024px desktop, 990-320px mobile) and should be able to accomodate more or less verbiage.
Callout text must conform to ADA AA contrast guidelines (Web AIM Contrast Checker).

Render Templates

The HTML structure of a portlet is determined by the render template in use. Portlets have multiple render templates to choose from, and our development team has the ability to create new render templates based on client need.

Callout - Standard

This callout has one link that wraps separate spans for image and text.

Callout - Text Only

This callout has one link that wraps a span for text.

Callout - Grid

This render template builds a wall of callouts. It uses a jQuery plugin to find the best place for each one depending on its dimensions. Each callout has one link that wraps separate spans for image and text.

Callout - Carousel

This render template creates a carousel of callouts. It uses a jQuery plugin to display four at a time with additional callouts hidden offscreen until the forward/next arrows are used to trigger a change. Each callout has one link that wraps separate spans for image and text.

Side-by-side Comparisons

div class="calloutContainer standard"

ul class="buttons"

li class="calloutItem"

span class="image"

img

span class="text"

A single string of text

div class="calloutContainer textOnly"

ul class="buttons"

li class="calloutItem"

span class="text"

A single string of text

div class="calloutContainer calloutGrid"

ul class="buttons grid"

li class="calloutItem"

span class="image"

img

span class="text"

A single string of text

div class="calloutContainer calloutCarousel"

ul class="buttons carousel"

li class="calloutItem"

span class="image"

img

span class="text"

A single string of text