broadcast docs

Broadcast

A hero style element that reveals a video on interaction
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

Content of the layout. While anything can be passed, layout items are preferred.

 any —
  • —
template

Select from a predefined set of layout templates. Numbers represent % of each layout item widths. The @from-* keywords mean "starting from a particular breakpoint".

 array[string] —
  • 50, 50@from-small, 50@from-medium, 67, 67@from-small, 67@from-medium, 75, 75@from-small, 75@from-medium, 25/25/50@from-small, 25/25/50@from-medium, 25/50/25@from-small, 25/50/25@from-medium, 25/75@from-small, 25/75@from-medium, 33/67@from-small, 33/67@from-medium, 50/25/25@from-small, 50/25/25@from-medium, 67/33@from-small, 67/33@from-medium, 75/25@from-small, 75/25@from-medium, halves, halves@from-small, halves@from-medium, thirds@from-small, thirds@from-medium, fourths@from-small, fourths@from-medium, tiles, tiles@from-small, tiles@from-medium, flag, flag@from-small, flag@from-medium, full-vertical-push-last-item
gutter

Set the horizontal spacing in between layout items.

 string medium
  • none, small, medium, large, xlarge
row_gutter

Set the vertical spacing in between layout items.

 string medium
  • none, small, medium, large, xlarge
padding_top

Set the top padding of the layout.

 string medium
  • none, small, medium, large, xlarge
padding_bottom

Set the bottom padding of the layout.

 string medium
  • none, small, medium, large, xlarge
align_items

Control the horizontal alignment of all layout items.

 string center
  • start, center, end
valign_items

Control the vertical alignment of all layout items. Unset is required for setting equal-height layout items, do not set this prop if that is the intention.

 string —
  • start, center, end
full_bleed

Removes all outer spacing, allowing the layout to extend from edge to edge of its container.

 boolean false
  • —
mask

Adds a masking layer in the shape of a chess piece that animaes once scrolled to.

 boolean false
  • —
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
video

A Brightcove video that will display inside the broadcast container.

 any —
  • —
Install Install 
npm install @bolt/components-broadcast
Dependencies @bolt/core motion

broadcast

Basic Broadcast A hero style element that reveals a video on interaction with a trigger button.
Important Notes: A theme and/or background image is recommended to illustrate the expanding of the container. A semantic trigger is required when creating a Broadcast section. To relate a trigger to a specific broadcast, add the data-bolt-broadcast-target attribute to a button and set the value to the <broadcast>’s unique id (eg. #broadcast-1). The trigger will toggle the broadcast's appearance as well as the video's play state. At its core, this is a layout, so the content must be set using a layout-item.
Demo
Twig
{% set content %}
    {% include '@bolt-elements-button/button.twig' with {
    content: 'Play video',
    attributes: {
      type: 'button',
      'data-bolt-broadcast-target': '#broadcast-1',
    }
  } only %}
{% endset %}

{% set layout_items %}
  {% include '@bolt-layouts-layout/layout-item.twig' with {
    content: content,
  } only %}
{% endset %}

{% set video %}
..
{% endset %} 

{% include '@bolt-components-broadcast/broadcast.twig' with {
  content: layout_items,
  video: video,
  attributes: {
    class: 't-bolt-gray-xlight',
    id: 'broadcast-1',
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

broadcast padding

Broadcast Padding Options We have made the padding_top and padding_bottom properties from layout available here.
Important Notes: The default value for both options is medium. When nesting another layout inside the broadcast, it is recommended to set the broadcast padding to none.
Demo
Twig
{% include '@bolt-components-broadcast/broadcast.twig' with {
  padding_top: 'xlarge',
  padding_bottom: 'xlarge',
  // ..
} only %}
HTML
Not available in plain HTML. Please use Twig.

broadcast background

Broadcast Padding Options Background images can be added to any broadcast and color themes can be enabled by theme classes.
Important Notes: The background should be the Background component.
Demo
Twig
{% set background %}
  {% set image %}
    // ..
  {% endset %}
  {% include '@bolt-components-background/background.twig' with {
    opacity: 'heavy',
    fill: 'gradient',
    items: [
      image
    ]
  } only %}
{% endset %}

{% include '@bolt-components-broadcast/broadcast.twig' with {
  background: background,
  // ..
} only %}
HTML
Not available in plain HTML. Please use Twig.

broadcast use case hero

Broadcast Use Case An example of what a broadcast might look like in use. This example sets the broadcast's padding to none and nests a layout in the content. Demo

Pega is the platform for enterprise transformation

Alt text.
Twig
{% include '@bolt-components-broadcast/broadcast.twig' with {
  content: content,
  background: background,
  video: video,
  padding_top: 'none',
  padding_bottom: 'none',
  attributes: {
    id: 'broadcast-use-case-1',
    class: 't-bolt-dark'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.

broadcast use case mask

Broadcast Use Case An example of what a broadcast might look like in use. This example makes use of the layout mask property. Demo

Scroll down to reveal the animation

A history of
AI innovation

Over 40 years ago, Alan Trefler developed some of the first AI agents capable of playing chess at an elite level.

He applied the same principles to tech and business to unlock radical agility as never before.

Scroll up to reveal the animation

Twig
{% include '@bolt-components-broadcast/broadcast.twig' with {
  content: layout_items,
  mask: true,
  background: background,
  padding_top: 'large',
  padding_bottom: 'large',
  align_items: 'center',
  video: video,
  attributes: {
    id: 'broadcast-use-case-2',
    class: 't-bolt-dark u-bolt-text-align-center'
  }
} only %}
HTML
Not available in plain HTML. Please use Twig.