Chronos UI/ Grid Banner
View Source
⊞ Component

Grid Banner

Responsive CSS grid of banner cards with configurable column count, hover effects, and media support.

npm install @chronos-ui/core

Interactive Demo Playground

<grid-banner> Playground
⚙️ Configure Properties
❌ Invalid JSON Formatting
Array of items to display. { id, title, media, mapLinks }
3
Number of columns in the grid layout.
Applies shimmer loading skeleton.

Usage Code Generator 

import GridBanner from '@chronos-ui/core/react/GridBanner';
import '@chronos-ui/core/theme.css';

const items = [
  { id: '1', title: "Women's", media: { type: 'image', url: '/women.jpg' }, mapLinks: [{ url: '/women' }] },
  { id: '2', title: "Men's",   media: { type: 'image', url: '/men.jpg' },   mapLinks: [{ url: '/men' }] },
  { id: '3', title: 'Footwear', media: { type: 'image', url: '/shoes.jpg' }, mapLinks: [{ url: '/shoes' }] },
];

<GridBanner items={items} columns={3} />
<script lang="ts">
  import GridBanner from '@chronos-ui/core/svelte/GridBanner.svelte';
  const items = [
    { id: '1', title: "Women's", media: { type: 'image', url: '/women.jpg' } },
  ];
</script>

<GridBanner {items} columns={3} />
<script type="module"
  src="node_modules/@chronos-ui/core/webcomponents/GridBanner.js"></script>

<grid-banner
  columns="3"
  items='[{"id":"1","title":"Women&apos;s","media":{"type":"image","url":"/women.jpg"}}]'
></grid-banner>

Props API Reference

PropTypeDefaultDescription
items required GridBannerItem[] — Array of card items to display in the grid
columns number undefined Number of grid columns on desktop (default: 3); collapses to 2 at 768 px, 1 at 480 px
className string undefined Additional CSS class names on the root element
isLoading boolean undefined Applies shimmer skeleton animation to all cards
lazyLoad boolean undefined Defer mounting card media until the grid scrolls near the viewport (default: true)
lazyThreshold number undefined IntersectionObserver threshold, 0-1 (default: 0.1)
lazyRootMargin string undefined IntersectionObserver rootMargin (default: '200px')