Skip to content

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.

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.

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.

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)

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.

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.

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.

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.

Either a solid colour, or an image with:

  • sizecover, contain or auto
  • positiontop, center or bottom
  • image opacity, plus an overlay colour and opacity for darkening a photo enough that text stays readable on top of it

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.

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.