Touts, also referred to as callouts, are used to promote content throughout your CANVAS site. Touts must always have a headline and call-to-action, with options for promotional imagery, supplemental copy, and drop-downs. Touts come in a variety of sizes and layouts that will beexplained in detail below.
Dimensions & Alignment
Horizontally stacked callouts should be top-aligned and the height of each should match the tallest in the row. Vertically stacked callouts shouldbe left-aligned with matching widths.
Imagery & Videos
When used, images or video stills must be 16:9 or square in dimension. In vertical formats, the image is placed above the content area. Horizontal formats should place the images to the left of the content area.
Touts are available in five different widths: 25%, 33%, 50%, 66%, and 100%
25% and 33% widths are always vertically formatted.
50%, 66%, and 100% widths are always horizontally formatted.
Tout Imagery Size
When imagery is included in a callout, vertical callouts have the option of using a “short” 16:9 image or “tall” square image. In vertical formats, the image is placed above the content area.
Horizontal touts always use a square image, placed to the left or right of the tout depending on the text direction of the displayed language. The height of a horizontal tout is always defined by the square image.
When mixing 25% and 50% touts, or 33% and 66% touts in the same row, we recommend that the vertically formatted 25% and 33% touts have either a “short” 16:9 image or no image, rather than a square image.
Touts resize and restack based on the width of the browser viewport.
When moving to narrower breakpoints, touts in a row on desktop may need to span multiple rows on tablet or mobile. The reading order of thetouts in a row is preserved with the left most (or right most for RTL languages) callout remaining above the other touts in a row. The following diagram demonstrates the stacking and resizing of touts across breakpoints. The lower number tout is always to the left or above higher number touts and will appear first to the user as they read. At breakpoints, 25% touts on desktop become 50% touts on tablet and 100% touts on mobile. 50% touts on desktop become 100% touts on tablet and mobile.
33%/66% Width Touts on Tablet
Unlike 25%/50% width touts, 33%/66% touts do not break across rows at the tablet breakpoint. Rather, the width of the callout is reduced toremain in proportion to the browser viewport width. See touts 11 through 15 in the diagram.
Tout Height on Mobile
On mobile, touts are stacked in to a single column, with one tout per row. All touts span the full width of the mobile devices viewport, regardlessof their size on desktop. The height of the tout on mobile is then determined by the amount of content inside. This ensures that touts with varying amounts of copy canbe accommodated at smaller screen sizes.
In order to preserve responsiveness, certain layouts of touts in a row are not allowed.
A 50% width tout may not be flanked by two 25% width touts. 25%/50% width and 33%/66% width touts may not be mixed together in the same row.
Rows of touts must add up to 100% of the tout area, and cannot exceed that amount.
If a template has a 50% width column for touts, you must fill 100% of that space with either one 50% width tout or two 25% width touts. If a template has a 100% width row for touts, then you can use any allowed combination that adds up to 100%.
An exception to the 100% rule:
When using touts on a landing page to represent and drive users to subpages, the last row may be incomplete if the number of subpages is notevenly divisible by the number of callouts in a row.