Layout & spacing

Some things to note:

  • For the most part the spacing between elements is consistently one of the following values: 5px, 10px, 15px, 20px, 30px, or 40px.
  • Layout wise, the margin between elements is mostly 30px.
  • Patterns and components (e.g. segmented card and modal) mostly have an outer/container 40px padding to give the content more breathing room and extra focus.
  • See the section on form elements for their unique spacing rules.
  • See the section on buttons for their unique spacing rules.

Below is a general guide to spacing for a couple generic layouts.



The guidelines above are directed at general layout of a template. Please see the documentation for each pattern and component for their unique spacing.

results matching ""

    No results matching ""