Bolt Design System

Twig Usage

{% include '@bolt-components-broadcast/broadcast.twig' with {
    content: content,
    video: video,
    attributes: {
      id: 'broadcast-1',
    }
  } only %}

Schema

Prop Name	Description	Type	Default Value	Option(s)
attributes	A Drupal attributes object. Applies extra HTML attributes to the <bolt-broadcast> tag.	`object`	—	—
content	The main broadcast content, usually a layout.	`any`	—	—
video	A Brightcove video that will display inside the broadcast container.	`any`	—	—
background	An absolute positioned element that renders as a background (image, video, or shapes) inside relative positioned containers.	`object`	—	`attributes` A Drupal-style attributes object with extra attributes to append to this component. — `opacity` Overlay opacity `none`, `light`, `medium`, `heavy`, `full` `fill` Type of fill to use for the overlay. `solid` or `gradient` `focal_point` Point where the background gradient highlight should originate. `horizontal` X-axis positioning for the background focal point `center`, `left`, `right` `vertical` Y-axis positioning for the background focal point `center`, `top`, `bottom` `video` Set to true if you like to use video as a background. — `video_toggle_button` A Drupal-rendered button that will play and pause a background video. — `items` An array of renderable items to place in the background. [items]: Type:`any` `shape_group` Add a Bolt Background Shapes group. `A`, `B`, `none` `shape_alignment` Alignment of shape group. `left` or `right`
padding_top	Set the top padding of the broadcast.	`string`	`medium`	`none`, `small`, `medium`, `large`, `xlarge`
padding_bottom	Set the bottom padding of the broadcast.	`string`	`medium`	`none`, `small`, `medium`, `large`, `xlarge`

Install

npm install @bolt/components-broadcast

Dependencies

@bolt/core

Broadcast

A hero style element that reveals a video on interaction