Bolt Design System

Overview

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

Install via NPM

npm install @bolt/components-teaser

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

Published

Overview

Install via NPM

Usage

Schema