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