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.

Recommendation: 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 from 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).

Recommendation: 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.

Examples: background-color: #f0f0f0; border-top: 1px solid #e0e0e0;, margin-bottom: 10px;

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.