Appearance
Paper ​
Elevations
Loading...
The Paper component is a container for displaying content on an elevated surface. Shadow styles are influenced by real-world physical counterparts. Supported elevation values: 0, 1, 2, 3, 4, 6, 8, 12, 16, 24. Other numeric values are accepted but produce no visible shadow.
- Tag:
<flint-paper> - Class:
FlintPaper
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintPaper } from 'flint-ui';Usage ​
html
<flint-paper></flint-paper>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
elevation | elevation | number | 1 | Shadow depth. Supported values: 0, 1, 2, 3, 4, 6, 8, 12, 16, 24. Other numeric values are accepted but produce no visible shadow. |
square | square | boolean | false | If true, the paper will have square corners (border-radius: 0). |
variant | variant | 'elevated' | 'outlined' | 'flat' | 'elevated' | Visual variant. - elevated: raises the surface with a box-shadow (default) - outlined: flat surface with a visible border and no shadow - flat: flat surface with no shadow and no border |
Slots ​
| Name | Description |
|---|---|
(default) | Default slot for content |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-paper-padding | 0 |
--flint-surface-1 | — |
--flint-text-color | — |
--flint-border-radius-md | — |
--flint-border-color | — |
--flint-surface-background-flat | — |