Skip to content
Habitus Design

blocks / hero

Hero split

Headline and actions beside an app screen on an accent panel.

React: HeroSplit · Svelte: HeroSplit · templ: blocks.HeroSplit · Figma: catalog (no Figma node)

Build Better Habits. One Day at a Time.

Track your daily routines, stay consistent, and turn goals into habits — all in one beautiful app.

Get Started Free Watch Demo
Habit tracker screen of the Habitus app

Semantic classes (packages/adapter)

  • .ui-hero-split
  • .ui-hero-split-container
  • .ui-hero-split-copy
  • .ui-hero-split-title
  • .ui-hero-split-lead
  • .ui-hero-split-actions
  • .ui-hero-split-art
  • .ui-hero-split-image