Teaser

Description

The Teaser component is a flexible and visually appealing element designed to grab attention and provide a brief preview of content. It features a background media (image or video), logo, customizable text, and optional action buttons. The component supports parallax scrolling effects for the background media and includes accessibility considerations.

Installation

bash

sabaccui add teaser

Usage

Here are examples of how to use the Teaser component in various configurations:

Basic usage with an image background

Preview

Video background with glow effect and centered content

Preview

Experience the city like never before

Learn More

Schema

Field Name	Type	Description	Default Value
`background`	`asset`	The background media (image or video) for the teaser. Supports both images and videos.	None
`logo`	`asset`	The logo to be displayed on the teaser.	None
`text`	`markdown`	The main text content of the teaser. Supports Markdown formatting.	None
`actions`	`bloks`	An array of action buttons. Only allows `button` components.	None
`glow`	`number`	Adds a glow effect to the teaser. Specify the strength value.	None
`align`	`option`	Determines the alignment of the content. Options: `left`, `center`, `right`.	`left`

Button

Notes

The component uses the @vueuse/core library for scroll and reduced motion preference detection.
A parallax effect is applied to the background media for added visual interest.
Video backgrounds automatically play when in view and pause when out of view.
The component is keyboard accessible, allowing users to play/pause video backgrounds using the Enter or Space key.
An IntersectionObserver is used to manage video playback based on visibility.
The component supports various aspect ratios for the media container.

Best Practices:

Ensure that the background media (especially videos) is optimized for web performance.
Provide meaningful alt text for images and descriptions for videos to enhance accessibility.
Use the glow effect sparingly to avoid overwhelming the user interface.
Consider the align property to create visual variety and hierarchy in your layout.
When using video backgrounds, ensure that any critical information is also conveyed through text or other means for users who may have videos disabled.