Section Padding
Padding for sections is responsive and based on a multiplier of the core spacing system.
Spacing
There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
--space-xs
--space-s
--space-m
--space-l
--space-xl
--space-xxl
Element Padding
Here are the six levels of spacing visualized as padding.
Card
This is a card with XS padding. Its content is pretty close to the edges.
Card
This is a card with S padding. It has a little bit tighter padding.
Card
This is a card with M padding. It has standard breathing room.
Card
This is a card with L padding. It has extra breathing room.
Card
This is a card with XL padding. It has significant breathing room.
Card
This is a card with XXL padding. Avoid using this in a confined space.
This is just a placeholder headline, we will replace it once your website copy is finalized.
accent heading
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
This is just a placeholder headline, we will replace it once your website copy is finalized.
accent heading
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.
This is just a placeholder headline, we will replace it once your website copy is finalized.
accent heading
This is just placeholder text. Don’t be alarmed, this is just here to fill up space since your finalized copy isn’t ready yet. Once we have your content finalized, we’ll replace this placeholder text with your real content.