Well 🐋
All Kinds of Well
This is some sample content for this beautiful default well. The purpose is to notice the user about something that is going to happen.
Default
This is some sample content for this beautiful primary well. The purpose is to notice the user about something that is going to happen.
Primary
This is some sample content for this beautiful success well. The purpose is to notice the user about something that is going to happen.
Success
This is some sample content for this warnful warning well. The purpose is to notice the user about something that is going to happen.
Warning
This is some sample content for this dangerously looking danger well. The purpose is to notice the user about something that is going to happen.
Danger
<!-- Default Well -->
<div class="well">...</div>
<!-- Primary Well -->
<div class="well -primary">...</div>
<!-- Success Well -->
<div class="well -success">...</div>
<!-- Warning Well -->
<div class="well -warning">...</div>
<!-- Danger Well -->
<div class="well -danger">...</div>
Notice:
Well should be used when you want the content to stand out of the crowd. Please never use two wells at the same time and in the same place. Wells can have different appearances by adding the following classes: .-info .-success .-warning .-danger. Sizes of wells could be varied based on the size of its containing element. It is recommended to determine the size of a well by using .cols-* layout classes.
Well with Icon
This is some sample content for this beautiful default well. The purpose is to notice the user about something that is going to happen.
<div class="well">
<svg class="icon-svg">...</svg>
...
</div>
Notice:
To include an icon in a well, simply use it like any other icon. Also, only use one icon per well.
Usage
Well could be text-only, or content-rich, and could be implemented in various places across the system. Please see below for a few examples.
Patrón
By signing up you're agreed to the Pacific Ocean's terms and conditions of being forever at sea like a 🐋.
Check out the aquarium where my relatives are at. — said 🐋
Notice:
- As mentioned above, a well can hold many things. But don't put an entire webpage or a large component inside it because, at the end of the day, a well is originally used to add contrast into an important piece of information.
- Styling the content inside a well is relatively easy. Since all wells are
display: flex;by default, all the elements inside could easily be arranged using that method. See more here.
Related mixin
@mixin well-generator($border-color, $text-color) {
border-left: 3px solid $border-color;
color: $text-color;
}
Example
Usage:
@include well-generator($primary-color-light-80, $primary-color-dark-20);
CSS Output:
border-left: 3px solid #c7e6fa;
color: #1077bc;