#App Page

App Page provides an open, width-bounded page frame for projects, automations, catalogs, forms, and detail views inside App Shell. It keeps page identity and actions stable without adding a card around the whole view.

npm install @a3s-lab/ui@0.4.0

<section class="app-page" data-width="wide">
  <header>
    <div data-page-identity><h1>Projects</h1><p>Durable work context.</p></div>
    <div data-page-actions>...</div>
  </header>
  <div data-page-content>...</div>
</section>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Usage

<section class="app-page" data-width="wide">
  <header>
    <div data-page-identity><h1>Projects</h1><p>Durable work context.</p></div>
    <div data-page-actions>...</div>
  </header>
  <div data-page-content>...</div>
</section>

#Parameters

#States and variants

Use child Empty, Skeleton, Alert, Resource Card, Table, or form components for empty, loading, error, partial-data, and permission states. Do not add another generic page card.

#Accessibility

Use the heading level appropriate to the surrounding document. Keep actions after the identity in DOM order and preserve that order when the header stacks on narrow screens.