⊞ Component
Grid Banner
Responsive CSS grid of banner cards with configurable column count, hover effects, and media support.
Live Preview
Usage
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's","media":{"type":"image","url":"/women.jpg"}}]'
></grid-banner>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| 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 |