Skip to main content

    Surface

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

    OverviewPropertiesUsage

    Import​

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

    Use cases​

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

    CodeSandbox

    Use the 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.

    CodeSandbox

    Make the 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.

    CodeSandbox

    Polymorph the Surface 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.

    CodeSandbox

    Add layout styles to the Surface component​

    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.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community