- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Opacity checkerboard
| Component status | Contribution |
|---|---|
| Current version | @spectrum-css/opacitycheckerboard@2.1.2 |
| Released | August 29, 2024 |
| Alpha | @spectrum-css/opacitycheckerboard@1.0.0-alpha.0 |
| Released | June 23, 2023 |
| S2-foundations | @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.12 |
| Released | August 2, 2024 |
Usage notes
Opacity checkerboard is a class used to highlight background color opacity.
Variants
Opacity checkerboardContribution
Show markup
<div style="inline-size: 100px; block-size: 100px;">
<div class="spectrum-OpacityCheckerboard" style="inline-size: 100%; block-size: 100%;">
</div>
</div>
Opacity checkerboard with color overlayContribution
Show markup
<div style="inline-size: 100px; block-size: 100px;">
<div class="spectrum-OpacityCheckerboard" style="inline-size: 100%; block-size: 100%;"></div>
<div style="background-color: rgba(255, 0, 0, 0.5); inline-size: 100%; block-size: 100%; position: relative; inset-block: -100%"></div>
</div>