Sections that use the grid system (e.g. blog pages > Related Articles section) follow the grid system design, i.e., the gutter between the cards is fixed (for each grid system breakpoint), while the cards expand horizontally (similar to how it currently is on https://news.sap.com/blog/
Constraints:
Implement them for all five SAP breakpoints (XS, S, M, L, XL)
Fixed gutter width: according to the design documentation in Frontify, the gutter (here: horizontal spacing between elements) shall have a fixed width (within each breakpoint)
For breakpoint XL, the grid shall be centered horizontally
"("Within a breakpoint range, the grid has a fluid behavior. At the XL size, the grid has a fixed width when the screen width is 1600px or greater.")" - from: https://sap.frontify.com/document/223141#/layout/grid-breakpoints (identical information as in Figma)
@pahupe , @benpeter I have this PR (#94 ) which partially addresses the margins and gutters as per spec. The blocks (like cards etc. still need to adopt the global tokens)
Goals:
Constraints:
Missing information:
Validation: Validate fixed gutter width using these pages:
References:
Grid System:
Tiles (for cards):