Utilities

Utilities will help you handle/modify the components in case you require it to accomplish the UI proposed by designers.

Utilities are a work-in-progress which means right now not all components support them. To know if a components supports utilities classes, click in the Documentation tab and make sure it's listed in the Specifications table.

Padding

Use these classes when you need to modify the padding (inner spacing) of the elements. Have in mind there are variations that will allow you to achieve different purposes as top padding on desktop only.

Note: Make sure to read each class description to make sure what's the role it will play and how it will affect the UI.

Class / Modifier	Description
`sui-padding`	It adds 30px padding on desktop and 20px on mobiles respecting library default gutter.
`sui-padding--hidden`	This modifier sets padding to zero.
`sui-padding__desktop`	This modifier adds 30px padding on desktop only.
`sui-padding__desktop--hidden`	This modifier sets padding to zero on desktop only.
`sui-padding__mobile`	This modifier adds 20px padding on mobiles only.
`sui-padding__mobile--hidden`	This modifier sets padding to zero on mobiles only.

Class / Modifier	Description
`sui-padding-${position}`	It adds 30px padding on desktop and 20px on mobiles respecting library default gutter.
`sui-padding-${position}--hidden`	This modifier sets padding to zero.
`sui-padding-${position}__desktop`	This modifier adds 30px padding on desktop only.
`sui-padding-${position}__desktop--hidden`	This modifier sets padding to zero on desktop only.
`sui-padding-${position}__mobile`	This modifier adds 20px padding on mobiles only.
`sui-padding-${position}__mobile--hidden`	This modifier sets padding to zero on mobiles only.

Reminder:

Don't forget to replace ${position} with the position you desire to modify. Position could be replaced with: top, right, bottom or left options. For example, sui-padding-top.