Your First Page - Step 3

Build your first Thorm page and learn the basic workflow: structure, state, and rendering mode.

/Components/Header.php defines a reusable header component using Thorm’s node helpers.

  • It returns a <header> container centered to max-w-6xl with padding.
  • Inside is a flex layout with two sides: a brand block and a nav.
  • The brand block shows a circular badge (styled span) plus a title and tagline (“ACME HQ Contact” / “Looney vibes, serious replies”).
  • The nav contains two styled buttons: one link back to / and a mailto link to hello@thorm.dev
PHP
<?php declare(strict_types=1); namespace App\Components; use Thorm\IR\Node\Node; use function Thorm\a; use function Thorm\attrs; use function Thorm\cls; use function Thorm\div; use function Thorm\header; use function Thorm\nav; use function Thorm\span; use function Thorm\text; final class Header { public static function get(): Node { return header([ cls('mx-auto w-full max-w-6xl px-4 py-6'), ], [ div([ cls('flex flex-wrap items-center justify-between gap-3'), ], [ div([cls('flex items-center gap-3')], [ span([cls('h-12 w-12 rounded-full border-4 border-acme-ink bg-acme-orange')]), div([], [ div([cls('title-font text-2xl')], [text('ACME HQ Contact')]), div([cls('text-sm font-semibold text-acme-muted')], [text('Looney vibes, serious replies')]), ]), ]), nav([ cls('flex flex-wrap items-center gap-2'), ], [ a([ cls('rounded-full border-2 border-acme-ink bg-acme-cream px-4 py-2 text-sm font-semibold shadow-acme transition hover:-translate-y-0.5'), attrs(['href' => '/']) ], [ text('Back to Acme HQ'), ]), a([ cls('rounded-full border-2 border-acme-ink bg-acme-yellow px-4 py-2 text-sm font-semibold shadow-acme transition hover:-translate-y-0.5'), attrs(['href' => 'mailto:hello@thorm.dev' ])], [ text('Email us') ]), ]), ]), ]); } }
Status: Developer Preview
Things may change, things might break. If something feels awkward, it's probably a design edge we're still smoothing out.
On this page