Section
Description
The Section component is a flexible container designed to group content with customizable appearance and reveal effects. It allows for easy organization of page content with options for background color, padding, margin control, and animated reveal effects. This component is ideal for creating visually distinct areas within a page layout.
Installation
bash
sabaccui add section
Usage
Here are examples of how to use the Section component with different configurations:
Basic usage with default theme:
Preview
This is a basic section with default styling.
Section with custom theme and reveal effect
Preview
This is a section with primary theme and large padding.
Section with margin control and shadow
Preview
This dark section has extra-large padding and removed top and bottom margins.
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
content | bloks | The content to be displayed within the section. Allows any type of component. | - |
theme | option | The background theme of the section. Options: Primary, Secondary, White, Black, Dark, Light, Dark gradient | dark |
padding | option | The padding size of the section. Options: Small (sm), Medium (md), Large (lg), X-Large (xl) | md |
removeMargin | section | Controls margin removal for top and bottom. | - |
top | boolean | Removes top margin when set to true. | false |
bottom | boolean | Removes bottom margin when set to true. | false |
shadow | boolean | Adds a shadow effect to the section when set to true. | false |
reveal | option | Sets the reveal animation effect. Options: Snug, Light | - |
Notes
- The component uses Vue 3 composition API with
<script setup>. - It integrates with Storyblok's editable directive for in-editor content management.
- The component implements responsive design principles, adjusting its appearance based on screen size.
- Reveal effects are implemented using scroll-based animations, with considerations for reduced motion preferences.
Best Practices:
- Use the
themeoption to maintain consistent color schemes throughout your content. - Leverage the
revealoption for engaging scroll animations, but use sparingly to avoid overwhelming the user. - Utilize the
removeMarginandshadowoptions to create visually distinct sections when needed. - Consider accessibility by ensuring sufficient color contrast when selecting themes.
- When using reveal effects, always provide a fallback for users with reduced motion settings enabled.