> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Spacing

> Utility section for adding vertical spacing and borders between sections in the Sahara Shopify theme

The Spacing section is a utility component designed to control vertical spacing and visual separation between other sections. Use it to add breathing room, create visual hierarchy, or insert decorative borders without adding content. This minimal, layout-focused utility helps you perfect the spacing between sections without cluttering your page with unnecessary content blocks.

## What this section controls

This section controls vertical spacing with the following capabilities:

* Adjustable vertical spacing (None, S, M, L, XL)
* Separate top and bottom spacing controls for desktop
* Independent mobile spacing settings
* Section borders (None, Top, Bottom, Both)
* Color scheme selection for background
* Full-width or standard width options
* No content blocks - purely for layout control

***

## Section Settings

### Color & Design

<AccordionGroup>
  <Accordion title="Color Scheme">
    **Setting ID:** `color_scheme`\
    **Type:** Color Scheme\
    **Default:** `scheme-1`

    Choose the color scheme for the spacing section background. This determines the background color of the spacing area.

    **Use Cases:**

    * Match the surrounding sections for seamless transitions
    * Use contrasting colors to create clear visual breaks
    * Coordinate with your overall page design theme
  </Accordion>

  <Accordion title="Section Border">
    **Setting ID:** `section_border`\
    **Type:** Select\
    **Options:**

    * `none` - No border
    * `top` - Border at top
    * `bottom` - Border at bottom
    * `both` - Borders at top and bottom

    **Default:** `none`

    Add decorative borders to the top, bottom, or both edges of the spacing section.

    **Use Cases:**

    * Create horizontal dividers between content sections
    * Add subtle visual separation without additional elements
    * Frame specific page areas with border pairs
  </Accordion>
</AccordionGroup>

***

### Spacing Controls

<AccordionGroup>
  <Accordion title="Top Spacing">
    **Setting ID:** `spacing_top`\
    **Type:** Select\
    **Options:**

    * `0` - None
    * `1` - Small (S)
    * `2` - Medium (M) ⭐ Default
    * `4` - Large (L)
    * `6` - Extra Large (XL)

    Controls the amount of padding/margin above the section.

    **Spacing Scale Guide:**

    * **None (0):** No top spacing - section sits flush with content above
    * **Small (1):** Minimal breathing room (\~20-30px equivalent)
    * **Medium (2):** Standard spacing for general use (\~40-50px)
    * **Large (4):** Significant separation (\~80-100px)
    * **Extra Large (6):** Maximum spacing for dramatic breaks (\~120-150px)
  </Accordion>

  <Accordion title="Bottom Spacing">
    **Setting ID:** `spacing_bottom`\
    **Type:** Select\
    **Options:**

    * `0` - None
    * `1` - Small (S)
    * `2` - Medium (M) ⭐ Default
    * `4` - Large (L)
    * `6` - Extra Large (XL)

    Controls the amount of padding/margin below the section.

    Works identically to Top Spacing but applies to the bottom edge.
  </Accordion>
</AccordionGroup>

***

## Common Use Cases

### 1. Visual Breaks Between Content

Add breathing room between dense content sections:

```
[Product Grid Section]
    ↓
[Spacing Section - Medium top/bottom, no border]
    ↓
[Testimonials Section]
```

**Configuration:**

* Spacing Top: Medium (2)
* Spacing Bottom: Medium (2)
* Section Border: None
* Color Scheme: Same as surrounding sections

***

### 2. Page Dividers with Borders

Create clear visual separators between page areas:

```
[Hero Banner]
    ↓
[Spacing Section - Large spacing, bottom border]
    ↓
[Featured Collections]
```

**Configuration:**

* Spacing Top: Large (4)
* Spacing Bottom: Large (4)
* Section Border: Bottom
* Color Scheme: Contrasting scheme for visibility

***

### 3. Whitespace-Only Separation

Add clean, minimal spacing without any borders:

```
[Content Section 1]
    ↓
[Spacing Section - XL spacing, no borders]
    ↓
[Content Section 2]
```

**Configuration:**

* Spacing Top: Extra Large (6)
* Spacing Bottom: Extra Large (6)
* Section Border: None
* Color Scheme: Match background

***

### 4. Framed Content Areas

Use dual borders to frame specific sections:

```
[Spacing Section - Top border]
    ↓
[Important Announcement]
    ↓
[Spacing Section - Bottom border]
```

**Configuration:**

* Spacing Top: Small (1)
* Spacing Bottom: Small (1)
* Section Border: Both
* Color Scheme: Highlight scheme

***

## Layout & Positioning

### Section Class

* **Class:** `section-spacing`
* **Tag:** `<section>`

This section uses semantic HTML5 `<section>` tag and applies the `.section-spacing` class for styling.

***

## Best practices

<CardGroup cols={2}>
  <Card title="Consistent Spacing Scale" icon="ruler">
    Use the same spacing values (S, M, L, XL) consistently throughout your site to create visual rhythm and hierarchy.
  </Card>

  <Card title="Strategic Border Use" icon="border-top-left">
    Don't overuse borders - reserve them for major page divisions or important content separators.
  </Card>

  <Card title="Color Coordination" icon="palette">
    Match spacing section color schemes with adjacent sections for seamless flow, or use contrast for dramatic breaks.
  </Card>

  <Card title="Mobile Consideration" icon="mobile">
    Remember that spacing values may adjust on mobile - test your layouts on multiple screen sizes.
  </Card>
</CardGroup>

***

## Design Tips

### Creating Visual Hierarchy

**Light Spacing (S):** Use between closely related content sections

```
Product Description
[Spacing: Small]
Product Specifications
```

**Medium Spacing (M):** Standard separation for general content

```
Featured Products
[Spacing: Medium]
Testimonials
```

**Heavy Spacing (L/XL):** Major page divisions or emphasis

```
Hero Section
[Spacing: Extra Large]
Main Content Area
```

***

### Border Strategies

<Note>
  Borders inherit styling from your theme's border settings. They typically use subtle colors that complement your color schemes.
</Note>

**Single Border Usage:**

* **Top border:** Starts a new content area
* **Bottom border:** Closes/ends a content area

**Dual Border Usage:**

* **Both borders:** Frames/isolates important content
* Often paired with contrasting color schemes

***

## Technical Details

### Schema Structure

```json theme={null}
{
  "name": "t:sections.spacing.name",
  "tag": "section",
  "class": "section-spacing",
  "settings": [
    // Color scheme setting
    // Spacing top/bottom selects
    // Section border select
  ]
}
```

### Section Limits

* **No limit:** Add as many spacing sections as needed
* **No blocks:** This section contains no child blocks
* **Pure utility:** No content, text, or media settings

***

## Accessibility Considerations

<Warning>
  The Spacing section is primarily decorative. Ensure it doesn't create confusing gaps that disrupt screen reader navigation or keyboard focus flow.
</Warning>

**Accessibility Best Practices:**

* Use sparingly to avoid creating disorienting empty spaces
* Don't rely on spacing alone to convey meaning or structure
* Ensure spacing doesn't break logical content relationships
* Test with screen readers to verify smooth navigation flow

***

## Preset Configuration

The section comes with one preset:

**Default Spacing Preset:**

* Category: Basic
* Spacing Top: Medium (2)
* Spacing Bottom: Medium (2)
* Section Border: None
* Color Scheme: Scheme 1

**To Add:** Click **Add section** → **Basic** → **Spacing**

***

## Example Implementations

### 1. Homepage Content Separator

**Goal:** Separate hero from product grid with clean whitespace

```
Settings:
- Spacing Top: 4 (Large)
- Spacing Bottom: 4 (Large)
- Section Border: none
- Color Scheme: scheme-1 (match page background)
```

**Result:** 80-100px of clean whitespace between sections

***

### 2. Bordered Content Divider

**Goal:** Create visible separation with horizontal line

```
Settings:
- Spacing Top: 2 (Medium)
- Spacing Bottom: 2 (Medium)
- Section Border: bottom
- Color Scheme: scheme-4 (subtle contrast)
```

**Result:** Medium spacing with decorative bottom border

***

### 3. Dramatic Section Break

**Goal:** Maximum visual separation for page transitions

```
Settings:
- Spacing Top: 6 (Extra Large)
- Spacing Bottom: 6 (Extra Large)
- Section Border: both
- Color Scheme: scheme-3 (contrasting background)
```

**Result:** Large gap with dual borders, creates strong visual break

***

## Troubleshooting

<AccordionGroup>
  <Accordion title="Spacing appears too large/small">
    **Problem:** The spacing doesn't match your expectations

    **Solutions:**

    * Check theme's CSS custom properties - spacing multipliers may vary
    * Remember mobile viewports may use different spacing scales
    * Test on actual devices, not just browser resize
    * Consider cumulative effect with adjacent section spacing
  </Accordion>

  <Accordion title="Borders not visible">
    **Problem:** Selected borders don't appear

    **Solutions:**

    * Verify border color isn't matching background color
    * Check theme customizer for global border settings
    * Ensure color scheme supports visible borders
    * Try different color scheme combinations
  </Accordion>

  <Accordion title="Section creates unwanted gaps">
    **Problem:** Spacing section disrupts page flow

    **Solutions:**

    * Reduce spacing values (use S instead of L)
    * Check if adjacent sections already have spacing
    * Remove the section and use built-in section spacing settings instead
    * Verify section is placed in correct position
  </Accordion>

  <Accordion title="Color scheme doesn't apply">
    **Problem:** Background color not showing

    **Solutions:**

    * Increase spacing values - color only visible when section has height
    * Check if transparent backgrounds are intended
    * Verify color scheme is properly configured in theme settings
    * Test with contrasting color scheme to confirm
  </Accordion>
</AccordionGroup>

***

## Related Sections

* **All Sections:** The Spacing section can be used between any other sections
* Works particularly well with content-heavy sections like:
  * Featured Products
  * Testimonials
  * Rich Text
  * Full Width Banner
  * Featured Collections

***

## Quick Reference

| Setting        | Purpose                  | Default    |
| -------------- | ------------------------ | ---------- |
| Color Scheme   | Section background color | scheme-1   |
| Spacing Top    | Padding/margin above     | 2 (Medium) |
| Spacing Bottom | Padding/margin below     | 2 (Medium) |
| Section Border | Decorative borders       | none       |

**Spacing Scale:** 0 (none) → 1 (S) → 2 (M) → 4 (L) → 6 (XL)

**Border Options:** none → top → bottom → both

***

## Summary

The **Spacing** section is a simple but powerful utility for controlling vertical rhythm and visual hierarchy on your pages. Use it strategically to:

Add breathing room between content sections\
Create visual breaks with optional borders\
Control page flow and reader attention\
Maintain consistent spacing throughout your site

<Tip>
  **Pro Tip:** Create a consistent spacing rhythm by using the same spacing values (e.g., always use Medium for standard breaks, Large for major sections) throughout your entire site.
</Tip>