Spacing

In Mercury, some components come without a default padding, in order to offer greater flexibility. This design choice allows users to control the padding based on their specific needs by applying one of our predefined padding classes. By providing a wrapper <div> with the appropriate class, users can easily customize the spacing inside the component, ensuring that it aligns perfectly with their design requirements.

In the following examples the padding is represented by a green background color. These classes names apply for some web components, that are listed at the bottom of this page.