Section
A page band with an eyebrow, an h2 and a lede.
Your daily practice, in one place.
Reflections worth sitting with.
Essays, dialogues and letters on the Faith.
Athic isn’t live yet.
Leave your email and we’ll tell you the moment it launches on iOS and Android.
Not an official Church product.
Athic is an independent project.
Tight: 32px
Loose: 88px
A narrow column
Capped at 640px.
In context
What we hold, and where.
Athic isn’t live yet.
Leave your email and we’ll let you know the moment it launches.
Props
| Prop | Type | Required | Default |
|---|---|---|---|
tone | "default" | "tint" | "panel" | "dark" | undefined | No | default |
width | "sm" | "md" | "lg" | "full" | undefined | No | lg |
spacing | "default" | "tight" | "loose" | undefined | No | default |
rounded | boolean | undefined | No | — |
eyebrow | ReactNode | No | — |
title | ReactNode | No | — |
lede | ReactNode | No | — |
align | "center" | "start" | undefined | No | — |
as | ElementType | undefined | No | section |
Accessibility
Renders a <section> labelled by its <h2> title (aria-labelledby), so it is a named landmark. Without a title it is a plain section; pass aria-label to name it. Keep one <h1> per page (HeroSplit or PageHeader) and use Section for the <h2> bands under it.
data-rebar-* attributes
data-rebar-component="section" with data-rebar-tone, data-rebar-width, data-rebar-spacing and data-rebar-rounded. Parts: inner, header, eyebrow, title, lede.
Migrating to Ant Design
Not codemod-covered. Ant Design has no equivalent; use a Layout.Content with your own background.