-
Notifications
You must be signed in to change notification settings - Fork 1
Open
Milestone
Description
Summary
Add CSS support for the Items Aspect Ratio feature in Cards Collection blocks. Nova Blocks adds a SelectControl with presets (Original, Square 1:1, Landscape 4:3, Portrait 3:4) — Anima provides the CSS that makes each mode render correctly on both frontend and editor.
What this does
Forced aspect ratios (Square, Landscape, Portrait)
- Uses
aspect-ratio: var(--nb-card-media-aspect-ratio, auto)on stacked card items - Scoped to 2+ column grids (excludes full-width hero blocks)
- Editor fix: resets NB's degenerate
aspect-ratioformula on the media wrapper (which produces infinity when Minimum Container Height = None)
Original aspect ratio
- Removes the forced aspect ratio so each card's image dictates its own height
- Frontend: Reverses NB's stacked layout — makes media
position: staticso image height flows naturally, content overlays viaposition: absolute - Editor: Overrides NB's deeply nested media chain (
blob-mix→blob-mix__mask→blob-mix__media) to let image height flow up
Editor 3D Grid preview
- CSS-only checkerboard approximation using
nth-child(even)+transform: scale(0.88)
Files
src/scss/utility/_items-aspect-ratio.scss(new) — all aspect ratio CSSsrc/scss/utility.scss— imports the new filedist/css/utility.css,dist/css/utility-rtl.css— compiled output
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels