The gap prop defines the gap size between elements. Ultimately, the space is controlled by setting the --gap CSS variable.

Default values

Bedrock has implemented a default spacing scheme, but it can be overridden using the ThemeProvider provided by @bedrock-layout/spacing-constants. You can also use any valid CSSLength or positive integer.

Usage examples

// CSS
// Using the predefined spacing constants
<div data-br-reel='gap:size3'>
 <Component />
 <Component />
</div>

// Or you can use a custom value directly
<div data-br-reel style={{ "--gap": "3ch" }}>
 <Component />
 <Component />
</div>

// React.js and Solid.js
<Reel gap="size3">
 <Component />
 <Component />
</Reel>

// Or you can use a css value directly
<Reel gap="3ch">
 <Component />
 <Component />
</Reel>

// or you can use a custom property
<Reel gap="--custom-size-4">
 <Component />
 <Component />
</Reel>
Copy

Here are the possible values for gap by default:

The snapType prop defines the scroll snap type.

Usage examples

// CSS
<div data-br-reel='snapType:mandatory'>
 <Component />
 <Component />
</div>

// React.js and Solid.js
<Reel snapType="mandatory">
 <Component />
 <Component />
</Reel>
Copy

(scroll to the right to see the next items)