Markup and style for cards organism #21
Conversation
dmontesi
commented
Jan 8, 2026
dmontesi
commented
- Markup and styles for cards module utilizing current grid utility columns
✅ Deploy Preview for imarc-pronto ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
This PR adds a new "cards" organism component that provides a responsive grid layout for displaying card molecules. The implementation follows established project patterns using CSS Grid with custom properties for flexible configuration.
Changes:
- Added SCSS styles for the cards organism with responsive grid layout and multiple modifier classes
- Created HTML documentation demonstrating usage examples for different column configurations
- Integrated the new cards organism into the main organisms index
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| resources/styles/organisms/index.scss | Added @forward directive for the new cards organism (alphabetically ordered) |
| resources/styles/organisms/cards/index.scss | Implemented responsive grid layout with CSS custom properties, supporting 1-5 columns and modifiers for gap spacing, centering, and stretching |
| resources/styles/organisms/cards/cards.html | Provided HTML documentation with examples demonstrating default grid and 2-5 column layouts using the -stretch modifier |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Could you make the card layouts a bit more responsive? At least one breakpoint in between single column and all columns, though this seems like it'd be a good place to use repeat(auto-fit) or auto-fill and make the wrapping not tied to specific breakpoints. |
