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.
< Well > Better a little which is well done, than a great deal imperfectly.< / Well >
Wells can have children. They can be nested.
< Well > Well< / Well >
< Well > Well < Well > oh well.< / Well > < / Well >
In order to internationalize a well, a localized string should be passed to the children prop.
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 >
Name Type Default Description flex string | number | boolean — flexGrow number — flexShrink number — flexBasis number | string — alignSelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'stretch' — justifySelf 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch' — flexOrder number — gridArea string — gridColumn string — gridRow string — gridColumnStart string — gridColumnEnd string — gridRowStart string — gridRowEnd string — slot string —
Name Type Default Description role string — id string — tabIndex number — aria-label string — Defines a string value that labels the current element. aria-labelledby string — Identifies the element (or elements) that labels the current element. aria-describedby string — Identifies the element (or elements) that describes the object. aria-controls string — Identifies the element (or elements) whose contents or presence are controlled by the current element. aria-owns string — Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship
between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
aria-hidden boolean | 'false' | 'true' — Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
'size-0'
| 'size-10'
| 'size-25'
| 'size-40'
| 'size-50'
| 'size-65'
| 'size-75'
| 'size-85'
| 'size-100'
| 'size-115'
| 'size-125'
| 'size-130'
| 'size-150'
| 'size-160'
| 'size-175'
| 'size-200'
| 'size-225'
| 'size-250'
| 'size-300'
| 'size-350'
| 'size-400'
| 'size-450'
| 'size-500'
| 'size-550'
| 'size-600'
| 'size-675'
| 'size-700'
| 'size-800'
| 'size-900'
| 'size-1000'
| 'size-1200'
| 'size-1250'
| 'size-1600'
| 'size-1700'
| 'size-2000'
| 'size-2400'
| 'size-3000'
| 'size-3400'
| 'size-3600'
| 'size-4600'
| 'size-5000'
| 'size-6000'
| 'static-size-0'
| 'static-size-10'
| 'static-size-25'
| 'static-size-50'
| 'static-size-40'
| 'static-size-65'
| 'static-size-100'
| 'static-size-115'
| 'static-size-125'
| 'static-size-150'
| 'static-size-175'
| 'static-size-200'
| 'static-size-225'
| 'static-size-250'
| 'static-size-300'
| 'static-size-400'
| 'static-size-450'
| 'static-size-500'
| 'static-size-550'
| 'static-size-600'
| 'static-size-700'
| 'static-size-800'
| 'static-size-900'
| 'static-size-1000'
| 'static-size-1200'
| 'static-size-1700'
| 'static-size-2400'
| 'static-size-2600'
| 'static-size-3400'
| 'static-size-3600'
| 'static-size-4600'
| 'static-size-5000'
| 'static-size-6000'
| 'single-line-height'
| 'single-line-width'
| string
| number