The Text and Video Panel component allows you to create a side-by-side layout with a video and a text area. This component lets you adjust the position of the video (left or right), align the heading, and control the width of both sections. The text area can include a heading, body text, and a link. The design options ensure the component can adapt to different page layouts, making it simple to present text and video together in a visually balanced way. This component is useful when presenting supporting text alongside a video for better context.
Example
This is a Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Content Options
This is a Heading
This is some body text.
Lorem ipsum odor amet, consectetuer adipiscing elit. Gravida sagittis erat amet pretium suscipit tincidunt. Porttitor purus pharetra, scelerisque phasellus parturient consectetur quam augue.
Layout and Styling Options
Note: Avoid using this component on dark backgrounds, as it can cause issues with text colors.
Center header text
Center header text: Off
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Center header text: On
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Place video on the right
Place video on the right: Off
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Place video on the right: On
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Column Widths
Video Width: 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Video Width: 6 (default)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Video Width: 8
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Bottom Margin
Bottom Margin: None
Bottom Margin: X-Small
Bottom Margin: Small
Bottom Margin: Medium
Bottom Margin: Large
Bottom Margin: X-Large
the end
Top Margin
Top Margin: None
Top Margin: X-Small
Top Margin: Small
Top Margin: Medium
Top Margin: Large
Top Margin: X-Large
the end
Usage
Do
- Ensure the video content is relevant and complements the text information.
- Use a concise and descriptive heading that captures the main message of the content.
- Keep the text area brief and to the point to avoid overwhelming viewers with too much information.
- Check that the video and text balance visually when adjusting widths to maintain an aesthetically pleasing layout.
- Consider placing the video on the left if it’s the primary focus, and on the right if it’s supplementary.
- Use a text link for actionable items, such as directing users to more detailed information or related resources.
- Adjust the spacing around the component to fit well within the overall page design.
- Use the text area to provide context or key takeaways that the video might not explicitly cover.
Don't
- Avoid using long paragraphs in the text area, as it can make the component look cluttered.
- Do not use low-quality or unrelated video content that doesn’t add value to the message.
- Avoid placing complex or detailed data in the text area—use simpler content that complements the video.
- Avoid setting the video and text widths to extremes, like one being much wider than the other, unless it’s necessary for emphasis.
- Do not include too many links in the text area, as this can confuse users and dilute the call-to-action.
- Avoid using the component in narrow spaces where the video and text can become cramped and hard to read.