layouts focus

layouts/focus

Import: import { FocusLayout } from "@tundralibs/ui/layouts/focus"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

FocusLayout

FocusLayout(props: FocusLayoutProps): Html

One centred column, no distractions.

Types

FocusLayoutProps

Prop	Type	Required	Description
header	Html		Minimal: a logo and an exit link, typically.
content	Html	yes
footer	Html
width	`"narrow"	"wide"`
contentId	string
attrs	Attrs

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

A checkout with no distractions

FocusLayout({
  header: html`<a class="navbar__brand" href="/">Acme</a>`,
  content: Wizard({
    id: "checkout",
    steps: [{ label: "Cart", status: "done" }, { label: "Payment", status: "active" }],
    content: html`<p>…</p>`,
  }),
})

<div class="layout layout--focus layout--static-header">
  <header class="layout__header">
    <a class="navbar__brand" href="/">Acme</a>
  </header>
  <main class="layout__content" id="main-content">
    <div class="wizard" id="checkout">
      <ol class="wizard__steps">
        <li class="wizard__step wizard__step--done">
          <span class="wizard__step-index">&#10003;</span>
          <span class="wizard__step-label">Cart</span>
        </li>
        <li class="wizard__step wizard__step--active">
          <span class="wizard__step-index">2</span>
          <span class="wizard__step-label">Payment</span>
        </li>
      </ol>
      <div class="wizard__content">
        <p>…</p>
      </div>
    </div>
  </main>
</div>

CSS hooks

Classes defined by layouts/focus/focus.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.layout--focus, .layout--focus-wide, .layout__content, .layout__footer, .layout__header