Docs

Video Message

Features a video with optional messages.
Overview Horizontal layout Stacked layout Arguments Background Type Heading Type Messages Type Video Type

Overview  

The video-message content block renders a video with optional messages displayed either horizontally or stacked below the video.

Horizontal layout  

Set orientation to horizontal to display the messages to the right of the video.

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: body-tertiary
    subtle: false
  orientation: horizontal
  icon_style: fa-lg
  video:
    provider: vimeo
    media_id: "55073825"
    autoplay: true
    color: black
  messages:
    - title: First Message
      icon: 1-circle
    - title: Second Message
      icon: 2-circle
    - title: Third Message
      icon: 3-circle

Stacked layout  

Set orientation to stacked to display the messages below the video.

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: body-tertiary
    subtle: false
  orientation: stacked
  icon_style: fa-lg
  video:
    provider: vimeo
    media_id: "55073825"
    autoplay: true
    color: black
  messages:
    - title: First Message
      icon: 1-circle
    - title: Second Message
      icon: 2-circle
    - title: Third Message
      icon: 3-circle

Arguments  

The content block supports the following arguments:

Name Type Required Default Comment
_bookshop_name string Alias for _bookshop_name.
Alias for _bookshop_name.
_ordinal int Zero-based position of the bookshop component within the page’s component hierarchy.
Zero-based position of the bookshop component within the page’s component hierarchy.
background background, string Background style of the section.
Background style of the section.
bg_class string Background class attributes of the element. It supports Bootstrap attributes to modify the background styling of the element.
Background class attributes of the element. It supports Bootstrap attributes to modify the background styling of the element.
border bool Flag to add a border to the element.
Flag to add a border to the element.
cols int 3 Number of grid columns.
Number of grid columns.
cover bool Flag indicating if the element should be rendered fullscreen.
Flag indicating if the element should be rendered fullscreen.
fluid bool true Flag to set the section container to fluid design, else the section is limited to xxl.
Flag to set the section container to fluid design, else the section is limited to xxl.
heading Heading Heading of the content block, including a preheading and content element.
Heading of the content block, including a preheading and content element.
icon_rounded bool Stack the icon in a round container.
Stack the icon in a round container.
icon_style string Icon style.
Icon style.
id string Unique identifier of the current element.
Unique identifier of the current element.
justify select start Justification of the child elements. Supported values: [start, end, center, between, around, evenly].
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].
Style of the link. Supported values: [button, link].
messages [] Messages Messages to include in the element. Each element is rendered as a card.
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].
Placement of the thumbnail or icon. Supported values: [stacked, horizontal, horizontal-sm, overlay, none].
overlay_mode select Overlay mode of the element, overrides the site’s general configuration. Supported values: [light, dark, none].
Overlay mode of the element, overrides the site’s general configuration. Supported values: [light, dark, none].
section_class string Section class attributes of the element. It supports Bootstrap attributes to modify the section styling of the element.
Section class attributes of the element. It supports Bootstrap attributes to modify the section styling of the element.
theme select Color theme to apply to the element. Supported values: [light, dark].
Color theme to apply to the element. Supported values: [light, dark].
video Video yes The video to embed.
The video to embed.
width int 8 Column width of the element. For embedded elements, the width is relative to the parent’s container.
Column width of the element. For embedded elements, the width is relative to the parent’s container.
wrapper string Class attribute of the element’s wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the fa-wrapper and fa-fluid attributes by default.
Class attribute of the element’s wrapper. It supports Bootstrap attributes to modify the styling of the element. Icons include the fa-wrapper and fa-fluid attributes by default.

Background Type  

Name Type Required Default Comment
backdrop string Background image with a mask to improve contrast.
Background image with a mask to improve contrast.
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
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.
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].
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].
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.
Section content displayed below the title.
preheading string Preheading of the section heading.
Preheading of the section heading.
size int 4 Display size of the headline.
Display size of the headline.
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.
Title of the element. If the element references a (local) page, the title overrides the referenced page’s title.
width int Column width of the element. For embedded elements, the width is relative to the parent’s container.
Column width of the element. For embedded elements, the width is relative to the parent’s container.

Messages Type  

Name Type Required Default Comment
content string, template.HTML Section content displayed below the title.
Section content displayed below the title.
icon string, uint64 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.
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.
Assistive label of the element.
link string, template.URL, url Local page reference or external hyperlink address.
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.
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.
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.
Flag indicating the animation or video should start playing immediately when loaded, if supported by the browser. Any audio will be muted.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
id string Unique identifier of the current element.
Unique identifier of the current element.
media-id string ID of the asset to be embedded.
ID of the asset to be embedded.
provider string youtube Name of the video provider. It should match one of the registered providers in the site’s parameters under videos.
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.
Optional query parameters to append to video asset’s url. The query string is prepended with a ? symbol. Only applicable to Cloudinary.
• docs: update block args to snake_case and bump exampleSite dependency (ce93027)
On this page
Follow Me

I work on everything coding and tweet developer memes