Overview
Component name: Teaser
Authors who can use: any
Templates/page types that can use component: all
Required or optional: optional
Authoring Fields
Adding the Teaser component to the page
1. Once on the desired page in Edit mode, add the Teaser by doing the following:
a. Option 1- double click on “Drag components here.” A modal titled “Insert New Component” will pop up. Type “Teaser” in the search bar, or scroll to the Teaser in the list. Double click to add to page.
b. Option 2- on the left hand rail, navigate to the Components tab. Type “Teaser” in the search bar, or scroll to the Teaser in the list. Double click to add to page.
Selecting a Teaser variant
There are several Teaser variants. Select the option that will best portray the specific content. Multiple Teasers may appear on one page.
1. Basic Teaser: Use when the general Teaser structure is needed.
i. Includes title and description.
ii. Optionally includes pre-title, 1-2 CTAs, and text alignment styling.
iii. Does not include Image.
2. Section Header Teaser: Use to introduce new sections of content through a Teaser.
i. Includes title and description.
ii. Optionally includes pre-title, 1-2 CTAs, and text alignment styling.
iii. Does not include Image.
3. Feature Teaser: Use when dedicating a section to a single story. This Teaser is full-width and intended to be a visual break from the rest of the page. Use sparingly and avoid stacking multiple Feature Teasers on top of each other.
i. Includes title and description.
ii. Optionally includes Image, pre-title, 1-2 CTAs, Image alignment styling, and text alignment styling.
iii. The Container background “Background Alt” is intended for this Teaser variant.
4. Informational Teaser: Use when communicating actions that users can take and information relevant to the action, along with a relevant Image.
i. Includes title and description.
ii. Optionally includes Image, pre-title, 1-2 CTAs, Image alignment styling, and text alignment styling.
iii. The Container background “Background Alt” is intended for this Teaser variant.
5. Icon Teaser: Use when an icon visual is helpful on the page. Includes title and description. Optionally includes pre-title, icon, 1-2 CTAs, and text alignment styling. Does not include Image.
Editing the Teaser component - Basic Teaser/ Section Header Teaser
1. With the edit wrench, open the component.
1. General tab
a. Teaser Type dropdown: Select Teaser variant.
b. Pre-title field: Add a pre-title. Recommended character limit is 25 characters.
c. Title field: Add a title. Recommended character limit is 65 characters.
d. Title Heading Level dropdown: Select a heading level between H2-H6.
e. Description field: Add a description. Recommended character limit is 200 characters.
2. Links tab
a. Calls-to-action multifield: Optionally add 1-2 CTAs.
i. Link URL field: Add the destination link for the CTA. May be internal or external.
ii. Link Text field: Add a label to appear on the CTA.
iii. Link Type dropdown: Select whether the link should be Primary, Secondary, or Ghost. Only one Primary Link should appear on a Teaser.
3. Styles tab
a. Text Alignment dropdown: Select between None, Left, and Center. None alignment is the same as Left. Default None.
b. Image Alignment dropdown: Unneeded for the Basic and Section Header Teasers.
Basic and Section Header Teaser examples
Figure A: Basic Teaser with two CTAs and text left-aligned.
Figure B: Section Header Teaser with no CTAs and text center-aligned.
Editing the Teaser component - Feature Teaser / Informational Teaser
1. Follow the same guidelines as for Basic/Section Header Teaser. Differences are listed below.
2. General tab
a. Enable Image checkbox: Check to add an Image to the Teaser. Once added, exit the Teaser dialog and open the Image dialog to edit accordingly. Default checked.
3. Styles tab
a. Text Alignment dropdown: While the options of None, Left, and Center are present, when an Image is enabled, do not select the Center alignment.
b. Image Alignment dropdown: Select between None, Left, and Right. None alignment is the same as Left. Default None.
4. To add the Teaser Background, navigate to the Container in which the Feature or Informational Teaser sits. With the edit wrench, open the component.
a. In the Styles tab, select “Container Background” dropdown. Select “Background Alt.” Select “Done.”
b. The background color is now applied.
Feature and Informational Teaser Examples
Figure C: Feature Teaser with one CTA and Image left-aligned. Teaser background color (Background Alt) is applied.
Figure D: Informational Teaser with two CTAs and Image right-aligned. Teaser background color (Background Alt) is applied.
Editing the Teaser component - Icon Teaser
1. Follow the same guidelines as for Basic/Section Header Teaser. Differences are listed below.
2. General tab
a. Icon field: Add an icon from the Remix Icon library: https://remixicon.com/
Icon Teaser example
Accessibility
1. There are no specific accessibility notes for the Teaser component.
Other tips
1. Use the Emulator widget to test Teaser size on different devices.
2. Surface Alt color, when added from the Container component, applies a border radius of 32 px, in addition to the color, to distinguish it from the white background.