Space

A spacing component that adds vertical or horizontal whitespace between elements, ensuring consistent spacing throughout a layout.

Use Cases

• Vertical spacing between form sections
• Spacing between content blocks
• Horizontal spacing in inline layouts
• Creating breathing room in dense layouts

Properties

size

Amount of space to add (in pixels). Type: string. Options: 8px, 16px, 24px, 32px, 40px, 48px, 56px, 64px, 72px, 80px, 88px, 96px, 104px, 112px, 120px, 128px, 136px, 144px, 152px, 160px. Default: 24px. Visual Impact: 8px – Very tight spacing; 16px – Tight spacing; 24px – Balanced spacing (default); 32px – Generous spacing; 48px – Extra generous spacing; 64px – Very large spacing; 80px+ – Extra large spacing for major breaks. Recommendations: sections – Use '48px', '64px', or '80px' between major sections; groups – Use '24px' or '32px' between field groups (default: '24px'); elements – Use '8px' or '16px' between related elements; available – 20 size options available: 8px to 160px in 8px increments.

direction

Direction of spacing – vertical adds height, horizontal adds width, empty string adds both. Type: string. Options: (empty string), vertical, horizontal. Default: (empty string). Visual Impact: (empty string) – Both vertical and horizontal spacing (default); vertical – Only vertical spacing (height); horizontal – Only horizontal spacing (width). Recommendations: default – Use '' (empty string) for both directions (default); vertical-only – Use 'vertical' for vertical spacing between stacked elements; horizontal-only – Use 'horizontal' for spacing in inline layouts.

customCss

Custom CSS styles for advanced styling. Parsed as CSS property-value pairs. Type: string. No default value. Security Note: Parsed by cssParser utility. Tenants only affect their own pages (multi-tenant isolation enforced).

Best Practices

• Use Space to add gaps between major form sections or content blocks
• Prefer Grid/Flex gap property for spacing within layouts
• Use size: '24px' or '32px' for most use cases (balanced spacing)
• Default direction is '' (both) – use 'vertical' for vertical‑only spacing
• Don’t overuse – too much space makes content feel disconnected

Common Mistakes

Using Space instead of Grid/Flex gap

Why it's a problem: Space adds extra component to markup – Grid/Flex gap is more efficient

Fix: Use Grid/Flex gap property for spacing within layouts. Use Space for major section breaks.

Overusing Space components (5+ in a row)

Why it's a problem: Creates excessive whitespace, content feels disconnected

Fix: Use Space sparingly for major section breaks. Combine related content in groups.