Laravel Section Component
Free · MITA semantic page section with vertical rhythm and an optional accessible name.
A Section built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default and dark-mode ready. Aura's solid-background and border colours are
contrast-tested against WCAG 2.1 AA/UI in CI, in both themes —
see what's covered.
Drop it in with a single Blade tag:
<x-aura::section>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::section title="Billing" description="How you pay and what you have been charged.">
<x-aura::table>…</x-aura::table>
</x-aura::section>See the full API, props and live examples in the Section documentation.
Overview
<x-aura::section> renders a real <section> with consistent vertical padding and, when you give it a title, an accessible name.
That last part matters more than it looks: a <section> becomes a landmark — something a screen-reader user can jump between — only if it has a name. An unnamed one is just a box.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title |
string|null |
null |
Heading, and the accessible name of the section. |
description |
string|null |
null |
Supporting line under the heading. |
level |
int |
2 |
Heading level, so the document outline stays in order. |
spacing |
string |
'md' |
Vertical padding: none, sm, md, lg, xl. |
See more examples and every variant in the Section documentation.