Box Shadow
Category: BasicUse _sd[-*] style classes to independently apply shadows to elements. In this framework, shadows are categorized by style rather than size. For example, shadows can simulate borders without occupying ...
Basic Usage
Apply the _sd class to any element to create a light gray semi-transparent shadow.
- Output
- HTML
-
- _sd
-
Standard Shadows
This framework provides a set of commonly used shadow style classes:
| Class Name | Description | Example |
|---|---|---|
| _sd | Default shadow | <div class="_sd"></div> |
| _sd-lt | Light shadow (lt = light) | - |
| _sd-dk | Dark shadow (dk = dark) | - |
| _sd-soft | Diffused soft shadow | - |
| _sd-hard | Prominent hard shadow | - |
| _sd-bd | Shadow that simulates a border | - |
Note: Shadow classes are mutually exclusive - only one can be applied to an element at a time.
- Output
- HTML
-
- _sd
- _sd-lt
- _sd-dk
- _sd-soft
- _sd-hard
-
Functional Shadows
Shadows aren't just for creating box shadows - they can also simulate borders and outlines.
Here are some built-in functional shadow classes:
| Class Name | Description | Example |
|---|---|---|
| _sd-bd | Creates a 1px outer border using shadow | - |
| _sd-bd-in | Creates a 1px inner border with shadow | - |
| _sd-ring | Simulates focus outline | - |
- Output
- HTML
-
- _sd-bd
- _sd-bd-in
- _sd-ring
-
Colored Shadows
By default shadows are semi-transparent black. For more design flexibility, the framework provides a set of colored shadow classes that match theme colors:
| Class Name | Description | Example |
|---|---|---|
| _sd-prim | Primary theme shadow | <div class="_sd-prim _bd-prim"></div> |
| _sd-error | Error theme shadow | - |
| _sd-succ | Success theme shadow | - |
| _sd-info | Info theme shadow | - |
| _sd-warn | Warning theme shadow | - |
| _sd-issue | Issue theme shadow | - |
- Output
- HTML
-
- _sd-prim
- _sd-error
- _sd-succ
- _sd-info
- _sd-warn
- _sd-issue
- _sd-prim
- _sd-error
- _sd-succ
- _sd-info
- _sd-warn
- _sd-issue
-