Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    User Guide

    Teaser Component

    The Teaser is a robust container that organizes several pieces of content. It can include Image, Title, and/or Text components, and can include links to further content or other actions.

     

    There are five Teaser variations: the Basic Teaser, the Section Header Teaser, the Icon Teaser, the Informational Teaser, and the Feature Teaser. All are similar in purpose and use, with different styling options available to best suit an author’s needs.

    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.

    Teaser toolbar, featuring the edit wrench.

    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.

    General tab in Teaser authoring dialog.
    Links tab in Teaser authoring dialog.
    Styles tab in Teaser authoring dialog.

    Basic and Section Header Teaser examples

    Figure A: Basic Teaser with two CTAs and text left-aligned. Figure A: Basic Teaser with two CTAs and text left-aligned.
    Figure B: Section Header Teaser with no CTAs and text center-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 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. 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. Feature Teaser images look best at the following ratio/size: 4:3, 1200x900 px
    2. CTA Teaser images look best at the following ratio/size: 1:1, 600x600 px
    3. Use the Emulator widget to test Teaser size on different devices.
    4. 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.