Media & Embeds
Content
Responsive media containers for images, native video, audio players, and iframes. Applies theme borders, elevation shadows, and rounded corners by default.
| Name | Description |
|---|---|
img |
Responsive image with theme radius and raised surface shadow. |
video |
Native video element with border and elevation. |
.video-container |
Responsive 16:9 media embed container for videos and iframes. |
.stnd-icon |
Icon container unsetting default media borders and shadows to inherit currentColor. |
figure |
Grid container for media and associated captions. |
figcaption |
Centered italic caption text for figures. |
img.fx |
Image explicitly styled with theme border and radius. |
img.nofx |
Image stripping borders, shadows, and radii. |
Image Zoom & Lightbox
Content
Responsive image handling with interactive zoom functionality. Progressively enhanced: without JavaScript, provides click-and-hold zoom. With JavaScript, provides a full frosted-glass lightbox experience.
| Name | Description |
|---|---|
html:not(.js-image-zoom-enabled) |
img:active Fallback CSS-only zoom on click-and-hold. |
.image-zoom-overlay |
Fullscreen glassmorphic lightbox overlay created dynamically by JS. |
.image-zoom-overlay.is-visible |
Active visible state for the lightbox overlay. |
html.image-zoomed-active |
Body scroll lock class applied when lightbox is active. |
data-no-zoom? |
Attribute to prevent zoom interaction on icons or avatars. |
since 0.1.0
All classes
VIDEO EMBEDS
| Class | Declares |
|---|---|
.video-container |
position: relative |
.stnd-icon |
line-height: 0 |
.stnd-icon, .stnd-icon img, .stnd-icon svg |
box-shadow: none |
.image-zoom-overlay |
position: fixed |
.image-zoom-overlay.is-visible |
opacity: 1 |
.image-zoom-overlay img |
display: block |
.image-zoom-overlay.is-visible img |
opacity: 1 |