Styles

Using this Component

Wells are inline frames used in two scenarios:

  • To display settings inline, with a collapsed read-only summary state & an expanded edit state.
  • To emulate a window to another page


Content

Wells should be used for editable content and settings. They should not be used exclusively for content display, but there may be read-only states when not being edited, or when being viewed by those without permission to edit.


Layout

The content layout of a well follows the same basic guidelines as a modal, with the exception that a well does not require a page header.


Alternatives

For displaying collapsing sections, consider UIAccordion.

Structure

Behavior

Wells are not directly interactive components, but they may contain interactive elements. This may include form fields, header actions, buttons, etc. Content interactivity within a well may cause it to change size.

Playground Coming Soon!

Styles

Using this Component

Wells are inline frames used in two scenarios:

  • To display settings inline, with a collapsed read-only summary state & an expanded edit state.
  • To emulate a window to another page


Content

Wells should be used for editable content and settings. They should not be used exclusively for content display, but there may be read-only states when not being edited, or when being viewed by those without permission to edit.


Layout

The content layout of a well follows the same basic guidelines as a modal, with the exception that a well does not require a page header.


Alternatives

For displaying collapsing sections, consider UIAccordion.

Structure

Behavior

Wells are not directly interactive components, but they may contain interactive elements. This may include form fields, header actions, buttons, etc. Content interactivity within a well may cause it to change size.