Teaser – Paragraph Component

A great way to introduce a page, summarize the purpose of the page/area, highlight key details and/or promote main call-to-action items.

When to use it
  • Introduce the main purpose page/area.
  • Highlight call-to-action items.
  • Provide crucial details at the top of the page.
Where to use it
  • Mostly used inside a group (unless set to full width).
  • Use inside both normal and narrow groups.
  • Use as a subheading before other content.
Features
  • Choose either bone or white color.
    • When in group, the background will always be white.
  • Default (in group) and full-width (outside of group) options.
  • Can add multiple primary and secondary links.

How to Add – Teaser Paragraph Component

  1. Log in to Drupal.
  2. Go to page you wish to edit.
  3. Click on + sign to enter a new paragraph inside of a group.
  4. Complete the form details.
    1. Title: Optional
    2. Description: Optional
    3. Click on a carrot to expand Display Settings section.
      1. Choose background color: White or bone
        1. Most of the time, you will choose white, and the teaser will be placed in group.
        2. If your teaser is placed within a group, the background color will be white.
      2. Choose width: Default or full width
        1. Default: Used in most instances, as the teaser is designed for use within a group.
        2. Full width: Used to place above other paragraph types that are not within a group. The background color will always be white if this is set to "full width" and placed inside a group.
    4. Click on a carrot to expand links section
      1. Add your primary and/or secondary links.
  5. Save paragraph
  6. Save page as "In progress" or "Ready to Review."
Real-Life Examples

In normal group, with title, description, primary and secondary link:

In normal group, no title, no links:

In narrow group, no title, with primary link:

Teaser title

This is just an example of what the teaser paragraph component would look like in a normal group. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.

Title Heading

This is just an example of what the teaser paragraph component would look like outside of a group with white background and full width. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs. This is designed to be used before groups of image promos or other full-width elements.

This is just an example of what the teaser paragraph component would look like in narrow group with no title and no links. This text is simply here to fill space so you can see how the layout of your paragraph component will appear once the content is added. When you create your own, you can add any text you’d like here to fit your needs.

Additional Web Editing Resources

Contact us
Photo of University Marketing and Communications
University Marketing and Communications
Physical Address
1007 Campanile Ave.
Brookings, SD 57007
Mailing Address
Communications Center 105, Box 2230
Brookings, SD 57007
Hours
Mon - Fri: 8:00 a.m.-5:00 p.m.
Follow Us