Overview
Source: ./src/fragments/shadow/OCShadowV1.mdx
Shadow
The shadow utility provides CSS classes that apply consistent drop-shadow styles to elements across OTTO Components.
Skip to:
Class naming convention
Classes follow the {prefix}-{property}-{variant} format.
| Element | Description |
|---|---|
prefix |
Always oc for OTTO Components |
property |
shadow for the drop-shadow utility |
variant |
One of above, canvas, stacked, or sticky |
Variants
The following classes define the available drop-shadow values, with the canvas and stacked variants using unset to neutralize inherited shadows.
| Class | Value |
|---|---|
oc-shadow-above |
drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.10)) |
oc-shadow-canvas |
unset |
oc-shadow-stacked |
unset |
oc-shadow-sticky |
drop-shadow(0px 3px 5px rgba(0, 0, 0, 0.30)) drop-shadow(0px 9px 10px rgba(0, 0, 0, 0.10)) |
Usage guidelines
Add the appropriate CSS class to any element to apply the desired drop-shadow.
For example, the oc-shadow-above class applies a subtle shadow.
<div class="oc-shadow-above">
<!-- Content with subtle shadow -->
</div>
Find additional usage examples in the shadow demo.
Accessibility
Review the accessibility documentation for general accessibility guidance.
Shadow (OCShadowV1.stories.ts)
Demo: Shadow
Story: fragments-shadow--shadow · tags:
Story source (TypeScript, verbatim from Storybook)
{
name: "Demo: Shadow",
render: allShadows
}