Flex Module component

Bundle a headline, image or video, with text and related links (for narrow columns).

This feature works comparably in both the Classic and Flex UI versions of the UBCMS. In the future, screenshots and language will be updated to reflect Flex UI.

On this page:

Accessibility
  • Beware of duplicate link text.
  • Images require Alt text.
  • List Teaser images require Alt text.
  • Use 'Open in New Window' sparingly.

> Read more.

Last reviewed: September 22, 2021

Using This Component

The component as it is first displayed on the page.

The component as it is first displayed on the page.

Add the component to the page in one of the sidebars. Two editable areas will appear: a Flex Module Component (upper) and a List Builder Component (lower).

For original image sizes, we recommend starting with at least 800px x 536px for landscape or 536px x 800px for portraits (aspect ratio 1.5:1). Larger images are encouraged up a maximum of 2500px.

Tip: Default images and text are shown when you display lists as certain kinds of teasers. Learn how to override the defaults by adding custom text and images to your teasers.

Flex Module (upper area)

The upper area part of the Flex Module Component has four tabs: Flex Module, Image, Text and Video.

Flex Module Tab

  • Headline: Type an informative title for your Flex Module that will be seen on the published page.
  • Subheading: Optionally add a descriptive secondary headline.
  • Primary link: Input a URL into this field. The subheading, button and image will all hyperlink to this URL. (If you use the video option and image option simultaneously, the image will instead link to your video.)
  • New window: Select Open link in new window if desired.
  • Image size: Select an image size:
    • Large (209 x 131 pixels)
    • Small Square (60 x 60 pixels)
    • Small Portrait (60 x 87 pixels)
  • Alt text: If you decide to include an image or video in your Flex Module, you are required by state law to write a functional description of your image (or video thumbnail) in this field. (See webaim.org for tips on writing alt text.)
  • Show button: Check the box to display a button that takes your visitors to the page with the URL you have specified in the Primary Link field.
  • Button text: Type text that will be displayed on your button.
The upper editable area (flex module).

The upper editable area (flex module).

Image Tab

This tab has the settings of a standard Photo Component.

  • Add an image by dragging one from the Content Finder.
  • Alternately, click within the empty Image tab and then upload an image. (Your image will not be stored in the Digital Asset Manager if you choose to upload a file using this method.)
  • Crop and/or rotate your image by using the buttons that appear in the Image tab after you import your photo into it.
  • If you already have an image in the Image tab but desire to replace it with a different one, click the Clear button adjacent to the crop/rotate tools.
  • You will be reminded to verify alt text when changing images.

Only JPG, GIF and PNG formats are allowed. JPGs are recommended for best results and faster load times.

Text Tab

This tab has the settings of a standard Body Text Component.

  • Type descriptive text for your Flex Module.
  • When you view your Flex Module, this text will appear to below your Headline and to the right of your image.

Video Tab

  • Add a video by entering YouTube video ID or URL.
  • The video will appear below your headline and above your subheading.
  • A play button will be superimposed on the image of the video.
  • Videos are represented by a thumbnail image, which requires alt text.
  • Note: Unlike the regular Video (YouTube), this component does not support starting part way through the video.

Technical Restrictions

  • You are required to include Alt text for your Photo Teaser’s image. In some cases a blank (" ") may be substituted for nonessential images.

Accessibility Concerns

See an Example

Was This Information Helpful?

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