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

Features

Beautiful UI Components

Create stunning user interfaces with our comprehensive suite of components.

<template>
  <MPageSection
    title="Beautiful UI Components"
    description="Create stunning user interfaces with our comprehensive suite of components."
    headline="Features"
  />
</template>

With Icon

Quick Setup

Get started in minutes with our easy-to-use installation process.

<template>
  <MPageSection
    title="Quick Setup"
    icon="i-lucide-rocket"
    description="Get started in minutes with our easy-to-use installation process."
  />
</template>

Horizontal Layout with Image

Features

Build modern web applications with our powerful component library.

Beautiful Vue UI Components

<template>
  <MPageSection
    headline="Features"
    description="Build modern web applications with our powerful component library."
    orientation="horizontal"
    reverse
  >
    <template #title>
      Beautiful Vue UI Components
    </template>
    <img
      src="https://picsum.photos/400/300"
      alt="UI Components"
      class="rounded-lg"
    />
  </MPageSection>
</template>

Vertical Layout

Vertical Section

This section is arranged vertically with centered content.

Content Block

<template>
  <MPageSection
    title="Vertical Section"
    description="This section is arranged vertically with centered content."
    orientation="vertical"
  >
    <div class="bg-gray-100 p-8 rounded-lg w-full max-w-md mx-auto">
      Content Block
    </div>
  </MPageSection>
</template>

Custom Alignment

Left Aligned

This section's content is aligned to the left.

Content aligned to the left

<template>
  <MPageSection
    title="Left Aligned"
    description="This section's content is aligned to the left."
    align="left"
  >
    <div class="bg-gray-100 p-4 rounded">
      Content aligned to the left
    </div>
  </MPageSection>
</template>

Props

string

The HTML element to render as.

headline

string

Small text displayed above the title.

icon

string

Icon name to display in the leading area.

title

string

Main title of the section.

description

string

Descriptive text below the title.

align

'left' | 'center' | 'right'

Text alignment within the section.

orientation

'horizontal' | 'vertical'

Layout orientation of the section.

reverse

boolean

Reverse the order of content in horizontal layout.

class

string

Additional classes to apply to the section.

Slots

default

any

Content to be displayed alongside the text content.

title

any

Custom title content.

description

any

Custom description content.

headline

any

Custom headline content.

leading

any

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

Page Marquee

A component for creating smooth, animated scrolling content in horizontal or vertical directions.

Toasts

A component for displaying temporary notifications and feedback messages.