The Surface
serves as the versatile base in elevation and hierarchy of your visual components. They can be used to create cards, panels, wells, or any other surface that requires a distinct visual separation from the one behind it.
This carries all the down to inputs; if it contains other elements it should probably be a <Surface />
.
Demo
Variants
Card
The card
variant is extremely popular in UI design over the past few years, it provides a clean and modern look for displaying content in contrast against your apps background. Especially common in dashboards for instance.
Well
A well
is a surface that appears visually sunken (appropriately named) into its background. You may have seen these frequently used in design libraries such as material for instance.
These are useful when you want to group content and display it without necessarily drawing the attention of a card.
Padding
By default surfaces have no padding, but you can easily add padding to them using the padding
prop.
Rounding
You can round the corners of a surface using the rounded
prop.
Border
Set the thickness of the border using the border
prop.
Customisation
The demos displayed above only show the default settings of those variants, but the surface is of course completely customisable.
