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

Personal info

Clouds is focused on the realtime granularization of incoming audio signals, and their transformation into amorphous textures.

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

User info

Notifications

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.