Spacer

Description

The Spacer component is a utility component used to add vertical space between elements in a layout. It creates an empty div element with a specified height, allowing for precise control of vertical spacing in your designs.

Installation

sabaccui add spacer

Usage

The Spacer component can be used to add vertical space between other components or elements. Here's an example of how to use it:

In this example, the Spacer adds 2rem of vertical space.

Removing Vertical Space

This configuration removes 4.5rem of vertical space.

Schema

• height: number
  • Description: Specifies the amount of vertical space to add, measured in rem units.
  • Required: Yes
  • Constraints: Should be a positive number

Related Components

None specified.

Notes

1. The Spacer component renders as a div element with aria-hidden="true" to ensure it's ignored by screen readers.
2. The height is applied using inline styles for maximum flexibility.

Best Practices:

• Use the Spacer component judiciously to maintain consistent spacing throughout your layout.
• Consider creating a set of standard spacer sizes (e.g., small, medium, large) to maintain design consistency across your project.
• Remember that while the Spacer component is useful for fine-tuning layouts, it's generally better to use CSS margin properties for spacing when possible to keep your markup cleaner.