Rebar UI

1.0

synthetic

HeroSplit

A headline, actions and a phone on art. The art comes first on phones.

Home heroEyebrow, title, lede, actions, note, backdrop and a phone with floating chips
Daily Catholic practice

Daily practice plus a catechist in your pocket.

Readings, the Rosary, a private journal and Ask, grounded in the Catechism.

Free on the web. Android app coming soon.

Athic.
Saturday, 27th Week in Ordinary Time
TodayΓÇÖs Mass readingsGalatians 3:22ΓÇô29 ┬╖ Luke 11:27ΓÇô28
Did you attend Mass today?
Questions about the Faith, answered from the Catechism.
CCC 1374 The mode of Christ’s presence…
Luke 11:27ΓÇô28 ┬╖ Checked in
VariantsNo device, light tone, no backdrop
Mission

Why Athic exists

Independent, and honest about it.

Athic app

A daily practice, in your pocket.

Readings, the Rosary, a private journal and Ask, grounded in the Catechism.

Athic.
Saturday, 27th Week in Ordinary Time
TodayΓÇÖs Mass readingsGalatians 3:22ΓÇô29 ┬╖ Luke 11:27ΓÇô28
Did you attend Mass today?
Questions about the Faith, answered from the Catechism.

Perspectives

Essays, dialogues and letters on the Faith.

Phone, 390Art-first (left) and overlay (right)

Daily practice plus a catechist in your pocket.

Readings, the Rosary, a private journal and Ask, grounded in the Catechism.

Free on the web. Android app coming soon.

Athic.
Saturday, 27th Week in Ordinary Time
TodayΓÇÖs Mass readingsGalatians 3:22ΓÇô29 ┬╖ Luke 11:27ΓÇô28
Did you attend Mass today?
Questions about the Faith, answered from the Catechism.
Daily practice

A catechist in your pocket.

In context

Home, above the foldUnder the site nav, then the first band
Daily Catholic practice

Daily practice plus a catechist in your pocket.

Readings, the Rosary, a private journal and Ask, grounded in the Catechism.

Free on the web. Android app coming soon.

Athic.
Saturday, 27th Week in Ordinary Time
TodayΓÇÖs Mass readingsGalatians 3:22ΓÇô29 ┬╖ Luke 11:27ΓÇô28
Did you attend Mass today?
Questions about the Faith, answered from the Catechism.
CCC 1374 The mode of Christ’s presence…
Luke 11:27ΓÇô28 ┬╖ Checked in
Every day

Your daily practice, in one place.

Props

PropTypeRequiredDefault
eyebrowReactNodeNo—
titleReactNodeYes—
ledeReactNodeNo—
actionsReactNodeNo—
noteReactNodeNo—
mediaReactNodeNo—
backdropReactNodeNo—
tone"inverse" | "default" | "tint" | undefinedNo—
narrow"art-first" | "stack" | "overlay" | undefinedNo—
minHeightstring | undefinedNo—

Layout

Two columns when the hero is wider than 760px (copy, then media); one column below that. The breakpoint is the hero's own width (a container query), so it follows a narrow column and the width presets above, not just the browser window.

narrow="art-first" (the default with a backdrop) shows the art alone as a rounded band, then the copy on the page surface, then the media on a tint. stack keeps the art behind the copy and stacks the media under it. overlay is stack with an even scrim. The start-side scrim keeps the copy readable on any art.

Accessibility

The title is the page's one <h1>. The backdrop is decorative (aria-hidden, empty alt). The scrim keeps the inverse text at AA contrast over the art. On phones the actions fill the width, so every target is at least 44px tall with a lg button.

data-rebar-* attributes

data-rebar-component="hero-split" with data-rebar-tone, data-rebar-narrow, data-rebar-media and data-rebar-backdrop. Parts: surface, backdrop, copy, eyebrow, title, lede, actions, note, media.

Migrating to Ant Design

Not codemod-covered. Ant Design has no hero; it is a Row and Col pair with a background image.