Well
A Well is a container that groups related content.
- To group related content
- To expand and collapse content, use an Accordion
- For validation messages, use an Alert
- For growl-style notifications that float above the page content, use a Notification
How to use it
Default
The typical usage of a Well component.
Floating
A floating Well has a drop shadow that lifts the content off the page.
Multi-line
A multi-line Well allows for a title and long-form content.
Turnip greens yarrow endive cauliflower sea lettuce kohlrabi amaranth water. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.
Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke. Turnip greens yarrow endive cauliflower sea lettuce kohlrabi amaranth water.
Recessed
A recessed Well has a background to differentiate it from the rest of the page.
Configuration
- Name9.5.1•View source•View on npm
- Installnpm install @zendeskgarden/react-notifications
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Well } from '@zendeskgarden/react-notifications'
API
Well
Prop name | Type | Default | Description |
---|---|---|---|
isFloating | boolean | Applies a drop shadow | |
isRecessed | boolean | Applies a background color |
Well.Paragraph
Extends HTMLAttributes<HTMLParagraphElement>
Well.Title
Extends HTMLAttributes<HTMLDivElement>
Prop name | Type | Default | Description |
---|---|---|---|
isRegular | boolean | Applies regular (non-bold) font weight |