Skip to content
Tattva

Container

Stable

A centered column with a set width and margins on the sides.

Also known as wrapper, max width, center

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

Chat width

A conversation column, kept to a readable width.

This width fits about 70 to 75 characters a line at normal text size.

UsageCodeDesignAccessibility

When to use it

A centered column with a maximum width and side margins. Long lines are hard to read, so the chat width keeps a conversation at a comfortable line length.

Made of: Side margins · Column with a maximum width

Use it for

  • The conversation and the message box, with the chat width so they line up.
  • Settings and documentation pages, with the page width.
  • A home screen, with the home width.

Not for

  • Laying out columns inside the page: use Grid.
  • Spacing items in a column: use Stack.

Do and avoid

Your hotel is booked for 3 nights. You can cancel for free until Friday.

Do. One container sets the width and side margins for the text.

Your hotel is booked for 3 nights. You can cancel for free until Friday.

Avoid. Containers inside containers stack their margins and squeeze the text.

Do

  • Use chat width for the conversation and the message box so they line up.
  • Use page width for settings and documentation.
  • Use the main element once per page.
  • Let side margins grow on larger screens.

Avoid

  • Do not put containers inside containers.
  • Do not hard-code widths in components.
  • Do not use full width for running text.
  • Do not let chat lines run past about 80 characters.

On a phone

  • On a phone it fills the width with a 16px side margin, and the width presets do not apply because they are all wider than a phone.
  • Use flush when content such as an image must reach the screen edge.
  • It adds no safe-area padding, so add that yourself where content sits against a notch or the bottom bar.

Seen in products

  • GOV.UK uses a fixed page width and a tablet screen size.
  • Material 3 uses bigger margins on bigger screens (seen in snippets).
  • Accessibility guidelines ask for lines of no more than 80 characters.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started