Product Navigation Grid

A grid of navigational items with options for an image, text, or button.

View a live demo of this module.

Content

  • Add navigational items with thumbnail image, title, heading, text, and button
  • Change how many items to show per row
  • Change spacing between rows and columns
  • Change the max height of the items on mobile

Styles

  • Have module overlap the section above or below it
  • Add a load in animation to the navigational items (fade in, up, right, down ,or left)
  • Set dark mode on the front tile (text that shows when not hovering on item)
  • Change overlay color of the front tile
  • Set dark mode on the back tile (text that shows on hover)
  • Change text alignment of back tile
  • Change background color of back tile

product-nav