Sections
A section is one full-width band of the proposal. It owns the background, the spacing and the column layout; the text, images and buttons live inside its cells.
The three kinds
Section titled “The three kinds”| Kind | What it is for |
|---|---|
| Default | Free content — text, images, buttons, in any column layout. Most sections are this. |
| Price | The structured pricing table. Line items, quantities and totals, calculated rather than typed. See Pricing and acceptance. |
| Accept | The signature and acceptance block the client uses to say yes. Usually the last section. |
The kind is fixed when the section is created. A price section stores structured line items and an accept section stores a signature configuration, and neither has a sensible free-text equivalent to convert into.
Settings
Section titled “Settings”Every setting below is optional, and leaving one out is not the same as it having no effect — it falls back to the default in the table. That matters when a single section looks subtly different from its neighbours: usually the setting was never set on that one section rather than deliberately changed.
Width (width)
Section titled “Width (width)”How wide the content is allowed to grow, independent of the section’s own full-width background.
| Value | Result |
|---|---|
s |
Narrow — comfortable for long prose |
m |
Medium |
l |
Wide (default) |
Padding (padding)
Section titled “Padding (padding)”The vertical and horizontal breathing room inside the section: xs, s, m, lg
(default), xl, 2xl. Larger values read as more deliberate and more expensive; they
are also what makes a cover section feel like a cover.
Row and column gaps (rowGap, columnGap)
Section titled “Row and column gaps (rowGap, columnGap)”The space between stacked rows and between side-by-side columns: xs, sm, md
(default), lg, xl. They are set separately, so you can keep columns tight while rows
stay airy.
Minimum height (minHeight)
Section titled “Minimum height (minHeight)”Forces the section to occupy at least part of the screen, regardless of how little
content it holds: none (default), 1/3, 1/2, or full for a full-viewport section.
This is how you build a cover that fills the screen.
Vertical alignment (verticalAlign)
Section titled “Vertical alignment (verticalAlign)”Where the content sits when the section is taller than its content: start (default),
center or end. It only has a visible effect together with a minimum height.
Background (background)
Section titled “Background (background)”Either a solid colour, or an image with:
- size —
cover,containorauto - position —
top,centerorbottom - image opacity, plus an overlay colour and opacity for darkening a photo enough that text stays readable on top of it
Automatic contrast
Section titled “Automatic contrast”Automatic contrast is not a setting you turn on. It always applies: Pural measures the luminance of the section background and picks the text colour itself, keeping the contrast at WCAG 4.5:1. That is why you can choose any background colour you like and the text stays readable.
There is no autoContrast setting and no way to switch it off — writing one has no
effect.
The one exception is an image background, where automatic contrast does not apply — see below.
Image backgrounds and legibility (contentFill)
Section titled “Image backgrounds and legibility (contentFill)”A type: "image" background switches automatic contrast off. Nothing adapts the text to
what is behind it, so a dark headline over a dark photo ships exactly as written, and the
settings look perfectly correct while it does. Always pair an image background with a
legibility layer.
Three of them, weakest to strongest:
| Setting | What it does |
|---|---|
imageOpacity |
Fades the image toward the section’s own colour |
overlayColor + overlayOpacity |
Lays a tint over the whole image |
contentFill |
Puts a solid panel behind the content only |
contentFill takes a colour, an opacity, a blur, a corner radius and an inset, so it can
be anything from a barely-there frosted panel to a solid card. It is the reliable choice
for a full-height cover with a headline on a busy photo.
An individual cell can carry its own fill with the same shape. It is suppressed when
the section already sets contentFill, so the two never stack.
Keep settings consistent
Section titled “Keep settings consistent”A proposal reads as one document when its sections agree. If every section uses lg
padding and width l and one uses m and s, that section looks like a mistake even if
nobody can say why. Vary the background deliberately — that is what separates a cover or
a callout from body sections — and keep the structural settings the same unless you have
a reason.
This page for language models
The same content as plain text, for an AI assistant to read.