Core concepts

Layout

Each layout primitive owns one job. Combining those jobs keeps spacing predictable and prevents Cards or Containers from acquiring hidden behavior.

The default composition

<section class="group">
  <div class="container">
    <div class="columns is-vcentered">
      <div class="column">…</div>
      <div class="column content">…</div>
    </div>
  </div>
</section>

GroupSection bounds and vertical space

ContainerContent width and page gutters

Columns / GridRelationship between regions

Figure / ContentMedia and text rhythm

Choose by responsibility

Need	Use	Avoid assuming
A page section	Group	Container adds vertical space.
A centered content boundary	Container	It spaces arbitrary children.
Related regions in a row	Columns	Desktop visual order should replace meaningful source order.
Repeated equal peers	Grid	Every grid is a bento composition.
A vertical sequence	Stack	Card or Container will add the gap.
One deliberate trailing gap	Block	Margin utilities are needed.
A compact visual + text row	Media row	Columns are necessary for every two-part layout.
A wrapping distributed row	Level	It is a general page grid.

Responsive behavior

Columns and fixed-count Grids collapse to a single column at 800px. Source order remains the mobile reading order; is-reversed changes desktop presentation only. Horizontal Cards and artwork compositions return to readable stacked arrangements where their component contract specifies it.

Design handoff rule: put meaningful Figure content first in the HTML, then use is-reversed for a desktop image-right treatment. Do not reorder the source just to match one breakpoint.