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

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 Install 
npm install @bolt/components-broadcast
Dependencies @bolt/core

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.
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 video %}
..
{% endset %} 

{% include '@bolt-components-broadcast/broadcast.twig' with {
  content: content,
  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

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.