Spacing & Rhythm

Live Demo

Stack — consistent vertical rhythm

.caat-stack puts one consistent gap between its children (and zeroes their own margins, so spacing has a single source). Pick the step from the scale.

Grouping by proximity

This is what replaces the divider: less space within a group, more between groups. The structure reads instantly — no lines needed. (Outer stack --xl, inner stacks --2xs.)

Spacer — explicit one-off gap

For the rare case you can't control spacing structurally. Prefer Stack or section padding.

Reserved — thematic break

A single 1px rule, only for a genuine change of topic in prose (HTML <hr>). There is no thick/accent rule — heavy bars fence the page.

Reserved — “or” divider

The one case a visible line genuinely helps: choosing between two alternatives.

Anti-patterns

1. Summary

2. Design Tokens

3. Authoring Fields

4. Validation Rules

No author-managed content beyond an accessible label, so there are no authoring validation rules. Accessibility requirements are covered in Section 8 (Accessibility).

5. Content Guidance

Do

• Separate with space, not lines. Use a Stack (or grid gap / section padding) so related items sit closer and groups sit further apart.
• Use the scale. Every gap is a step (--caat-space-*). Consistent steps create rhythm.
• Reserve the divider for a real change of topic in prose, or an “or” between two actions.
• Separate page sections with padding + background tiers (see Page Layout), not rules.

Don't

• Don't stack empty Spacers to force layout — use a Stack or container padding.
• Don't hand-pick arbitrary margins; pull from the scale.
• Don't reach for a thick/coloured rule for emphasis — there isn't one, by design.

6. Semantic HTML

<!-- Vertical rhythm: one consistent gap between children -->
<div class="caat-stack caat-stack--lg">
  <h2>…</h2>
  <p>…</p>
  <a class="caat-button …">…</a>
</div>

<!-- Explicit one-off gap (rare) -->
<div class="caat-spacer--lg" aria-hidden="true"></div>

<!-- Reserved: thematic break -->
<hr class="caat-separator">

<!-- Reserved: "or" divider -->
<div class="caat-separator--with-label"><span class="caat-separator__label">or</span></div>

7. CSS Contract

8. Accessibility

9. SEO

Transient / structural UI with no indexable content of its own — no SEO markup required. Ensure any content this component wraps or reveals stays server-rendered and crawlable.

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Implementation Notes

• Resource type: caat/components/separator (kept for continuity).
• Spacer/Divider/Or render from a type + size/label model.
• Stack is best applied as a layout-container style on a parent (e.g. a content container policy), not dropped between components — author guidance over a drop-in.
• Size options are constrained to the spacing scale (no free-text).

12. Dialog Model (cq:dialog)

Not authored directly. The separator is a sub-element emitted and configured by its host component (or generated from page structure), so it has no standalone cq:dialog — any options are exposed through the host component's dialog.

13. QA Checklist

14. Definition of Done

• Stack & Spacer drive all routine separation; gaps come from the scale.
• Visible rules limited to thematic break + “or” divider.
• Thick/accent/spaced rule variants removed; no consumers broken.
• Page-section separation uses padding + background tiers (Page Layout).
• QA checklist signed off.