Feature Grid
Description
The Feature Grid component is an organism-level element designed to display a collection of feature items in a responsive grid layout. It offers customizable options for column count, gap size, and visual effects, making it versatile for various content presentations. The component consists of a main grid container and individual Feature GridItem subcomponents, each representing a feature with an image, header, and expandable details.
Installation
bash
sabaccui add featureGrid
Usage
Here are examples of how to use the Feature Grid component in a Storyblok block:
Preview
Feature 1
Feature 2
Feature 3
Feature 4
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
features | bloks | An array of feature components to be displayed in the grid. Restricted to the "feature" component type. | - |
cols | option | Determines the number of columns in the grid layout. Options: "1-2-2-2" (2 columns), "1-2-3-3" (3 columns), "1-2-4-4" (4 columns). | "1-2-3-3" |
gap | option | Sets the gap size between grid items. Options: "gap-4", "gap-6", "gap-8", "gap-16", "gap-32", "gap-48". | "gap-6" |
glow | number | Intensity of the glow effect applied to feature items. Range: 0-100. | 0 |
aspectRatio | option | Aspect ratio of the feature items. Currently only supports "1x1". | "1x1" |
Notes
- The Feature Grid component uses a responsive design, adjusting the number of columns based on screen size and the selected
colsoption. - The
gloweffect is applied to each feature item, creating a subtle background glow based on the item's image. - Each feature item (FeatureGridItem) is interactive, allowing users to expand and collapse the details section.
Best Practices:
- Use consistent image sizes and aspect ratios for all feature items to maintain a uniform grid appearance.
- Consider the amount of text in the details section to ensure a good balance between visual appeal and information density.
- Adjust the
glowintensity based on the overall design of your page to create a cohesive visual experience. - Test the component across different screen sizes to ensure optimal layout and readability of content.