Docs

Video Message

7 min read • 1,284 words
Share via

Features a video with optional messages.

Overview   Arguments   Background Type   Heading Type   Messages Type   Video Type   Examples   Stacked Video Message  

  Important

Content blocks are a new feature that is still in beta  . The implementation is subject to change. The documentation on this website is still being worked on.

Overview  

The video content block renders a horizontal line to separate sections. The separator spans the entire page from edge to edge on smaller devices. On larger screens, the line is bound by the maximum container width that contains the section.

Preheading

Heading
Video content. It supports multiple lines.
 

First Message

 

Second Message

 

Third Message

yml 
- _bookshop_name: video-message
  heading:
    preheading: Preheading
    title: Heading
    content: Video content. It supports multiple lines.
    align: start
  background:
    color: primary
    subtle: true
  orientation: horizontal
  video:
    provider: vimeo
    media-id: "55073825"
    autoplay: true
  messages:
    - title: First Message
      icon: fas 1
    - title: Second Message
      icon: fas 2
    - title: Third Message
      icon: fas 3

Arguments  

The content block supports the following arguments:

Name Type Required Default Comment
_bookshop_name string Unique name of the bookshop component.
background background, string Background style of the section.
border bool Flag add a border to the element.
cols int 3 Number of grid columns. Supported values: [1 - 5].
heading Heading Heading of the content block, including a preheading and content element.
icon-rounded bool Stack the icon in a round container.
justify select center Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
link-type select button Style of the link. Supported values: [button, link].
messages [] Messages Messages to include in the element. Each element is rendered as a card.
orientation select stacked Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
video Video yes The video to embed.
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].
Name Type Required Default
_bookshop_name string
Unique name of the bookshop component.
background background, string
Background style of the section.
border bool
Flag add a border to the element.
cols int 3
Number of grid columns. Supported values: [1 - 5].
heading Heading
Heading of the content block, including a preheading and content element.
icon-rounded bool
Stack the icon in a round container.
justify select center
Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
link-type select button
Style of the link. Supported values: [button, link].
messages [] Messages
Messages to include in the element. Each element is rendered as a card.
orientation select stacked
Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
video Video yes
The video to embed.
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].

Background Type  

Name Type Required Default Comment
backdrop string Background image with a mask to improve contrast.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool Apply subtle theme colors.
Name Type Required Default
backdrop string
Background image with a mask to improve contrast.
color select
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
subtle bool
Apply subtle theme colors.

Heading Type  

Name Type Required Default Comment
align select start Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML Section content displayed below the title.
preheading string Preheading of the section heading.
size int 4 Display size of the headline. Supported values: [1 - 6].
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].
Name Type Required Default
align select start
Alignment of the headline, content, or icon. Supported values: [start, center, end].
arrangement select above
Arrangement of the preheading, either left or above the header. On smaller screens, the preheading is always placed on top. Supported values: [above, first].
content string, template.HTML
Section content displayed below the title.
preheading string
Preheading of the section heading.
size int 4
Display size of the headline. Supported values: [1 - 6].
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int 8
Column width of the element. For embedded elements, the width is relative to the parent’s container. Supported values: [1 - 12].

Messages Type  

Name Type Required Default Comment
content string, template.HTML Section content displayed below the title.
icon string Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
label string Assistive label of the element.
link string, template.URL, url Local page reference or external hyperlink address.
title string, hstring.RenderedString, hstring.HTML, template.HTML Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
Name Type Required Default
content string, template.HTML
Section content displayed below the title.
icon string
Icon to include. You can use shorthand notation such as fas sort to include a Font Awesome icon. The argument also supports files with an .svg or .json extension.
label string
Assistive label of the element.
link string, template.URL, url
Local page reference or external hyperlink address.
title string, hstring.RenderedString, hstring.HTML, template.HTML
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.

Video Type  

Name Type Required Default Comment
account string Account name of the video asset, required by some digital asset managers. You can also set the default account name in the site’s parameters.
autoplay bool Flag indicating the animation or video should start playing immediately when loaded, if supported by the browser. Any audio will be muted.
id string Unique identifier of the current element.
provider string youtube Name of the video provider. It should match one of the registered providers in the site’s parameters under videos.
query-args string Optional query parameters to append to video asset’s url. The query string is prepended with a ? symbol. Only applicable to Cloudinary.
Name Type Required Default
account string
Account name of the video asset, required by some digital asset managers. You can also set the default account name in the site’s parameters.
autoplay bool
Flag indicating the animation or video should start playing immediately when loaded, if supported by the browser. Any audio will be muted.
id string
Unique identifier of the current element.
provider string youtube
Name of the video provider. It should match one of the registered providers in the site’s parameters under videos.
query-args string
Optional query parameters to append to video asset’s url. The query string is prepended with a ? symbol. Only applicable to Cloudinary.

Examples  

Change the style of your video block with the available arguments.

Stacked Video Message  

Set orientation to stacked to use a stacked arrangement.

Preheading

Heading
Video content. It supports multiple lines.
 

First Message

 

Second Message

 

Third Message

yml 
- _bookshop_name: video-message
  heading:
    preheading: Preheading
    title: Heading
    content: Video content. It supports multiple lines.
    align: start
  background:
    color: primary
    subtle: true
  orientation: stacked
  video:
    provider: vimeo
    media-id: "55073825"
    autoplay: true
  messages:
    - title: First Message
      icon: fas 1
    - title: Second Message
      icon: fas 2
    - title: Third Message
      icon: fas 3
On this page: