Panel
A panel encloses a section of the document with a border and whitespace.
Midori is a Japanese word for green, although its boundaries are not the same as in English. Ancient Japanese did not have this distinction: the word midori only came into use in the Heian period, and at that time (and for a long time thereafter) midori was still considered a shade of ao.
<section class="panel">
<p>
Midori is a Japanese word for green, although its boundaries are not the same as in English.
Ancient Japanese did not have this distinction: the word midori only came into use in the
Heian period, and at that time (and for a long time thereafter) midori was still considered
a shade of ao.
</p>
</section>
Well
Use the well class on <div>s or <aside>s to apply the visual cue of ancillary content.
<aside class="well">
<h3>Ao (青) vs. Midori (緑)</h3>
<p>
Midori is a Japanese word for green, although its boundaries are not the same as in English.
Ancient Japanese did not have this distinction: the word midori only came into use in the
Heian period, and at that time (and for a long time thereafter) midori was still considered
a shade of ao.
</p>
</aside>
If you add a <header> or <footer> inside the well, they will be visually separated from
the content.
<aside class="well">
<header>
<h3>Trivia</h3>
</header>
<p>
Educational materials distinguishing green and blue only came into use after World War II,
during the Occupation: thus, even though most Japanese consider them to be green, the word
ao is still used to describe certain vegetables, apples and vegetation.
</p>
</aside>
Small well
The well-small modifier class reduces the padding and borders of the well.
<aside class="well well-small">
<h3>Ao (青) vs. Midori (緑)</h3>
<p>
Midori is a Japanese word for green, although its boundaries are not the same as in English.
Ancient Japanese did not have this distinction: the word midori only came into use in the
Heian period, and at that time (and for a long time thereafter) midori was still considered
a shade of ao.
</p>
</aside>