Hero
Description
The Hero component is a full-width, visually striking section typically used at the top of a page. It combines a background image or video with customizable content, offering flexible alignment and padding options. The component includes parallax-like effects and responsive design, creating an engaging and immersive user experience.
Installation
bash
sabaccui add hero
Usage
Preview
Welcome to Our Site
Discover amazing content and experience
Schema
| Field Name | Type | Description | Default |
|---|---|---|---|
content | bloks | Nested components for the hero content | - |
image | asset | Background image or video (required) | - |
align | option | Horizontal alignment of content (left, center, right) | left |
valign | option | Vertical alignment of content (start, center, end) | end |
padding | option | Padding size (lg, xl) | lg |
Notes
- The component uses the
useElementBoundingandusePreferredReducedMotioncomposables from the@vueuse/corelibrary for scroll-based effects and accessibility. - A parallax-like effect is applied to the background image, which scales slightly as the user scrolls.
- The component supports both image and video backgrounds, automatically detecting the file type.
- Responsive image sources are provided for different screen sizes.
- An overlay with adjustable opacity is applied to enhance content visibility.
- The component is designed to be full-width and takes up the full height of the viewport.
Best Practices:
- Choose high-quality, visually appealing images or videos that complement your content.
- Ensure sufficient contrast between the background and text for readability.
- Keep the content concise and impactful to maintain the user's attention.
- Consider using a video background sparingly, as it can impact page load times and may not be suitable for all users or devices.
- Test the component across various devices and screen sizes to ensure a consistent experience.