Paper
The Paper component provides a reusable pattern for paper in the interface.
Default paper
Content wrapped with the paper component, using default padding.
Padded paper (padding set to 2)
The paper component has a padding parameter that can be set to one of the spacing values. In this example the padding is set to 2.
Content wrapped with the paper component. Padding parameter set to "2"
Padded paper (padding set to 4)
The paper component has a padding parameter that can be set to one of the spacing values. In this example the padding is set to 4.
Content wrapped with the paper component. Padding parameter set to "4"
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-alt
|
var(--color--surface-alt) | color | - | Manual companion token for subtle surface backgrounds. |
|
--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--color--surface-contrast-muted
|
var(--color--surface-contrast-muted) | color | - | Derived muted contrast for text and icons on surface backgrounds. |
|
--c-paper--corner-shape
|
var(--corner-shape) | select | square, round, squircle, circular, bevel, scoop | Corner Shape |