Turbine UI - Laravel and Tailwind CSS Section Component

Alert Avatar Badge Burger Button Button Group Card Code Container Dropdown F A Q Grid Heading Input Input Group Label Link List Group Media Menu Modal Nav Link Navbar Progress Section Select Sidebar Stat Table Text Textarea Theme Switcher Toast Toggle

Section

Create consistent, responsive page regions with reusable section wrappers.

x-t-section

Preview and Examples

Default Section

Use sections to break content into readable blocks.

Large Light Section

Larger spacing and a subtle variant for key areas.

<x-t-section class="p-4 border border-gray-200 rounded-md">
    <x-t-heading level="3">Default Section</x-t-heading>
    <x-t-text class="mb-0">Use sections to break content into readable blocks.</x-t-text>
</x-t-section>
 
<x-t-section size="lg" variant="light" class="p-6 rounded-md">
    <x-t-heading level="3">Large Light Section</x-t-heading>
    <x-t-text class="mb-0">Larger spacing and a subtle variant for key areas.</x-t-text>
</x-t-section>

Attributes

Name	Type	Options	Description
full	boolean	true false	Makes full width
gradient	boolean	true false	Adds a gradient
size	string	xs sm md lg xl 2xl	Controls component scale
variant	string	default brand primary secondary success warning danger light dark	A variant is like a colour palette