Offers Grid

Can be used for general offers or an advent calendar layout.

Interactive elements are BUTTONs, inactive are DIVs.

Clicking the revealed content will either load and URL or open a modal, depending on the data attributes.

In this demo:

Offer Date Active Opened Action
1 past no no URL
2 past no yes URL
3 past yes no URL
4 past yes yes Modal
5 today yes no Modal
6 future yes no URL
7 future yes yes URL
8 future yes no URL

Default layout

  1. 1
  2. 2
    OFFER 2
  8. 8

Max Items per row

Set with a '--max-items-per-row' CSS custom property in an inline 'style' attribute.

  1. 1
  2. 2
    OFFER 2
  8. 8

'Doors' mode

With the 'offers-grid--doors' modifier class (and extra HTML).

  1. 1
  2. 2
    OFFER 2
  8. 8

Example 'advent calendar'

Inside a 'section-with-bg-img', with 'doors' and '--max-items-per-row' of 5.

  1. 1
  2. 2
    OFFER 2
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25