MatBlazor - Material Design components for Blazor

Paper & Elevation

Basic component where the physical properties of paper are translated to the screen.
Used for creating sections and giving more focus to some parts of the application.

Name	Type	Description
Attributes	Dictionary<String,Object>	Gets or sets a collection of additional attributes that will be applied to the created element.
ChildContent	RenderFragment	Child content of MatPaper
Class	String	Specifies one or more classnames for an DOM element.
Elevation	Int32	Level of the Elevation. From 0 to 24.
Id	String
Outlined	Boolean	Uses outlined surface. If true, removes Elevation.
RefBack	ForwardRef
Rounded	Boolean	Uses round border.
Style	String	Specifies an inline style for an DOM element.
Ref	ElementReference	Returned ElementRef reference for DOM element.

Example

Elevation 0

Elevation 1

Elevation 2

Elevation 3

Elevation 4

Elevation 5

Elevation 6

Elevation 7

Elevation 8

Elevation 9

Elevation 10

Elevation 11

Elevation 12

Elevation 13

Elevation 14

Elevation 15

Elevation 16

Elevation 17

Elevation 18

Elevation 19

Elevation 20

Elevation 21

Elevation 22

Elevation 23

Elevation 24

Example with different variants

Outlined

Outlined & Rounded

Elevation 1 Rounded

Elevation 10 Rounded

Example using the css class

.mat-elevation-z0

.mat-elevation-z1

.mat-elevation-z2

.mat-elevation-z3

.mat-elevation-z4

.mat-elevation-z5

.mat-elevation-z6

.mat-elevation-z7

.mat-elevation-z8

.mat-elevation-z9

.mat-elevation-z10

.mat-elevation-z11

.mat-elevation-z12

.mat-elevation-z13

.mat-elevation-z14

.mat-elevation-z15

.mat-elevation-z16

.mat-elevation-z17

.mat-elevation-z18

.mat-elevation-z19

.mat-elevation-z20

.mat-elevation-z21

.mat-elevation-z22

.mat-elevation-z23

.mat-elevation-z24