Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add section

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

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.

Basic Usage

Billing

How you pay and what you have been charged.

Section content
<x-aura::section title="Billing" description="How you pay and what you have been charged." spacing="sm">
    <div class="rounded border border-aura-surface-200 p-3 text-sm">Section content</div>
</x-aura::section>
<x-aura::section title="Billing" description="How you pay and what you have been charged.">
    <x-aura::table>…</x-aura::table>
</x-aura::section>

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.

Notes

Set level to match where the section sits. A page with one h1 should have h2 sections; a section nested inside another moves to h3. Skipping a level leaves a gap in the outline — aura:doctor --a11y reports it.

The id used by aria-labelledby is derived from the title, so it is stable across renders and safe to cache.