Teaser

An interactive UI element that summarizes a particular resoruce.
Usage recommendations
Recommended Not Recommended
Prioritize Relevance: Make sure the teaser's content is a direct and compelling representation of the linked resource or external content it leads to. Avoid Distractors: Skip additional links or CTAs within the teaser. The entire block serves as a single CTA, and multiple actions can confuse the user.
Entice but Don't Overshare: Include just enough detail to spark interest and provoke a click-through. Don't give away everything, maintaining a level of curiosity. No Mixed Messages: Ensure the teaser content directly correlates with the destination it points to, avoiding any misleading or irrelevant information.
Balance Text and Imagery: Use a harmonious blend of text and visuals to represent the content effectively, ensuring neither overpowers the other. Don't Clutter: Keep the content streamlined. Overloading the teaser with too much text, imagery, or icons can dilute its purpose and make it less effective.
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
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. Note: the value none is deprecated, use small (default) and large instead.

 string small
  • small or large
no_aspect_ratio

By default teaser signifiers have predefined aspect ratios (16/9 or 1/1). Set this prop to true if signifiers should not have predefined aspect ratios but auto rendered aspect ratio.

 boolean false
  • —
valign

Control the vertical alignment of items.

 string center
  • start, center, end
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