Spacer
Utility for adding vertical spacing (margin-block) between elements. Useful when you need spacing but don’t want to use a full stack layout.
Basic usage
Section titled “Basic usage”<div>Content</div>
<div class="af-spacer-sm">Small spacer above</div>
<div>Content</div>
<div class="af-spacer-md">Medium spacer above</div>
<div>Content</div>
<div class="af-spacer-lg">Large spacer above</div>Content
Small spacer above
Content
Medium spacer above
Content
Large spacer above
Content
Spacer sizes
Section titled “Spacer sizes”af-spacer-sm- Small spacing (space-2)af-spacer-md- Medium spacing (space-4)af-spacer-lg- Large spacing (space-6)
When to use
Section titled “When to use”- Adding spacing between individual elements
- Creating gaps in non-stack layouts
- Quick vertical rhythm without changing layout structure
Note: For consistent vertical layouts, prefer af-stack with gap utilities. Use spacer for one-off spacing needs.