teaser docs

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
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

teaser

Basic Teaser A teaser is an interactive block element. Its main purpose is to display relevant content for a resource or external link before user interaction, for which the entire element is clickable.
Important Notes: Due to the complexity of the component markup, Twig template is the recommended usage for Drupal. Both the signifier and headline props are recommended for all teasers, though neither is strictly required. When using the signifier prop, it will automatically crop an <img> to the defined ratio (16:9 for vertical and responsive layout, 1:1 for horizontal layout). When using the Image element or the Video Thumbnail component as the signifier, please be sure that the source image file has the appropriate ratio, otherwise there will be undesired white space or cropping. The headline prop and its children props are required for use. To set an action for the teaser, set an href (for links) or type and proper attributes (for buttons) with the headline.link_attributes prop.
Demo
Twig
{% set image %}
  // <img> or <bolt-image> goes here
{% endset %}
{% include '@bolt-components-teaser/teaser.twig' with {
  signifier: image,
  headline: {
    text: 'This is the teaser headline',
    link_attributes: {
      href: 'https://www.google.com',
      target: '_blank',
      rel: 'noopener'
    }
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser layout

Teaser Layout A teaser can be vertical, horizontal, or responsive. Each has a different layout design that accommodates particular use cases.
Important Notes: Vertical or responsive teaser accepts 16:9 aspect ratio signifier. Any other aspect ratio will automatically be cropped to a 16:9 ratio. Horizontal teaser accepts 1:1 (square) aspect ratio signifier. Any other aspect ratio will automatically be cropped to a 1:1 ratio. The above restrictions do not apply to the card variant. Reference the schema for all options.
Demo
Alt text.
The signifier is using a 16:9 aspect ratio image. Aliquip sint mollit irure eiusmod duis aliquip duis qui nostrud enim ea aute in enim.
Alt text.
The signifier is using a 1:1 aspect ratio image. Aliquip sint mollit irure eiusmod duis aliquip duis qui nostrud enim ea aute in enim. Do et eiusmod sint velit est do exercitation qui minim.
Alt text.
The signifier is using a 16:9 aspect ratio image. Duis dolore labore cillum excepteur aute veniam dolore consectetur est sint exercitation sit. Dolor eiusmod officia laborum tempor. Enim eiusmod Lorem laboris aliqua dolore.
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  layout: 'horizontal',
  signifier: image,
  headline: {
    text: 'This is the teaser headline',
    link_attributes: {
      href: 'https://www.google.com',
      target: '_blank',
      rel: 'noopener'
    }
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser card variant

Teaser Card Variant The variant card prop can turn a teaser into a teaser card.
Important Notes: When the variant prop is set to card it's possible to apply spacing around the teaser and rounding the teaser's corners. Reference the schema for spacing and border_radius props. The card variant teaser, unlike the transparent teaser, has default background color set to white. It doesn't inherit the theme color from the wrapping element. The default white color can be changed using a theme class on the teaser component. Scroll the page to see examples.
Demo
Alt text.
This card has the border_radius set to small. The prop spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alt text.
This card has the prop border_radius set to small. The prop spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alt text.
This card has the prop border_radius set to small. The prop spacing is set to small. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alt text.
This card has the prop border_radius set to large. The prop spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alt text.
This card has the prop border_radius set to large. The prop spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Alt text.
This card has the prop border_radius set to large. The prop spacing is set to medium. Lorem ipsum dolor sit amet consectetur adipisicing elit.

The navy color theme is set on the element which wraps the card variant teaser.

The black color theme is set on the element which wraps the card variant teaser.

A navy gradient is set on the element which wraps the card variant teaser.

A custom (teal-wine) gradient is set on the element which wraps the card variant teaser.

Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  layout: 'horizontal',
  variant: 'card',
  border_radius: 'large',
  spacing: 'medium',
  signifier: image,
  headline: {
    text: 'This is the teaser headline',
    link_attributes: {
      href: 'https://www.google.com',
      target: '_blank',
      rel: 'noopener'
    }
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.
Teaser Card Clickability And Hover Effect The card variant teaser can have entire card clickable which on hover, the card will animate with a rising effect.
Important Notes: When we use the headline.link_attributes the whole card is clickable and has rising effect on hover. Don't add any clickable elements to the description part of the card teaser because they will not be clickable. When we use theheadline prop without link_attributes, there's no whole card clickability and the card teaser doesn't have rising effect on hover. You can add interactive elements like links to the card teaser desciption.content.
Demo

Entire card clickability, with hover effect.

No entire card clickability, without hover effect.

Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  variant: 'card',
  signifier: image,
  headline: {
    text: 'This is the teaser headline',
  },
  description: {
    content: 'It is possible to have <a href="https://www.google.com" target="_blank" rel="noopener">a link here</a> when the headline is not a link.',
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser no aspect ratio

Teaser No Aspect Ratio Display the signifier with its original image dimensions with no predefined aspect-ratio.
Important Notes: By default, teaser signifiers have predefined aspect ratios (16/9 or 1/1). If the no_aspect_ratio prop is set to true, the signifier will display in an aspect ratio based on the original image dimensions.
Demo

Regular teasers.

Card variant teasers.

Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  variant: 'card',
  no_aspect_ratio: true,
  signifier: image,
  headline: {
    text: 'This is the teaser headline',
    link_attributes: {
      href: 'https://www.google.com',
      target: '_blank',
      rel: 'noopener'
    }
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser gutter

Gutter Size for Horizontal and Responsive Teasers Gutter is the spacing in between columns in the horizontal and responsive teasers.
Important Notes: The gutter prop has no effects on vertical teasers. Reference the schema for all options.
Demo
Alt text.
Lorem reprehenderit aute aliqua duis anim ex ullamco sunt occaecat nostrud ex tempor occaecat in. Ex veniam eu mollit magna. Enim eiusmod Lorem laboris aliqua dolore. Dolor eiusmod officia laborum tempor.
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  layout: 'horizontal',
  gutter: 'large',
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser chips

Teaser Chips Chips can be rendered at the bottom of a teaser to display more information.
Important Notes: Use the chip_list prop to pass a Chip List component. If linked chips are used, they will work as expected and be excluded from the overall clickable area of the teaser.
Demo
Alt text.
Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim. Id consectetur dolor voluptate eu veniam anim adipisicing dolor ut occaecat officia fugiat magna reprehenderit.
Video Research
Twig
{% set chip_list %}
  {% include '@bolt-components-chip-list/chip-list.twig' with {
    size: 'xsmall',
    items: [
      {
        text: 'Video',
      },
      {
        text: 'Research',
      },
    ],
  } only %}
{% endset %}
{% include '@bolt-components-teaser/teaser.twig' with {
  chip_list: chip_list,
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser time

Estimated Reading Time Certain resources come with estimated reading time. A teaser can display that information as an overlay on the signifier.
Important Notes: Use the time prop to render such information. This option is perfect for external articles and PDF resources. This option is not to be used with a video resource. If a Video Thumbnail component is used as a signifier do not use the time prop. Please use Video Thumbnail’s duration prop instead.
Demo
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  time: '10 min read',
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser status and actions

Teaser Status and Actions A teaser can display certain metadata and additional actions as a list.
Important Notes: View count can be set via the status.views prop. It can be numbers or string (eg. 28k). Locked status can be set via the status.locked prop. If this is set, a lock icon will appear with the signifier. A like button can be set via the like prop. Additional JavaScript is required for the like button to function. A share popover menu can be set via the share prop. boundary is required on the popover so that the popover would be rendered within the teaser. A download button can be set via the download prop.
Demo
Twig
// Set up the like and share buttons
{% set like %}
  {% set icon_heart %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'heart',
    } only %}
  {% endset %}
  {% include '@bolt-elements-text-link/text-link.twig' with {
    content: 'Like',
    icon_before: icon_heart,
    reversed_underline: true,
    attributes: {
      type: 'button',
      class: 'js-bolt-like-button', // JS target for handling the like function.
    },
  } only %}
{% endset %}
{% set share %}
  {% set share_menu %}
    {% include '@bolt-components-share/share.twig' with {
      display: 'menu',
      text: 'Share this content',
      sources: [
        ...
      ],
    } only %}
  {% endset %}
  {% set share_popover_trigger %}
    {% set icon_share %}
      {% include '@bolt-elements-icon/icon.twig' with {
        name: 'share',
      } only %}
    {% endset %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Share',
      icon_before: icon_share,
      reversed_underline: true,
      attributes: {
        type: 'button'
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-popover/popover.twig' with {
    trigger: share_popover_trigger,
    content: share_menu,
    spacing: 'none',
    boundary: '.js-bolt-target-teaser', // JS target for containing the popover within the teaser.
  } only %}
{% endset %}
{% set download %}
  {% set icon_download %}
    {% include '@bolt-elements-icon/icon.twig' with {
      name: 'download',
    } only %}
  {% endset %}
  {% set tooltip_trigger %}
    {% include '@bolt-elements-text-link/text-link.twig' with {
      content: 'Download slides',
      icon_before: icon_download,
      reversed_underline: true,
      attributes: {
        href: 'https://www.google.com/',
      },
    } only %}
  {% endset %}
  {% include '@bolt-components-tooltip/tooltip.twig' with {
    trigger: tooltip_trigger,
    content: "PDF, 3 pages, 2.3mb",
  } only %}
{% endset %}

// Set up the component
{% include '@bolt-components-teaser/teaser.twig' with {
  like: like,
  share: share,
  download: download,
  status: {
    views: '28k',
    locked: true,
  },
  attributes: {
    class: 'js-bolt-target-teaser',
  },
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.
JavaScript
<script>
  // Example Like Button JS
  var likeButtons = document.querySelectorAll('.js-bolt-like-button');
  likeButtons.forEach(function(el) {
    el.addEventListener('click', function (event) {
      var likeIcon = this.querySelector('bolt-icon');
      if (likeIcon.getAttribute('name') === 'heart-open') {
        likeIcon.setAttribute('name', 'heart');
        likeIcon.setAttribute('color', 'pink');
      } else {
        likeIcon.setAttribute('name', 'heart-open');
        likeIcon.removeAttribute('color');
      }
    });
  })
</script>

teaser text options

Teaser Text Options When creating text content in a teaser, the full features of headline, subheadline, and eyebrow can be used.
Important Notes: When setting the eyebrow, headline, and subheadline please be sure to set the proper HTML tag to ensure SEO and accessibility best practices. The traditional eyebrow/headline/subheadline lockup is best used in responsive layout.
Demo
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  eyebrow_text: 'This is the eyebrow',
  headline: {
    text: 'This is the headline',
    tag: 'h2',
    size: 'xxlarge',
    link_attributes: {
      href: 'https://www.google.com',
      target: '_blank',
      rel: 'noopener'
    }
  },
  subheadline: {
    text: 'This is the subheadline',
    tag: 'h3',
    size: 'xlarge',
  },
  description: {
    content: 'This is the description.',
  },
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser description on hover

Show Description on Hover The teaser description has the option to be displayed as an overlay above the signifier.
Important Notes: Use the description.show_on_hover prop to render teaser description as an overlay above the signifier. This prop should only be used on vertical and responsive teasers. It does not work with horizontal teasers.
Demo
Alt text.
7 pages
Long description. Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  description: {
    content: 'This is the description',
    show_on_hover: true,
  },
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser video modal

Teaser Video Within Modal A teaser about a video resource can trigger a video to be played in a modal.
Important Notes: Use the Video Thumbnail component as a teaser signifier. Only set up the image, do not make it interactive. Interactivity (triggering of the modal) should be handled via the headline’s link_attributes. Do not use time prop since it will conflict with the Video Thumbnail’s duration prop.
Demo
A Rock Climber
Video duration: 4:26

Lorem reprehenderit aute aliqua duis anim ex ullamco sunt occaecat nostrud ex tempor occaecat in. Ex veniam eu mollit magna.
Twig
{# Set up video thumbnail as image #}
{% set video_thumbnail %}
  {% set image %}
    {% include '@bolt-elements-image/image.twig' with {
      attributes: {
        src: '/images/placeholders/16x9.jpg',
        alt: 'A Rock Climber',
        loading: 'lazy',
        width: 400,
        height: 300,
      }
    } only %}
  {% endset %}
  {% include '@bolt-components-video-thumbnail/video-thumbnail.twig' with {
    content: image,
    video: {
      title: 'This is a Video Title',
      duration: '4:26',
    }
  } only %}
{% endset %}

{# Pass video thumbnail as signifier, use link attributes to handle the trigger of modal #}
{% include '@bolt-components-teaser/teaser.twig' with {
  signifier: video_thumbnail,
  headline: {
    text: 'The signifier headline.',
    link_attributes: {
      type: 'button',
      'data-bolt-modal-target': '#' ~ modal_id,
    },
  },
  description: {
    content: 'Description.',
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.