WordPress / twentytwentyfive

148 stars 102 forks source link

Block Patterns - CTA - Grid layout with products and link #68

Closed juanfra closed 1 month ago

juanfra commented 2 months ago

Description

🛠️ The goal of this issue is to track the implementation of the Call to action - Grid layout with products and link pattern. 🧑‍💻 The implementation must follow the pattern creation guidelines, and should be assigned to its appropriate category. 🎨 Figma design

CTA_ Grid layout with products and link

karmatosed commented 2 months ago

Assigning to myself but also noting this is blocked by presets #36

carolinan commented 2 months ago

This is no longer be blocked.

graylaurenm commented 1 month ago

I will give this a go.

graylaurenm commented 1 month ago

Questions:

  1. Should the text at the top ("Our online store.") be a heading?
  2. Should the text at the top be centered?
  3. Please check the following locations and let me know if you want me to swap to a preset or hardcoded value:
    • Heading: font-size and letter-spacing hardcoded
    • Grid text: font-size preset (18px instead of 16px)
    • "$30": font-size hardcoded
  4. Should I use a class and CSS to force the square aspect ratio on all grid items? For example, in my pull request you'll notice that if a smaller screen doesn't have an image in its row, those items won't be as tall as mocked.
  5. Thoughts on implementation of grid here? On mid-size devices the last row may not be full.
graylaurenm commented 1 month ago

@beafialho can you address the above questions when you have a free moment?

beafialho commented 1 month ago

I left a comment here.