Create a responsive themed page section with controlled spacing, width, borders, and surface treatment.
Change any prop and inspect the server-rendered component immediately.
<Section>
<div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div>
</Section>Compare configurations and resize the browser to check responsive behavior.
Create predictable vertical rhythm around a page section.
<Section
id="standard-section">
<div class="showcase-content-block">Standard section content</div>
</Section>Reduce spacing for dense application screens and grouped dashboard content.
<Section
id="compact-section"
size="sm"
variant="soft"
spacing="sm"
maxWidth="wide">
<div class="showcase-content-block">Compact dashboard content</div>
</Section>Use a full-width background while retaining a structured content area.
<Section
id="full-section"
size="lg"
variant="raised"
maxWidth="full"
fullWidth="true"
borderTop="true"
borderBottom="true">
<div class="showcase-content-block">Full-width public page section</div>
</Section>All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
id | string | "" | No |
size | string | "default" | No |
color | string | "primary" | No |
variant | string | "default" | No |
spacing | string | "lg" | No |
maxWidth | string | "xl" | No |
fullWidth | boolean | false | No |
borderTop | boolean | false | No |
borderBottom | boolean | false | No |
class | string | "" | No |