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>Well AI
Hate filling forms? Let us help you
TurboCurator is ICPSR's proprietary tool that pre-fills metadata fields based on your study information. All you need to do is click the following button and provide a summary of your study including the time frame, geographic location, and subject details. You can always edit the recommendations we generate for you. Learn more about TurboCurator.
<div class="well well-ai">
<h2>Hate filling forms? Let us help you</h2>
<p>
TurboCurator is ICPSR's proprietary tool that pre-fills metadata fields
based on your study information. All you need to do is click the following
button and provide a summary of your study including the time frame,
geographic location, and subject details. You can always edit the
recommendations we generate for you. Learn more about TurboCurator.
</p>
</div>Variables
CSS Custom Properties
// Changes text color for the well
--well-color
// Changes the background color of the well
--well-bg