teaser docs

Teaser

Text lockup for teasing larger content.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-teaser/teaser.twig" with {
  content: "Body text. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  buttons: [
    {
      pattern: "button",
      style: "primary",
      text: "CTA 1"
    },
    {
      pattern: "button",
      style: "secondary",
      text: "CTA 2"
    }
  ]
} only %}
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)
eyebrow

Eyebrow text component

 object —
headlines

An array of headline component objects

 array —
  • [items]:
    • Type:object

      Headline text components
logo

Bolt logo component

 object —
content

Body text of teaser

 string —
  • —
contentItems

Array of content item objects

 array —
  • [items]:
    • Type:object
buttons

An array of button component objects

 array —
  • [items]:
    • Type:object

      A button
Install Install 
  npm install @bolt/components-teaser
Dependencies @bolt/components-headline @bolt/components-logo @bolt/core-v3.x

teaser

Body text. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

teaser variation

Eyebrow

This is a headline.

Body text. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.