Well
Definition
A Well is a basic, generic container with variations for background color. The text color is also configurable via a CSS custom property.
Description
Use a Well to contain content in a less strict way than a Card.
Examples
Well
National Neighborhood Data Archive (NaNDA): Parks by Census Tract and ZIP Code Tabulation Area, United States, 2018
<div class="well">
<h2>
National Neighborhood Data Archive (NaNDA): Parks by Census Tract and ZIP
Code Tabulation Area, United States, 2018
</h2>
</div>Well
Variants of the background color are available for all the theme colors, using variant classes. Text will automatically turn the best contrast between white or black. Nested well text color will contrast its direct parent.
National Neighborhood Data Archive (NaNDA): Parks by Census Tract and ZIP Code Tabulation Area, United States, 2018
something
This is success!
<div class="well well-primary-500 stack">
<h2>
National Neighborhood Data Archive (NaNDA): Parks by Census Tract and ZIP
Code Tabulation Area, United States, 2018
</h2>
<div class="well well-primary-10">
<div class="stack">
<h3>something</h3>
<div class="well well-success">
<p>This is success!</p>
</div>
</div>
</div>
</div>Variables
CSS Custom Properties
// Changes text color for the well
--well-color
// Changes the background color of the well
--well-bg