Shadows
Gives depth and dimension to an element.
Assign classes (.shadow)to an element or include the cs-make-shadow(depth) mixin.
Note: some shadows have hover states.
default
subtle
dark
float
<div class="container-fluid">
<div class="row">
<div class="gb-shadow col">
<div class="shadow"></div>
<small>default</small>
</div>
<div class="gb-shadow col">
<div class="shadow-subtle"></div>
<small>subtle</small>
</div>
<div class="gb-shadow col">
<div class="shadow-dark"></div>
<small>dark</small>
</div>
<div class="gb-shadow col">
<div class="shadow-float"></div>
<small>float</small>
</div>
</div>
</div>
| Depth | Description | Shadow | Hover |
|---|---|---|---|
| default | For cards and modals | 0 2px 8px rgba(0, 0, 0, 0.1) |
Yes |
| subtle | When you need to differentiate them for the background | 0 0 3px rgba(0, 0, 0, 0.1) |
Yes |
| dark | For more obvious differentiation from the background, such as a tooltip | 0 2px 8px rgba(0, 0, 0, 0.2) |
Yes |
| float | More depth and dimension to make an element appear as if to float over others. | 0 2px 32px rgba(0, 0, 0, 0.1) |
No |