Content Over Image
Description
The Content Over Image component is an organism-level element designed to display content overlaid on a background image or video. It allows for flexible content placement and customizable image height, making it suitable for hero sections, featured content areas, or any part of a layout requiring visual impact with overlaid content.
Installation
bash
sabaccui add contentOverImage
Usage
Here's an example of how to use the Content Over Image component in a Storyblok block:
Preview
Welcome to Our Site
Discover amazing content and services
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
media | asset | The background image or video asset. Required. Accepts images and videos. | None |
content | bloks | An array of content blocks to be displayed over the background. Restricted to components with specific tags. | None |
imageHeight | number | The height of the background image in rem units. | 24 |
Related Components
None specified.
Notes
- The background image height is customizable through the
imageHeightprop, which is multiplied by 16 to convert rem to pixels. - A mask is applied to the background image to create a gradient effect from transparent to black.
- The content is positioned relative to the background, starting at 75% of the specified image height.
Best Practices:
- Choose high-quality, high-resolution images for the background to ensure good visual impact across different screen sizes.
- Be mindful of the contrast between the background image and the overlaid content to maintain readability.
- Use the
imageHeightproperty to adjust the component's vertical space based on the content requirements and design preferences. - Leverage the flexibility of the content blocks to create diverse layouts and presentations within the same component structure.