teaser docs

2.15.2

Teaser

Teaser Component

Published

History
View changes
Install
yarn add @bolt/components-teaser
Source code
View on Github
Dependencies
@bolt/components-headline @bolt/components-logo @bolt/core-v3.x

Overview

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

Install via NPM
npm install @bolt/components-teaser
Overview Usage Schema Edit this page

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 —
  • @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

    • Properties:
    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 —
    • —
    content_items

    Array of content item objects

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

      An array of button component objects

      		 array —
      • [items]:
        • Type: object

          A button

        • Properties:

        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.

        • CTA 1
        • CTA 2

        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.

        • CTA 1
        • CTA 2
        Debug Panel