Card

Description

The Card component is a flexible and visually appealing element designed to showcase media content along with accompanying text. It features a background image, a main media asset (which can be either an image or a video), and a content area for text or other components. The card has a gradient background and a subtle border effect, creating depth and visual interest. It also implements a scroll-based animation for the background image.

Installation

sabaccui add card

Usage

Here's an example of how to use the Card component in a Storyblok block:

Preview

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Schema

• media: asset
  • Accepts videos and images
  • Required field
  • Used as the main visual element of the card
• background: asset
  • Accepts images and videos
  • Optional field
  • Used as a background element with a parallax-like scroll effect
• content: bloks
  • Restricted to components with specific tags: text, molecule (e.g., SimpleText)
  • Used to add text content or other components within the card

Related Components

No related components specified in the provided information

Notes

1. The component uses the useScrollProgress composable to create a scroll-based animation effect on the background image.
2. The main media asset (image or video) is displayed with a maximum width and height of 70% of its container.
3. The content area has a maximum width of 96 rem and is centered within the card.

Best Practices:

• Choose background images that complement the main media asset without overshadowing it.
• Keep the content concise to maintain the card's visual appeal and readability.
• When using video as the main media, ensure it's optimized for web performance.
• Consider the accessibility of your content, especially when using images or videos with text overlays.