Batch B: card polish (shadow, padding, dividers) - #7
Conversation
- Light drop shadow on every card (via filter, so it coexists with the top-accent box-shadow and follows the rounded corners). - Slightly more card padding. - New "impact" card style: square top corners, rounded bottom. - Card dividers are now full-width and 5px. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
Polishes the renderer’s CardsBlock presentation by adjusting card visual styling and exposing a new “impact” style option in the block config.
Changes:
- Add a light
filter: drop-shadow(...)on each card and increase default padding ($normal-margin * 1.25). - Make card dividers full-width and thicker (5px) while preserving per-card color cycling.
- Introduce a new
impactcard style (square top corners, rounded bottom) and add it to thecard_styleconfig options.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/flex-page-renderer/src/blocks/CardsBlock.scss | Adds drop shadow + padding increase, updates divider styling, and defines card_style_impact (including custom-accent behavior). |
| packages/flex-page-renderer/src/blocks/CardsBlock.config.ts | Adds Impact as a selectable card_style option in the CardsBlock config UI. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
TomWoodward
left a comment
TomWoodward
left a comment
There was a problem hiding this comment.
need to add a sample of the new layout on https://openstax.github.io/flex-pages/cards-block (
)| type: 'card_style'; | ||
| id: string; | ||
| value: 'rounded' | 'square'; | ||
| value: 'rounded' | 'square' | 'impact'; |
There was a problem hiding this comment.
this is more of a visual design question, but i feel like we don't need 3 (or 4) different card styles. if we can get some attention on the overall visual cohesion of the site, i think we can probably keep the variant count down
There was a problem hiding this comment.
i'm going to remove this and keep the PR just about the shadow/padding/divider polish ✨
Removes the impact card_style option and its SCSS in response to review feedback favoring fewer card variants. The shadow, padding, and divider polish is unaffected. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
mwvolo
changed the title
Batch B — card polish (renderer)
filter: drop-shadow(...)(notbox-shadow) so it coexists with the CORE-2301 top-accent box-shadow and follows the rounded corners.$normal-margin→× 1.25).impactcard style — square top corners, rounded bottom (border-radius: 0 0 1rem 1rem).Verification
typecheck, lint, build pass.
Coordination / release order
Touches
CardsBlock.scss+card_styleoptions, overlapping the CORE-2301 cards PR (#5) — branched offmain, so expect a small merge reconciliation (padding lines + theimpactaccent rule vs CORE-2301's accent rework). Pairs with the openstax-cms Batch B PR; reaches prod via arenderer-1.xtag + os-webview bump.🤖 Generated with Claude Code