Paper
The Paper component provides a reusable pattern for paper in the interface.
Paper
Content wrapped with the paper component
Content wrapped with the paper component. Padding parameter set to "4"
Content wrapped with the paper component. Transparent parameter set to "true" removing shadow and background.
API
| Parameter | Default | Description |
|---|---|---|
|
slot
|
Paper content | |
|
padding
|
false | Numeric value of padding sizes. Se padding doc for more info. |
|
transparent
|
false | Transparent paper with no shadow |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-paper--border-radius
|
var(--border-radius) | range | - | Border Radius |
|
--c-paper--space
|
var(--space) | range | - | Base spacing unit. Used for padding and margin inside components. |
|
--c-paper--border-width
|
var(--border-width) | range | - | Size |
|
--c-paper--color--surface
|
var(--color--surface) | color | - | Surface |
|
--c-paper--color--surface-border
|
var(--color--surface-border) | color | - | Manual companion token for borders on surface elements. |
|
--c-paper--shadow-color
|
var(--shadow-color) | rgba | - | Shadow Color |
|
--c-paper--shadow-amount
|
var(--shadow-amount) | range | - | Multiplier for elevation shadows. 0 = none, 1 = default. |
|
--c-paper--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-paper--corner-shape
|
var(--corner-shape) | select | square, round, squircle, circular, bevel, scoop | Corner Shape |