Layout Demo

Every supported column ratio

This page is intentionally utilitarian. It gives us one place to inspect every locked Core column layout at desktop width, mobile width, browser zoom, and enlarged text settings.

50 / 50

First half

Equal-width content with a little extra text to expose wrapping behavior.

Second half

The second column should receive the same available width as the first.

33 / 67

One third

Useful for compact supporting information.

Two thirds

Useful for the primary explanation when the supporting information does not need equal visual weight.

67 / 33

Two thirds

The larger region appears first in logical reading order.

One third

A compact secondary region appears second.

25 / 75

Quarter

A narrow supporting region.

Three quarters

A deliberately wider content region for longer explanations and more comfortable paragraph lengths.

75 / 25

Three quarters

Primary content remains first in source order.

Quarter

Secondary supporting content.

33 / 33 / 33

First

Three equal service cards.

Second

All three should stack in logical order on smaller layouts.

Third

No meaning should depend on the horizontal arrangement.