Surface

The Surface component is used to structure content on a page.

OverviewPropertiesUsage

Import

import { Surface } from '@dynatrace/strato-components/layouts';

Demo

The Surface component offers different visual styles depending on the elevation level. By default, the elevation is set to flat.

Use selection style

The selection style can be applied with different colors, which is set to neutral by default. You should always consider the meaning behind the colors when changing this. The color also defines the color of the focus style that is applied when a Surface is interactive and is focused.

Note

The selected border and the box-shadow grow outside of the component's size. When it is inside a container that hides the overflow, it cuts off the border. You will need to prevent this with padding or other CSS properties.

Make Surface interactive

In some cases, the surface itself shall be interactive. Most of the time, polymorphing it into a button or link should be the best way. One caveat is not to nest other interactive elements inside an already interactive surface since this leads to a11y implications.

However, the surface is not automatically considered interactive when a tabIndex of 0 is set, in this case the focus styles are applied but no other interactive styling.

Polymorph component

By default, the Surface component is rendered as a standard div element. For layouting purposes, the component can be polymorphed to any other component. This can be used, for example, to create a Flex layout inside a Surface component. You can also polymorph the Surface into an interactive element, such as a button or link if you want users to interact with the Surface.

Add layout styles

The Surface component has a default padding of 24px. This can be changed by setting any padding prop on the container. Similarly, the container also accepts any CSS margin and layout props, such as width or height.