Confirm?

Are you sure you want to proceed?
서
서영준

Card Data Template Design

Clone & Customize via AI

This Blazor card grid page presents a searchable collection of cards using Bootstrap styling, featuring item templates with images, badges, and interactive buttons.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Responsive card grid layout with Bootstrap classes - Search input filtering cards by title or subtitle - Custom card item templates showing image, title, subtitle, badge, description, and controls - Button interaction with event callbacks and event propagation control - Empty state template for no matching results ## Key components - InputText for search input binding - Custom generic CardGrid component with RenderFragment templates - Bootstrap classes like container, row, col-*, card, badge, btn - EventCallback for card clicks and button clicks ## How it works - Items are filtered based on a search string using LINQ - Two-way binding on InputText with @bind-Value and OnSearchInput event - CardGrid renders items using ItemTemplate and invokes OnCardClick callback on card click - Button inside card uses @onclick:stopPropagation to prevent parent card click event - Console logging used for click event demonstration ## Styling - Uses Bootstrap 5 for grid layout and styling - Custom CSS enforces fixed image height with object-fit cover - Responsive column classes adjust card count per row ## Reuse steps 1. Include Bootstrap CSS in the project 2. Add CardGrid component file and CardItemModel class 3. Use CardGrid with ItemTemplate and bind Items and events 4. Customize columns via ColumnClass parameter 5. Wire up data source and event handlers as needed ## Limitations & next steps - This demo uses static in-memory data and Console/JS logging - Integration with backend data services and navigation handlers is required - Localization and accessibility enhancements can be added - Cards can be extended with more complex interactions or dialogs