/

<VideoFeature> Component

VideoFeature highlights a provided video, showcasing related information about its content and (optionally) its creator.

Share
Code Editor


    <VideoFeature

      heading="Display copy, tellus massa in lementum nulla donec nec"

      description="Body copy, pharetra pellentesque sed elementum risus accumsan et. Tristique tortor, morbi vivamus nibh mollis. Ultrices aliquet sit nibh consequat quam vestibulum ipsum turpis. Sed quam vitae porttitor egestas. Luctus nibh ut posuere ultrices est arcu at aliquam in. Sem aenean laoreet molestie non."

      author={{

        name: 'Firstname Lastname',

        role: 'Title, Company',

        avatar:

          'https://www.datocms-assets.com/19447/1648680074-screenshot-2022-03-31-at-00-40-47.png',

      }}

      video={{

        solution: 'applications',

        url: 'https://youtu.be/nJ0aI6sEDRo',

        description:

          'Description - 2 lines with character limit of 90. Tempus in egestas sagittis nulla feugiat',

      }}

    />

Examples

Dark appearance

Display copy, tellus massa in lementum nulla donec nec

Body copy, pharetra pellentesque sed elementum risus accumsan et. Tristique tortor, morbi vivamus nibh mollis. Ultrices aliquet sit nibh consequat quam vestibulum ipsum turpis. Sed quam vitae porttitor egestas. Luctus nibh ut posuere ultrices est arcu at aliquam in. Sem aenean laoreet molestie non.

Firstname Lastname avatar

Firstname Lastname

Title, Company

Description - 2 lines with character limit of 90. Tempus in egestas sagittis nulla feugiat

Content positioned on the right

Display copy, tellus massa in lementum nulla donec nec

Body copy, pharetra pellentesque sed elementum risus accumsan et. Tristique tortor, morbi vivamus nibh mollis. Ultrices aliquet sit nibh consequat quam vestibulum ipsum turpis. Sed quam vitae porttitor egestas. Luctus nibh ut posuere ultrices est arcu at aliquam in. Sem aenean laoreet molestie non.

Firstname Lastname avatar

Firstname Lastname

Title, Company

Description - 2 lines with character limit of 90. Tempus in egestas sagittis nulla feugiat

Without <AuthorByline />

Display copy, tellus massa in lementum nulla donec nec

Body copy, pharetra pellentesque sed elementum risus accumsan et. Tristique tortor, morbi vivamus nibh mollis. Ultrices aliquet sit nibh consequat quam vestibulum ipsum turpis. Sed quam vitae porttitor egestas. Luctus nibh ut posuere ultrices est arcu at aliquam in. Sem aenean laoreet molestie non.

Description - 2 lines with character limit of 90. Tempus in egestas sagittis nulla feugiat

Props

NameDescription
appearance
string
Display the component on light or dark backgrounds.
Options: "light", "dark"
contentPosition
string
Position for content to appear on.
heading*
string
Text displayed within the heading element.
description*
string|React.ReactNode
Text following the heading element.
author
object
Details about the video author.
Object contains nested props, see below:
author.avatar
string
Source url of the image
author.name*
string
Renders as the first line of the byline
author.role*
string
Renders as the second line of the byline
video
object
Object contains nested props, see below:
video.solution
string
Solution theme to apply to the gradient.
Options: "infrastructure", "security", "networking", "applications"
video.url*
string
URL for the featured video.
video.description
string
Text describing the video.