Skip to main content
WireKit
Copy for LLM

Section

A full-width page section with vertical padding, background color, and optional divider borders. Designed to wrap a Container for structured page layouts.

Basic Usage

Default section with container
Content inside a section 
<x-wirekit::section>
    <x-wirekit::container>
        <x-wirekit::card><x-wirekit::card.body>Content inside a section</x-wirekit::card.body></x-wirekit::card>
    </x-wirekit::container>
</x-wirekit::section>

Background Variants

Muted background
Muted section background 
<x-wirekit::section background="muted">
    <x-wirekit::container>
        <x-wirekit::card><x-wirekit::card.body>Muted section background</x-wirekit::card.body></x-wirekit::card>
    </x-wirekit::container>
</x-wirekit::section>
Subtle background
Subtle section background 
<x-wirekit::section background="subtle">
    <x-wirekit::container>
        <x-wirekit::card><x-wirekit::card.body>Subtle section background</x-wirekit::card.body></x-wirekit::card>
    </x-wirekit::container>
</x-wirekit::section>
Inverse background
Inverse section with inverted text 
<x-wirekit::section background="inverse">
    <x-wirekit::container>
        <x-wirekit::card><x-wirekit::card.body>Inverse section with inverted text</x-wirekit::card.body></x-wirekit::card>
    </x-wirekit::container>
</x-wirekit::section>

Dividers

Add horizontal borders to visually separate sections.

Top divider
Section with top border 
<x-wirekit::section divider="top" padding="lg">
    <x-wirekit::container>
        <x-wirekit::card><x-wirekit::card.body>Section with top border</x-wirekit::card.body></x-wirekit::card>
    </x-wirekit::container>
</x-wirekit::section>
Both dividers
Section with top and bottom borders 
<x-wirekit::section divider="both" padding="lg">
    <x-wirekit::container>
        <x-wirekit::card><x-wirekit::card.body>Section with top and bottom borders</x-wirekit::card.body></x-wirekit::card>
    </x-wirekit::container>
</x-wirekit::section>

Padding Sizes

Small padding
Compact section 
<x-wirekit::section padding="sm" background="muted">
    <x-wirekit::container>
        <x-wirekit::card><x-wirekit::card.body>Compact section</x-wirekit::card.body></x-wirekit::card>
    </x-wirekit::container>
</x-wirekit::section>
2XL padding
Spacious section 
<x-wirekit::section padding="2xl" background="muted">
    <x-wirekit::container>
        <x-wirekit::card><x-wirekit::card.body>Spacious section</x-wirekit::card.body></x-wirekit::card>
    </x-wirekit::container>
</x-wirekit::section>

Props

Prop Type Default Description
padding string 'xl' Vertical padding: none, sm, md, lg, xl, 2xl
background string 'default' Background: default, muted, subtle, inverse, accent
divider string 'none' Border dividers: none, top, bottom, both
as string 'section' HTML element to render
scope string|null null Scoped personalization name

Keyboard Interaction

This component is a layout wrapper. Keyboard interaction is delegated to its children.

Design Tokens

Token Used for
--space-wk-sm through --space-wk-2xl Vertical padding
--color-wk-bg-muted Muted background
--color-wk-bg-subtle Subtle background
--color-wk-bg-inverse Inverse background
--color-wk-text-inverse Inverse text color
--color-wk-accent Accent background
--color-wk-border Divider border color

Was this page helpful?

Voting requires cookies or local storage. What we store