- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Opacity checkerboard
Component status | Contribution |
---|---|
Current version | @spectrum-css/opacitycheckerboard@2.1.3 |
Released | September 13, 2024 |
Alpha | @spectrum-css/opacitycheckerboard@1.0.0-alpha.0 |
Released | June 23, 2023 |
S2-foundations | @spectrum-css/opacitycheckerboard@3.0.0-s2-foundations.15 |
Released | October 4, 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>