Text Container
Description
The Text Container component is a versatile container designed to hold and align text content. It allows for the inclusion of multiple content blocks and provides options for aligning the text left, center, or right. This component is ideal for creating structured text layouts with consistent alignment across various content types.
Installation
bash
sabaccui add textContainer
Usage
Here are examples of how to use the Text Container component with different alignments:
Left-aligned text (default):
Preview
PROFESSIONAL SOLUTIONS
Discover Our Services
Center-aligned text:
Preview
PROFESSIONAL SOLUTIONS
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Schema
| Field | Type | Description | Default |
|---|---|---|---|
content | bloks | An array of content blocks to be displayed within the container. | [] |
alignment | option | Specifies the text alignment within the container. Options are: 'left', 'center', 'right'. | 'left' |
Notes
- The component uses dynamic class binding to apply the correct alignment classes based on the selected alignment option.
- Content blocks within the Text Container are rendered using the
StoryblokComponent, allowing for flexible content composition. - The component supports Storyblok's live preview functionality with the
v-editabledirective.
Best practices:
- Use consistent alignment within a single Text Container for better readability.
- Consider the overall page layout when choosing alignment options to ensure a balanced design.
- Utilize the Text Container to group related text content and maintain consistent styling across sections.