Web Style Guide: Wells

HTML: Wells

A well is used to wrap a segment of content.

HTML: Wells

Hi, I'm a well.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

Well w/ callout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

<div class="well">
    ...
</div>

<div class="well callout">
    ...
</div>
Hi, I'm a red well.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

Red well w/ callout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

<div class="well well-red">
    ...
</div>

<div class="well well-red callout">
    ...
</div>
Hi, I'm a gray well.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

Gray well w/ callout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

<div class="well well-gray">
    ...
</div>

<div class="well well-gray callout">
    ...
</div>
Hi, I'm a blue well.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

Blue well w/ callout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

<div class="well well-blue">
    ...
</div>

<div class="well well-blue callout">
    ...
</div>
Hi, I'm a green well.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

Green well w/ callout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

<div class="well well-green">
    ...
</div>

<div class="well well-green callout">
    ...
</div>
Hi, I'm an orange well.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

Orange well w/ callout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

<div class="well well-orange">
    ...
</div>

<div class="well well-orange callout">
    ...
</div>
Hi, I'm a teal well.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

Teal well w/ callout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut eleifend neque.

<div class="well well-teal">
    ...
</div>

<div class="well well-teal callout">
    ...
</div>

Design, Tools & Training


Top