Well

A Well is a content container that displays non-editable content separate from other content on the screen. Often this is used to display preformatted text, such as code/markup examples on a documentation page.

Example#

<Well>
  Better a little which is well done, than a great deal imperfectly.
</Well>

<Well>
  Better a little which is well done, than a great deal
  imperfectly.
</Well>

<Well>
  Better a little which
  is well done, than a
  great deal
  imperfectly.
</Well>

Content#

Wells accept any renderable children.

<Well>Well, well, well</Well>

<Well>Well, well, well</Well>

<Well>
  Well, well, well
</Well>

Internationalization#

In order to internationalize a well, a localized string should be passed to the children prop.

Accessibility#

By default, the visual separation of a Well is not conveyed to assistive technologies. As such it should be used where this separation makes no difference in understanding the content.

However, if the Well does convey semantic meaning then a role must be specified and, if appropriate, labeled using either aria-label or aria-labelledby.

<Well role="region" aria-labelledby="wellLabel">
  <h3 id="wellLabel">Shipping Address</h3>
  <p>601 Townsend Street<br /> San Francisco, CA 94103</p>
</Well>

<Well role="region" aria-labelledby="wellLabel">
  <h3 id="wellLabel">Shipping Address</h3>
  <p>601 Townsend Street<br /> San Francisco, CA 94103</p>
</Well>

<Well
  role="region"
  aria-labelledby="wellLabel"
>
  <h3 id="wellLabel">
    Shipping Address
  </h3>
  <p>
    601 Townsend
    Street<br />{' '}
    San Francisco, CA
    94103
  </p>
</Well>

Props#