teaser docs

Teaser

An interactive UI element that summarizes a particular resoruce.

Published Last updated: 4.6.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',
    }
  },
} %}
 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
type

Set the type of teaser. A play button will display with the video teaser signifier.

 string —
  • pdf, video, external-link
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

Render time data (video duration or read time) for the resouce.

 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.

      • —
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. The Twig template is the recommended usage for Drupal. Important Notes: 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 bolt-image as the signifier, please be sure that the source image file has the appropriate ratio, otherwise there will be undesired white space. 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',
    }
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser layout

Teaser Layout There are currently three layout options, vertical, horizontal, and responsive. The default option is vertical. 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. Demo
Alt text.

This is 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 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',
    }
  },
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser gutter

Gutter Size for Horizontal and Responsive Teasers The space between columns on the horizontal and responsive teasers can be modified with the gutter prop. It can be small, medium, or large. 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 If you would like to show chips at the bottom of the teaser, just pass rendered Chip List component into the chip_list prop. 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 type and time

Teaser Type and Time The type and time props can be used to display additional information about a resource. Important Notes: Type: this indicates the resource type. If it is set to video, a play icon will appear with the signifier. Time: this represents either video duration (for video, eg. 1:20) or estimated reading time (for external link and PDF, eg. 10 min read). If a value is set, the value will appear with the signifier. Demo
Alt text.
1:20

Lorem reprehenderit aute aliqua duis anim ex ullamco sunt occaecat nostrud ex tempor occaecat in. Ex veniam eu mollit magna.
Twig
{% include '@bolt-components-teaser/teaser.twig' with {
  type: 'video',
  time: '1:20',
  ...
} only %}
HTML
Not available in plain HTML. Please use Twig.

teaser status and actions

Teaser Status and Actions The status prop can be used to display status information about a resource such as locked and view count. Like, share and download buttons can be generated via the actions prop. 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. Pass a like button into the like prop. Example code snippet is shown below. Pass a share popover menu into the share prop. Boundary is required on the popover. Example code snippet is shown below. Pass a download link into the download prop. Example code snippet is shown below. 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 The teaser allows for a few different text options, including eyebrow_text, headline, subheadline, and description. Important Notes: When setting the 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',
    }
  },
  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 show_on_hover boolean prop. When it is set to true, the description appears as an overlay above the signifier and it is truncated at 80 characters. 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.