feat: #3607228 Put the design's icons on the delivery cards and space them

Rajab Natshahrequested to merge
issue/horizonaid-3607228:3607228-delivery-card-icons into 1.0.x

Puts the design's own icons on the four how-we-deliver cards, and fixes the spacing around them.

Icons

Each card carries a 56px tile at 12px radius — brand blue or yellow, alternating with the card's tint — holding the design's SVG at 28px. Cell for cell as the design places them: people top-left, check top-right, handshake bottom-left, magnifier bottom-right.

The tile is an HTML Code atom in the card's content slot, not the Icon Text Card's own icon_image. That prop is an object, and Canvas does not pass object props into a content template (#3613652, closed as won't fix). code is a string prop, so it renders. Inlining the SVG markup was the first attempt and fails validation — the 6.5KB handshake trips the prop's (.|\r?\n)* pattern — so each snippet references the file instead and stays near 275 characters.

Depends on vartheme_bs5_horizonaid !14, which adds the four SVGs as theme assets. Merge that first or the icons 404.

Spacing

  • A card's two stacked siblings share one grid column, so the grid's vertical gutter never applied and the rows touched at 0px. An explicit spacer now gives 32px, against the design's 30px.
  • Title is a level-4 heading, so it renders at the design's 20px, with 16px to the card text.

Measured on a clean install: cards 314px tall against the design's 296px, 24px across (design 32px), 32px down (design 30px), tiles and glyphs exact. The 8px shortfall across is the nearest the section's gutter scale allows — gx-4 is 24px and gx-5 is 48px.

AI-Generated: Yes

Checkpoints:

  • File an issue
  • Addition/Change/Update/Fix
  • Testing to ensure no regression
  • Automated unit testing coverage
  • Automated functional testing coverage
  • UX/UI designer responsibilities
  • Readability
  • Accessibility
  • Performance
  • Security
  • Developer Documentation
  • User Guide Documentation
  • Reviewed by human
  • Code review by maintainers
  • Full testing and approval
  • Credit contributors
  • Review with the product owner
  • Release notes snippet
  • Release
Edited by Rajab Natshah

Merge request reports