FullBleedLayout

A canvas that fills the width, with an optional panel.

Overview

A viewer that needs the whole width, such as a snapshot, a canvas or a player; an ordinary page is not.

Viewer

Do

The snapshot fills the width.

import { Body, FullBleedLayout, KeyValue, KeyValueList, Overline } from "@hackcove/ui";

<FullBleedLayout
  panel={
    <>
      <Overline as="h2">Snapshot</Overline>
      <KeyValueList>
        <KeyValue label="Story">Button / Primary</KeyValue>
        <KeyValue label="Changed">0.4%</KeyValue>
      </KeyValueList>
    </>
  }
>
  <Body as="p" color="secondary">
    The snapshot fills the width.
  </Body>
</FullBleedLayout>
A viewer that needs the whole width (a snapshot, a canvas, a player) fills it, with the facts in the panel.
Don't

Quotes

Every quote you have sent.

import { Body, Card, FullBleedLayout } from "@hackcove/ui";

<FullBleedLayout>
  <Card title="Quotes">
    <Body as="p">Every quote you have sent.</Body>
  </Card>
</FullBleedLayout>
FullBleedLayout adds no padding, so an ordinary page lands on the screen edge. A page with a title is a ListLayout or DetailLayout.

Full page

Hack Cove

Snapshot viewer

Your viewer goes here and fills the width.

import {
  AppShell,
  Body,
  EmptyState,
  FullBleedLayout,
  KeyValue,
  KeyValueList,
  NavTabs,
  Overline,
} from "@hackcove/ui";

<AppShell
  brand={<a href="#">Hack Cove</a>}
  nav={
    <NavTabs
      label="Main"
      items={[
        { label: "Quotes", href: "#quotes", active: true },
        { label: "Clients", href: "#clients" },
      ]}
    />
  }
  bleed
>
  <FullBleedLayout
    panel={
      <>
        <Overline as="h2">Snapshot</Overline>
        <KeyValueList>
          <KeyValue label="Story">Button / Primary</KeyValue>
          <KeyValue label="Changed">0.4%</KeyValue>
        </KeyValueList>
      </>
    }
  >
    <EmptyState title="Snapshot viewer">
      <Body as="p" color="secondary">
        Your viewer goes here and fills the width.
      </Body>
    </EmptyState>
  </FullBleedLayout>
</AppShell>
A whole viewer page: the shell with bleed, then the layout with the viewer in children and the facts in panel. The EmptyState stands in for the app's own viewer.

Usage

  • Render it in an AppShell with bleed; the canvas starts at the left edge of the viewport.
  • It adds no padding and has no page title; the canvas is the children.
  • Put the facts about what is shown in panel, a KeyValueList under an Overline. From lg the panel is a fixed-width column on the right; below it, it stacks under the canvas.
  • Omit panel when the canvas stands alone.
  • A page with a title and content is ListLayout or DetailLayout.

Accessibility

  • The panel is an <aside>, a complementary landmark; give it a heading with Overline as="h2".
  • The canvas comes first in the DOM, then the panel.

API

FullBleedLayout

Edge-to-edge children with an optional right panel (lg:w-72) that stacks below on a smaller screen. Render it in <AppShell bleed>. It deliberately breaks the shared left edge: a viewer that needs the whole width has no Container of its own, so children start at the viewport's left edge and add their own padding.

panel
Type
ReactNode