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