LandingSection

Introduce a section and arrange its content beside a clear heading at larger breakpoints.

LandingSection

View source · API reference

Heading and feature

The heading counts as a grid item. At lg, it shares the row with the feature card.

WORKFLOW

From source to interface

A focused way to build.

Own every piece

Keep source, state and styles understandable.

<LandingSection
  eyebrow="WORKFLOW"
  title="From source to interface"
  subtitle="A focused way to build."
  columnsLg="2"
  alignItems="center"
>
  <FeatureCard
    title="Own every piece"
    summary="Keep source, state and styles understandable."
    tone="accent"
    icon="lucide:check"
  />
</LandingSection>

Content without a heading

Omit the text props when the surrounding page already introduces the section.

Write content in MDX.
Add interactivity where it helps. 
<LandingSection variant="surface" tone="neutral">
  <Grid columns="1" columnsSm="2">
    <Panel variant="outline" bodyClass="p-3">Write content in MDX.</Panel>
    <Panel variant="outline" bodyClass="p-3">Add interactivity where it helps.</Panel>
  </Grid>
</LandingSection>

Behavior and accessibility

Use titleTag to fit the heading into the document. The base layout is always one column. Both columns and columnsLg configure the large-screen layout, with columnsLg taking precedence.

API reference

LandingSection contract

Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.

eyebrow

RefOrValue<string>
Default
not set

Short context above the heading, such as a category or release label.

title

RefOrValue<string>
Default
not set

Visible heading. Choose a short title that identifies the content or task.

subtitle

RefOrValue<string>
Default
not set

Supporting text beneath the title.

titleTag

RefOrValue<LandingTitleTag>
Default
h2

Heading element. Accepts h1–h6, p, div or span; invalid values fall back to h2. Match the surrounding document hierarchy.

tone

RefOrValue<SemanticTone>
Default
inherited

Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.

variant

RefOrValue<ComponentVariant>
Default
none

Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.

variantMode

RefOrValue<ComponentVariantMode>
Default
stateless

Use stateless for content surfaces; stateful enables the treatment’s hover, focus and active styles. It does not add interaction handlers.

columns

RefOrValue<number | string>
Default
not set

Fallback large-breakpoint column definition. Base columns remain 1.

columnsLg

RefOrValue<number | string>
Default
columns, then 1

Large-breakpoint column definition. Includes the optional SectionHeader as a grid item.

alignItems

RefOrValue<GridAlignItems>
Default
start

Grid alignment: stretch, start, center or end.

Composition

Default slot: section grid items after the optional header. Register defineLandingSectionComponent plus Panel, Grid and SectionHeader.