PageSection
A versatile section component for creating visually appealing content blocks with support for headlines, titles, descriptions, and flexible layouts.
Overview
The PageSection component is designed for creating structured content sections with rich formatting options. It supports headlines, titles, descriptions, icons, and flexible layouts in both horizontal and vertical orientations.
Usage
Basic Usage
With Icon
Horizontal Layout with Image
Beautiful Vue UI Components
Vertical Layout
Custom Alignment
Props
The HTML element to render as.
Small text displayed above the title.
Icon name to display in the leading area.
Main title of the section.
Descriptive text below the title.
Text alignment within the section.
Layout orientation of the section.
Reverse the order of content in horizontal layout.
Additional classes to apply to the section.
Slots
Content to be displayed alongside the text content.
Custom title content.
Custom description content.
Custom headline content.
Custom leading content (replaces icon).
Best Practices
- Content Structure:
- Use headlines to categorize content
- Keep titles concise and descriptive
- Use descriptions to provide additional context
- Choose appropriate icons that represent the content
- Layout Selection:
- Use horizontal layout for content with media
- Choose vertical layout for stacked content
- Consider content hierarchy when using reverse
- Alignment:
- Use center alignment for featured content
- Left align text-heavy content
- Maintain consistent alignment across related sections
- Responsive Design:
- Test both orientations on different screen sizes
- Ensure images scale appropriately
- Consider mobile-first content organization
- Use appropriate spacing for different devices