Maskowlabs Logo Maskowlabs

Sections

<x-section> is a layout block for settings-style pages. It renders a header with a title and a description, an optional toolbar row with actions on the left and search or filters on the right, and your content below it: a card, a table, a form or anything else.

Stack as many sections as a page needs. Each one reads as a clearly titled block, and they work best together with a compact page header on top.

Basic Usage

Pass a title and an optional description. Everything inside the component becomes the section content. A card placed directly in the content gets a uniform body padding of 1.25rem, so its text lines up with the section header above it.

Billing address

Shown on every invoice we send you.

  • Company
    Acme GmbH
  • Address
    Hauptstraße 1, 90402 Nürnberg
  • VAT ID
    DE123456789 
 1<x-section title="Billing address" description="Shown on every invoice we send you.">
 2    <x-card>
 3        <x-card.body>
 4            <x-list>
 5                <x-list.item>
 6                    <x-list.label>Company</x-list.label>
 7                    <x-list.value>Acme GmbH</x-list.value>
 8                </x-list.item>
 9                <x-list.item>
10                    <x-list.label>Address</x-list.label>
11                    <x-list.value>Hauptstraße 1, 90402 Nürnberg</x-list.value>
12                </x-list.item>
13                <x-list.item>
14                    <x-list.label>VAT ID</x-list.label>
15                    <x-list.value>DE123456789</x-list.value>
16                </x-list.item>
17            </x-list>
18        </x-card.body>
19    </x-card>
20</x-section>

Toolbar

The toolbar slot adds a row below the header for the primary actions of the section. toolbar-end fills the right side of that row, for example with a search field, and stays right-aligned even without a toolbar slot. On small screens both halves take the full width.

Invoices

Download or forward the invoices of the last twelve months.

  • INV-0003 · 12 Sep 2026
    6,000.00 €
  • INV-0002 · 12 Sep 2025
    6,000.00 € 
 1<x-section title="Invoices" description="Download or forward the invoices of the last twelve months.">
 2    <x-slot:toolbar> 
 3        <x-button type="white" size="sm" icon="arrow-down-tray--micro">Export all</x-button>
 4    </x-slot:toolbar> 
 5    <x-slot:toolbar-end> 
 6        <x-input placeholder="Search invoices">
 7            <x-slot:prepend>
 8                <x-icon name="magnifying-glass--micro" />
 9            </x-slot:prepend>
10        </x-input>
11    </x-slot:toolbar-end> 
12 
13    <x-card>
14        <x-card.body>
15            <x-list>
16                <x-list.item>
17                    <x-list.label>INV-0003 · 12 Sep 2026</x-list.label>
18                    <x-list.value>6,000.00 &euro;</x-list.value>
19                </x-list.item>
20                <x-list.item>
21                    <x-list.label>INV-0002 · 12 Sep 2025</x-list.label>
22                    <x-list.value>6,000.00 &euro;</x-list.value>
23                </x-list.item>
24            </x-list>
25        </x-card.body>
26    </x-card>
27</x-section>

Header Actions

Buttons that belong to the whole section, such as a save button, go into the actions slot. They sit on the right of the header and move below the title on small screens.

Notifications

Choose which e-mails you want to receive.

New components and releases.
Only when your account is affected. 
 1<x-section title="Notifications" description="Choose which e-mails you want to receive.">
 2    <x-slot:actions> 
 3        <x-button type="primary" size="sm">Save changes</x-button>
 4    </x-slot:actions> 
 5 
 6    <x-card>
 7        <x-card.body>
 8            <div class="d-flex flex-column gap-3">
 9                <x-checkbox id="section-news" label="Product updates" description="New components and releases." />
10                <x-checkbox id="section-security" label="Security notices" description="Only when your account is affected." />
11            </div>
12        </x-card.body>
13    </x-card>
14</x-section>

Banner

The banner slot renders a strip between the header and the toolbar. It is the place for notices that concern the whole section.

API keys

Keys that can read your licences through the API.

  • Deployment
    expires 23 Oct 2026
  • Staging
    never expires 
 1<x-section title="API keys" description="Keys that can read your licences through the API.">
 2    <x-slot:banner> 
 3        <x-alert type="warning" icon="exclamation-triangle--outline" title="One of your keys expires in 7 days." />
 4    </x-slot:banner> 
 5    <x-slot:toolbar>
 6        <x-button type="white" size="sm" icon="plus--micro">Create key</x-button>
 7    </x-slot:toolbar>
 8 
 9    <x-card>
10        <x-card.body>
11            <x-list>
12                <x-list.item>
13                    <x-list.label>Deployment</x-list.label>
14                    <x-list.value>expires 23 Oct 2026</x-list.value>
15                </x-list.item>
16                <x-list.item>
17                    <x-list.label>Staging</x-list.label>
18                    <x-list.value>never expires</x-list.value>
19                </x-list.item>
20            </x-list>
21        </x-card.body>
22    </x-card>
23</x-section>

Footer

The footer slot renders below the content, right-aligned and without card chrome, which suits the buttons of a form.

Profile

How the other members of your team see you.

 1<x-section title="Profile" description="How the other members of your team see you.">
 2    <x-card>
 3        <x-card.body>
 4            <div class="d-flex flex-column gap-3">
 5                <x-input label="Name" placeholder="Jane Doe" />
 6                <x-input label="Job title" placeholder="Lead developer" />
 7            </div>
 8        </x-card.body>
 9    </x-card>
10 
11    <x-slot:footer> 
12        <x-button type="transparent">Cancel</x-button>
13        <x-button type="primary">Save</x-button>
14    </x-slot:footer> 
15</x-section>

Stacking Sections

Sections that follow each other are separated by spacing alone: 2.5rem of margin plus another 2.5rem of padding. Pass :divider="false" to drop the padding for one section, which pulls it closer to the one before.

General

The name your team sees in every e-mail.

Region

Where your data is stored.

Danger zone

This cannot be undone.

 1<div class="w-100">
 2    <x-section title="General" description="The name your team sees in every e-mail.">
 3        <x-card>
 4            <x-card.body>
 5                <x-input label="Workspace name" placeholder="Acme GmbH" />
 6            </x-card.body>
 7        </x-card>
 8    </x-section>
 9 
10    <x-section title="Region" description="Where your data is stored.">
11        <x-card>
12            <x-card.body>
13                <x-input label="Data region" placeholder="Frankfurt (eu-central-1)" />
14            </x-card.body>
15        </x-card>
16    </x-section>
17 
18    <x-section title="Danger zone" description="This cannot be undone." :divider="false"> 
19        <x-card>
20            <x-card.body>
21                <div>
22                    <x-button type="danger" size="sm" icon="trash--micro">Delete workspace</x-button>
23                </div>
24            </x-card.body>
25        </x-card>
26    </x-section>
27</div>

Title and Description as Slots

Use <x-slot:title> and <x-slot:description> when you need markup, like a badge next to the title. Attributes on these slots are merged onto the heading and the paragraph.

Licences
3 active

The keys your team uses for composer install.

  • Business
    valid until 12 Sep 2027 
 1<x-section>
 2    <x-slot:title> 
 3        Licences <x-badge type="green">3 active</x-badge>
 4    </x-slot:title> 
 5    <x-slot:description> 
 6        The keys your team uses for <samp>composer install</samp>.
 7    </x-slot:description> 
 8 
 9    <x-card>
10        <x-card.body>
11            <x-list>
12                <x-list.item>
13                    <x-list.label>Business</x-list.label>
14                    <x-list.value>valid until 12 Sep 2027</x-list.value>
15                </x-list.item>
16            </x-list>
17        </x-card.body>
18    </x-card>
19</x-section>

Component Attributes

Every other attribute, such as class, id or wire:key, is merged onto the outer <section class="section">.

Attribute / Slot Type Default Description
title String or slot none The section heading, rendered as an <h3>.
description String or slot none Muted text below the heading.
divider Boolean true Keeps the extra padding towards the previous section. :divider="false" removes it.
actions Slot none Buttons on the right of the header.
banner Slot none A strip between the header and the toolbar, for notices.
toolbar Slot none The left side of the toolbar row, for primary actions.
toolbar-end Slot none The right side of the toolbar row, for search fields or filters.
footer Slot none Right-aligned content below the section content, without card chrome.

The header, the toolbar and the content are only rendered when they have something to show, so a section without a title is just its content with the section spacing.