Paper

Layout

Material-style elevated surface with shadow variants and glass morphism effects

Basic Usage

Paper Title

Paper body content goes here.

Variants & Elevation

Elevation 0
Elevation 1
Elevation 3

Real World Example

Card Title

Supportive card content and actions.

Usage Guidelines

When to Use

  • Card backgrounds
  • Elevated content sections
  • Modal backgrounds

Accessibility

  • Supports proper color contrast
  • Works with high contrast mode

Performance

  • CSS-only shadows
  • Minimal DOM footprint

Common Mistakes

  • Excessive elevation levels
  • Glass on glass causing blur issues

Frequently Asked Questions

Paper is a Material-style elevated surface with shadow variants and glass morphism effects.
Yes, Paper includes a glass variant with backdrop blur and transparency effects.

View on GitHub

See the full source code on GitHub

Related Components

View all
Container

Responsive container implementing max-width constraints with fluid padding and automatic centering for consistent content alignment across breakpoints

Grid

CSS Grid-based layout system with configurable columns, gaps, and responsive GridItem children supporting explicit placement and spanning

Masonry

Masonry layout system with configurable columns for Pinterest-style cascading grid layouts

Section

Semantic HTML5 section wrapper with built-in spacing utilities and accessibility landmarks for document structure organization

Previous

Masonry

Next

TagInput