Scroll Padding
Set scroll padding for snap
Syntax
visual="scroll-p:[value]"Values
| Value | CSS Output | Description |
|---|---|---|
scroll-p | scroll-padding: var(--s-{value}) | All sides |
scroll-p-t | scroll-padding-top: var(--s-{value}) | Top padding |
scroll-p-r | scroll-padding-right: var(--s-{value}) | Right padding |
scroll-p-b | scroll-padding-bottom: var(--s-{value}) | Bottom padding |
scroll-p-l | scroll-padding-left: var(--s-{value}) | Left padding |
Examples
html
<div visual="scroll-p:big">Scroll padding</div>Preview
Scroll Padding
visual="scroll-p:big" - Padding for scroll snap container
scroll-p:big
View Code
html
<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:small" visual="bg:primary text:white rounded:small">scroll-p:big</div>
</div>Arbitrary Values
Supports custom values using bracket syntax:
html
<div visual="scroll:[custom-value]">Custom</div>