Container Query
Adapt child layouts to the width of their container.
Preview
Import
import { ContainerQuery, Card, CardHeader, CardTitle, CardDescription } from "@sigil-ui/components";Usage
<ContainerQuery><div className="grid gap-[var(--s-space-12)] @sm:grid-cols-2"><Card><CardHeader><CardTitle>Flexible layout</CardTitle><CardDescription>These cards respond to their container width.</CardDescription></CardHeader></Card><Card><CardHeader><CardTitle>Shared tokens</CardTitle><CardDescription>Resize the page to stack them.</CardDescription></CardHeader></Card></div></ContainerQuery>Sub-components
This component includes the following parts:
<SplitPane><Dock><TopBar><BottomBar><MobileNav><SidebarNav><AppHeader><PageHeader><SectionHeader><ContentTabs><AnchorNav><TableOfContents><ScrollSpy><MasonryGrid><MediaCard><ResourceCard><FeatureCard><PricingCard><TestimonialCarousel>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-radius-full | Radius full |
--s-border | Border |
--s-overlay-surface | Overlay surface |
--s-surface | Surface |
--s-shadow-lg | Shadow lg |
--s-background | Background |
--s-card-radius | Card radius |
--s-text | Text |
--s-text-muted | Text muted |
--s-radius-sm | Radius sm |
--s-primary | Primary |