Utility Classes
Utilities are single-purpose classes for specific styling tasks. They provide consistent, reusable styles for common design patterns.
Region Utility
The region utility provides consistent block padding for page
sections. It applies padding-block using the
--region-space custom property.
Region Section Example
This section uses the region utility for consistent vertical padding. The region utility creates consistent spacing for page sections and helps maintain visual rhythm throughout the design.
Notice how the padding is applied to the top and bottom (block direction) of this element, creating consistent section spacing.
Customizing Region Spacing
You can customize the region utility by overriding the
--region-space custom property:
Small Region Spacing
This region uses smaller spacing.
Large Region Spacing
This region uses larger spacing.