Taiga UI 5.0 is out!
See what's new
Surface LAYOUT
On this page
General purpose container used in Taiga UI interfaces. Often used in conjunction with Card component.
Behaviors
You can enable hover effects only on devices with pointer:
@media (hover: hover)Presets
Note that
padding and border-radius are not part of the surface. Take a look at Card component for that. Blur
Text should have vertical compensation to look properly aligned, either with unequal
padding or with negative margin . Typical value is 0.25rem , smaller line-height might require 0.125rem instead. backdrop-filter
You can use backdrop-filter on tuiSurface element to blur the background behind it.
Never use this mode with shadowVideo
Big Buck Bunny
Taiga UI