Your content
Provides padding all around the box.
body spacing
In our web components library, some components come without
default padding 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.
Provides padding for the padding-block property
(usually above and below the box).
Your content
Provides padding for the
padding-block-start property (usually above the
box).
Your content
Provides padding for the
padding-block-end property (usually below the
box).
Your content
Provides padding for the padding-inline property
(usually the left and right sides of the box).
Your content
Provides padding for the
padding-inline-start property (usually the left
side of the box).
Your content
Provides padding for the
padding-inline-start property (usually the right
side of the box).
Your content