Setting group
Elements
- Group title
- Group description
- Form elements
- Actions
Spacing
- Use space
medium(1rem|16px) below the title. - Use space
medium(1rem|16px) below the settings description. - Limit the description width to
30em. Read more in Typography line lenght section.
Example
Multiple setting groups
A page/view can contain multiple setting groups.
Spacing
- Use a full width border between settings groups.
- Use space
large(1.5rem|24px) before and after the border.
Example
Interaction
The "Save" and "Cancel" buttons are disabled until the user makes a change.
- After saving the user will see the notification component with a success message.
- The "Cancel" button will reset the settings to the previously saved state.