# Paper

> A sheet of paper on the page's ground — a reading width, generous margins, the theme's hairline and lift — so an invoice, a contract or a report reads as the thing it is rather than as a form about it. Its content is the slot.

<!-- id: ui-paper · area: ui · stability: stable · html: https://osysharp.com/reference/ui/paper/ -->

## Summary        {#summary}

Some records ARE documents — an invoice, a quote, a contract, a report — and the clearest way to show one is as a
page: a sheet at a reading width with margins, its own heading, its figures lined up. `Paper` is that sheet. It takes
its ground, hairline, corners and lift from the theme, so a look decides whether it reads as bright paper on grey
(Ledger) or as a quiet panel.

```osy title="an invoice as paper" test app=ui-paper
[Route("/invoice")] [Render(CSR)] [AllowAnonymous]
component InvoicePage() {
  render {
    Stack(gap: 4, p: 6) {
      Paper("Invoice F-2041") {
        Row(gap: 4, align: Align.Start) {
          Stack(gap: 1, grow: 1) { Strong("Larkspur Studio"); Hint("4 Mill Lane, Bristol"); }
          Text("Invoice", fontFamily: Font.Display, fontSize: FontSize.Title);
        }
        Divider();
        Row(justify: Justify.Between) { Text("Design retainer, October"); Text("1,840.00", fontFamily: Font.Figure); }
        Row(justify: Justify.Between) { Strong("Total due"); Strong("1,840.00"); }
      }
    }
  }
}
```

## Signature      {#signature}

```osy syntax
Paper(string label) { <the document> }
```

## Description    {#description}

### How wide is it?   {#width}

As wide as its column up to 52rem, centred — a measure a page of prose and a column of figures both read well at —
with 2.5rem margins from `Laptop` up and tighter ones on a phone.

### What goes beside it?   {#beside}

The record's activity, its terms, its approvals — in a column of their own (the document desk puts the account's terms
there, editable, with a `SaveBar`) or in a shell's `aside`. The paper itself stays the document.

### How do I drive it in a test?   {#test}

It is a region named by its `label`: `Assert.Visible("Total due", within: "Invoice F-2041")`.

## See also       {#see-also}

- [Arrangements — five ways to build a whole app, and which look wears each](https://osysharp.com/reference/ui/arrangements/) — the document desk built around it
- [SubNav](https://osysharp.com/reference/ui/subnav/) — choosing which document a tab shows