Teaser

An interactive UI element that summarizes a particular resoruce.

Published Last updated: 5.8.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.google.com',
      target: '_blank',
      rel: 'noopener'
    }
  },
} %}
 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
signifier

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

 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

Use for PDF/articles teasers for estimating reading time. If you choose Video Thumbnail as a signifier do not use this prop since it will conflict with the Video Thumbnail`s duration prop.

 string —
  • —
like

Render the like button. Link element is expected here.

 object —
  • —
share

Render the share button. Share menu is expected here.

 object —
  • —
download

Render the download link. Link element 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.

      • —
variant

Set the style variant of the teaser.

 string transparent
  • transparent or card
spacing

This works only with the card variant teaser. Set spacing around the component content

 string small
  • small, medium, large
border_radius

This works only with the card variant teaser. Set rounded corners on the component.

 string none
  • none, small, large
type
(deprecated)

This prop is deprecated, please stop using it. Instead of type: "video", use Video Thumbnail component as a signifier to open a video modal.

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