Teaser

An interactive UI element that summarizes a particular resoruce.

Published Last updated: 4.0.0 Change log Github NPM
Twig Usage 
  {% include '@bolt-components-teaser/teaser.twig' with {
  signifier: image,
  headline: {
    text: 'Some awesome Title',
    link_attributes: {
      href: 'https://www.pega.com',
    }
  },
} %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
layout

Set the layout of the teaser based on the use case.

 string vertical
  • vertical , horizontal , responsive
gutter

Set the spacing in between columns for horizontal and responsive layouts.

 string medium
  • small , medium , large
type

Set the type of teaser. A play button will display with the video teaser signifier.

 string —
  • pdf , video , external-link
signifier

Set the signifier for the teaser. It accepts plain element, the Image component, and the Icon component.

 object —
  • —
eyebrow_text

Set the helper info above the headline.

 string —
  • —
headline

Set the headline text, size, and the block link that covers the entire teaser.

 object —
    • text

      Renderable text content of the headline.

      • —
    • tag

      Set the semantic HTML tag for the headline.

      • h1 , h2 , h3 , h4 , h5 , h6 , p , span , cite , div
    • size

      Set the size of the headline.

      • xxsmall , xsmall , small , medium , large , xlarge , xxlarge , xxxlarge
    • link_attributes

      A Drupal-style attributes object with extra attributes to append to the headline link.

      • —
subheadline

Set the subheadline text and size.

 object —
    • text

      Set the subheadline text content.

      • —
    • size

      Set the size of the subheadline.

      • xxlarge , xlarge , large
    • tag

      Set the semantic HTML tag for the subheadline.

      • h1 , h2 , h3 , h4 , h5 , h6 , p
description

Set a brief description of the resource.

 object —
    • content

      Content of the description..

      • —
    • show_on_hover

      If set to true, the description will appear as an overlay above the signifier.

      • —
time

Render time data (video duration or read time) for the resouce.

 string —
  • —
like

Render the like button. Link element is expected here.

 object —
  • —
share

Render the share button. Share menu is expected here.

 object —
  • —
chip_list

Render a list of related chips for the resource. Passing the Chip List component is mandatory.

 object —
  • —
status
object —
    • locked

      Indicate if this teaser is showing a locked resource. It shows a lock icon in the upper left corner of the signifier.

      • —
    • views

      Render the view count.

      • —
Install Install 
  npm install @bolt/components-teaser
Dependencies @bolt/core-v3.x