Surface CORE

Examples Layers Setup
Source code

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 shadow

Video

#

Big Buck Bunny

Selectable

#

Spacing compensation

#