teaser docs

Teaser

An interactive UI element that summarizes a particular resoruce.

Published Last updated: 5.9.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

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. signifier and headline props are required for a basic teaser. 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.

This is a vertical teaser

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.

This is a horizontal teaser

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.

This is a responsive teaser

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. Demo
Alt text.

A card variant vertical teaser

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.

A card variant horizontal teaser

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.

A card variant responsive teaser

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.

A card variant vertical teaser

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.

A card variant horizontal teaser

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.

A card variant responsive teaser

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

This horizontal teaser is using a small gutter

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.

This is a teaser with chips

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

This teaser shows a long description on hover

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.