LandingSection

The heading and spacing wrapper for every band of a landing page, with an optional eyebrow, title, description and top divider.

import { LandingSection } from '@lobehub/ui/awesome';

NPM Source Edit

Landing

Default

Wrap BentoGrid, CodeShowcase, FeatureGrid or your own content in a LandingSection so every band shares the same rhythm. The heading sits on the left with a tag above it, and actions or extra sit on the right. Set align="center" to stack everything centered.

Loading preview

APIs

LandingSection properties

actions

LandingAction[]

Small buttons on the right side of the header, e.g. "Browse components".

align

'center' | 'start'

`start` puts the heading on the left and `actions`/`extra` on the right; `center` stacks everything centered.

Defaults to "start".

children

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

description

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

divider

boolean

Draws a hairline above the section to separate it from the previous one.

Defaults to true.

extra

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Custom content on the right side of the header, after `actions`.

eyebrow

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Small tag above the title, e.g. "Components".

eyebrowColor

string

Tag color: a preset such as `purple`, `blue`, `cyan`, `green`, `orange` or `magenta`, or any CSS color.

Defaults to "blue".

id

string

Used for the heading id so the section is labelled for assistive technology.

onNavigate

LandingNavigate

Client-side navigation for internal non-primary actions (rendered as BottomGradientButton).

renderLink

LandingLinkRender

title

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Also accepts all native HTML and ARIA attributes.