Parallax Cards
Description
The Parallax Cards component is designed to create a visually appealing section with a series of cards that have a parallax effect. It allows for flexible alignment options, making it suitable for various layout designs. This component is particularly useful for showcasing content in an engaging, scrollable format.
Installation
bash
sabaccui add parallaxCards
Usage
Here are examples of how to use the Parallax Cards component in a Storyblok block:
Preview
Card 1
This is the content for Card 1
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
cards | bloks | An array of card components to be displayed. Only allows card components. | - |
align | option | Determines the alignment of the cards. Options: left, right, alternate-l, alternate-r | left |
Related Components
Notes
- The component uses a
ParallaxCardsubcomponent to render individual cards. - The
alignfunction determines the alignment of each card based on the selected alignment option and the card's index. - Cards are rendered with a vertical spacing of 32 units between them.
Best Practices:
- Use a consistent number of cards for each alignment option to maintain visual balance.
- Ensure that the content within each card is concise and visually appealing to maximize the impact of the parallax effect.
- Consider the overall page layout when choosing the alignment option to ensure it complements other page elements.
- Test the component on various screen sizes to ensure the parallax effect and alignment work well across devices.