Display teasers for other pages in an interactive tabular format.
Last reviewed: September 12, 2023
This component was designed for full-width pages (no sidebars). Performance on narrower pages may be unpredictable.
The component has two tabs: Collapsible Grid and Collapsible Grid Items.
By default, teaser images from the linked pages are displayed as slides in a grid pattern and when you mouse over a slide, the image 'flips' to display the associated teaser title. When you click a slide, the slide number is now displayed as a placeholder while the full teaser is revealed (title, image and description, plus any list of links that is associated with that page template). The full teaser is displayed below that slide row except for the bottom row whose teasers are displayed above that row.
Click the wrench icon to 'configure' these settings.
Number of grid columns: Choose from 3, 4 (default) or 5. The actual number of columns displayed will depend on the space available on the page. ('Grid columns' are not the same as regular page columns.)
Flip grid items: Provide a comma-separated list of slide numbers to declare which, if any, of the slides should be flipped so that the teaser title is displayed first instead of the image. (On mouse-over, the view flips from description to image, or vice versa.)
Note: The number of slides within the collapsible grid must match or exceed the 'Number of grid columns' value, or the teasers will not open up when a slide is clicked.
Here you will choose the type of list, as well as additional advanced settings.
Build list using: This drop-down menu asks how you want to build your list. You have the option to build it using:
New window: Select so each clicked page is displayed in a new browser window.
Order by: There are several ways in which you can order your list:
Reverse order: Check the box to select whether you would like to inverse the order selected in the Order by field.
Unlike other carousels and slide decks, this component cannot be randomized.
Start at: Select how many items you would like to skip at the beginning of the list (example: '5' will skip the first four items and begin the list at the fifth item). Left blank, the default value of '1' will result in the list displaying every item in your list. This setting can be useful if you wish to feature several items in one group, perhaps at the top of your news page, or on your homepage, and NOT have them repeated with the rest of your list displayed elsewhere on your site.
Limit: Choose a maximum number of entries (optional).
Tip: If you want all items to appear in the list, do not leave the Limit field blank. Instead, enter a value that you anticipate will meet your needs; for example, 200, 500, etc. (The News Center has used 9999 as a 'very large number' because their archives date to 1990.)
Exclude current page: Do not display any entries that link to the page on which the list is shown (optional).
Enable scheduling: Select to enable shared content scheduling.
Host page: Specify on what page of your site you would like any shared content shown. By default, it will be the current page.
You can link directly to any of the slides in a Collapsible Grid, so that the page loads with that slide's content displayed. The slides are numbered, 1, 2, 3, etc. and these become the anchors for your link. Add a hashtag (#) + the slide number to the end of the URL.
For example, this would load the page with the third slide revealed on this Demo Site page:
Alternative text ('Alt text') is a best practice for all your UBCMS images and is often required for accessibility so screen readers can tell visually disabled users what they are not seeing.
Images displayed as teasers in lists require Alt text. Normally this is supplied in the original listed pages, often in shared content, and in some cases, in the metadata of the referenced images in Assets.
Best practice, Alt text should be added whenever an image is uploaded into Assets.
Link text should describe where the link will take the user in a manner that is appropriate to the context on your page and also the target page. This is also true for images that act as links.
Best practice: Avoid meaningless standalone phrases like "click here", "see all" and "learn more".
Links in many components can be set to open in a new browser window (or tab). The user can thus explore the new page, while preserving the source page (and your website) in the original tab. However, this can be confusing if the user does not realize a new tab has opened. They may become lost, confused how they arrived on that new page and unable to return to your site.
Best practice: let the user control their experience and stay in the same tab, with two notable exceptions: