- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Opacity Checkerboard
| Component status | Contribution |
|---|---|
| Last released | August 16, 2023 |
| Current version | @spectrum-css/opacitycheckerboard@1.0.4 |
Usage notes
Opacity checkerboard is used with other components to highlight opacity.
Variants
Opacity CheckerboardContribution
Show markup
<div style="inline-size: 100px; block-size: 100px;">
<div class="spectrum-OpacityCheckerboard">
</div>
</div>
Opacity Checkerboard with color overlayContribution
Show markup
<div style="inline-size: 100px; block-size: 100px;">
<div class="spectrum-OpacityCheckerboard"></div>
<div style="background-color: rgba(255, 0, 0, 0.5); inline-size: 100%; block-size: 100%; position: relative; inset-block: -100%"></div>
</div>