Highlight Template

Build a shared content page that works well with the carousels and slide decks as a bridge page to other content.

On this page:

Last reviewed: June 11, 2021

Accessibility Concerns

State and federal rules require most images to be ADA compliant, with meaningful 'alt text.'  > read more on accessible images

Using This Template

Normally you would use a Highlight Template page as a handy bridge page leading to a richer source of content. You are essentially building a teaser, with an automatic link to that other page. This page was developed to work well in our carousel and slide deck components.

Navigate to your shared content area (e.g. /content/shared/www/your-site/) and click New, then select this template.

The page you create will appear with two stacked components and a bottom area that displays any tags that have been associated with the page.

A page built with this template as it first appears.

A page built with this template as it first appears.

Important Notice for Shared Content Templates

In order for any piece of shared content to function properly, there should not be any blank elements or incomplete links in the page (i.e., a photo component without a photo in it or an incorrect link).

No Additional Components Needed

Do not be alarmed if the Sidekick looks empty. This page does not allow any additional components to be added.

Highlight Component

The stacked components are very similar to the Sidebar Flex Module.

Highlight Tab

Heading - Enter a descriptive title for the page that will be displayed in its published teaser.

Primary Link - Add a URL that will be applied to the heading and image.  

Alt Text - Add a description of the image for users who may have difficulty seeing it. (Alt text is required by New York State policy for most images.) See webaim.org for tips on writing alt text.

Alt Text is generally required under state and federal accessibility laws.  Read more about Alternative Text.

  • Adaptive Crop and Zoom
    • Currently in development.

This is an experimental Flex UI feature which will be made available to all users Fall 2021

The page's Highlight Component, opened for editing.

The page's Highlight Component, opened for editing.

Image Tab

This will show in the published teaser for this page.

  • Add an image by dragging one from the Content Finder onto the component.
  • Another way to add an image is to click within the empty Image tab and then upload an image from your computer. (Your image will not be stored in the Digital Assets Manager if you choose this method.)
  • While basic image crop and rotation tools are available within the component, for best results use an external image editor such as Adobe Photoshop prior to upload.
  • Recommended ratio for images is 418 pixels x 262 pixels. (Often the final rendering will be 209 x 131.)
  • If you embed a video, you can also embed an image, which will then act as the 'freeze frame' starting image in the module.  (A 'start' button will automatically be displayed overlying the image.)
The Highlight Component's image tab.

The Highlight Component's image tab.

Text Tab

It includes a Rich Text Editor that supports basic formatting (bold, italics and bullets) as well as hyperlinks.

Pre-formatted text can be pasted in from other sources (e.g. a word processor). This allows inclusion of additional text formatting such as sub- and super-script, but any incompatibly formatted text will be suppressed (e.g. titles or images).

The Highlight Component's text tab.

The Highlight Component's text tab.

Video Tab

Add the URL for a YouTube video.

  • Please note, the thumbnail for this video will NOT be shown in the published teaser for this page. As a workaround, create your own thumbnail and include it in the Image tab.
The Highlight Component's video tab.

The Highlight Component's video tab.

List Builder Component

This second component is the standard List Builder.

Master Class Resources

Was This Information Helpful?

(so we can thank you or request more details)
(buffalo.edu addresses only please)