Skip to main content
The Section Heading component is used to introduce sections within a page. It displays a title with an optional description, providing context for the content that follows.

​
Preview

General InformationBasic details about the product including name, description, and pricing.

​
Usage

<x-shopper::section-heading
    title="General Information"
    description="Basic details about the product including name, description, and pricing."
/>

​
Props

​
title
string
required
The section title text.
​
description
string
default:"null"
Optional description text displayed below the title.

​
Examples

​
Title Only

Pricing
<x-shopper::section-heading title="Pricing" />

​
With Description

InventoryManage stock levels, SKU, and warehouse locations.
<x-shopper::section-heading
    title="Inventory"
    description="Manage stock levels, SKU, and warehouse locations."
/>

​
Inside a Card

The Section Heading is automatically used by the Card component when you pass a title prop:
MediaUpload images and videos for this product.
Drop files here
<x-shopper::card
    title="Media"
    description="Upload images and videos for this product."
>
    <div class="...">
        <!-- File upload zone -->
    </div>
</x-shopper::card>

​
Standalone Usage

You can also use the section heading independently for custom layouts: 
<div class="space-y-6">
    <x-shopper::section-heading
        title="Customer Details"
        description="Personal information and contact details."
    />

    <div class="grid grid-cols-2 gap-4">
        <!-- Form fields -->
    </div>

    <x-shopper::section-heading
        title="Shipping Address"
        description="Where orders will be delivered."
    />

    <div class="grid grid-cols-2 gap-4">
        <!-- Address fields -->
    </div>
</div>

​
Blade Component Source

The Section Heading component is located at packages/admin/resources/views/components/section-heading.blade.php: 
@props([
    'title',
    'description' => null,
])

<div {{ $attributes }}>
    <x-filament::section.heading class="font-heading font-semibold text-gray-950 dark:text-white">
        {{ $title }}
    </x-filament::section.heading>

    @if ($description)
        <x-filament::section.description class="mt-1 text-sm text-gray-500 dark:text-gray-400 max-w-2xl">
            {{ $description }}
        </x-filament::section.description>
    @endif
</div>