teaser docs

2.19.0

Teaser

Teaser Component

Teaser block. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-teaser
  {% 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 %}

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
  • @bolt-components-headline/headline.schema.yml > Object details
    • text

      Renderable text content of the headline.

      Type: string, object, array

    • tag

      Html tag.

      Type: string

      • h1, h2, h3, h4, h5, h6, p, span, cite, div
    • align

      Text alignment.

      Type: string

      • left, center, right
    • weight

      Font weights.

      Type: string

      • light, bold, regular, semibold
    • style

      Font styles.

      Type: string

      • normal or italic
    • size

      Font size.

      Type: string

      • xxsmall, xsmall, small, medium, large, xlarge, xxlarge, xxxlarge
    • autoshrink

      Automatically shrink the font size used in the xxxlarge headline size when 60 or more characters are used.

      Type: boolean

    • transform

      Text transformation.

      Type: string

      • uppercase, lowercase, capitalize
    • url

      If provided, turns headline into a link to given url.

      Type: string

    • icon

      Bolt icon. Accepts either 1) an icon name as a string 2) an icon object as expected by @bolt-components-icon or 3) the string "none" to explicitly remove default icons

      Type:

    • quoted

      Adds quoted styling to text.

      Type: boolean

headlines

An array of headline component objects

array
  • [items]:
    • Type: object

      Headline text components

logo

Bolt logo component

object
  • @bolt-components-logo/logo.schema.yml > Object details
    • invert

      Set to true to invert the logo colors.

      Type: boolean

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

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.

Debug Panel