A Well is a styled block container for related content of lower importance.
Base
Use the base class pier-well to wrap the content to be displayed in the well. Typical use should wrap pier-section elements for it's padding.
This is some well content
HTML markup
<div class="pier-well"><div class="pier-section"><p class="pier-body-text">This is some well content</p></div></div>
Color
Use the modifier classes pier-well--primary, pier-well--error, pier-well--green, or pier-well--blue to change the Well theme.
This is a primary well
This is a red well
This is a green well
This is a blue well
HTML markup
<div class="pier-well pier-well--primary"><div class="pier-section"><p class="pier-body-text pier-body-text--primary">
This is a primary well
</p></div></div><div class="pier-well pier-well--error"><div class="pier-section"><p class="pier-body-text pier-body-text--error">This is a red well</p></div></div><div class="pier-well pier-well--green"><div class="pier-section"><p class="pier-body-text pier-body-text--green">This is a green well</p></div></div><div class="pier-well pier-well--blue"><div class="pier-section"><p class="pier-body-text pier-body-text--blue">This is a blue well</p></div></div>
Sizes
Use the modifier classes pier-well--sm, pier-well--md, or pier-well--lg to change the Well theme.
This is a small well
This is a medium well
This is a large well
HTML markup
<div class="pier-well pier-well--sm"><div class="pier-section pier-section--sm"><p class="pier-body-text">This is a small well</p></div></div><div class="pier-well pier-well--md"><div class="pier-section pier-section--md"><p class="pier-body-text">This is a medium well</p></div></div><div class="pier-well pier-well--lg"><div class="pier-section pier-section--lg"><p class="pier-body-text">This is a large well</p></div></div>
Dark
Use the modifier class pier-well--dark to change the style of the Well for dark UI themes.
This is a dark well
This is a dark primary well
This is a dark red well
This is a dark green well
This is a dark blue well
HTML markup
<div class="pier-well pier-well--dark"><div class="pier-section"><p class="pier-body-text pier-body-text--dark">This is a dark well</p></div></div><div class="pier-well pier-well--dark pier-well--primary"><div class="pier-section"><p class="pier-body-text pier-body-text--dark pier-body-text--primary">
This is a dark primary well
</p></div></div><div class="pier-well pier-well--dark pier-well--error"><div class="pier-section"><p class="pier-body-text pier-body-text--dark pier-body-text--error">
This is a dark red well
</p></div></div><div class="pier-well pier-well--dark pier-well--green"><div class="pier-section"><p class="pier-body-text pier-body-text--dark pier-body-text--green">
This is a dark green well
</p></div></div><div class="pier-well pier-well--dark pier-well--blue"><div class="pier-section"><p class="pier-body-text pier-body-text--dark pier-body-text--blue">
This is a dark blue well
</p></div></div>
