Blazor Kanban Board - Card Template Customization
This demo passes automated axe checks with 0 violations — semantic markup, ARIA, full keyboard operation, visible focus. Section 508 conformant
Accessibility report
VPAT
Menu - 5 items | Order - 4 items | Ready to Serve - 4 items | Delivered - 4 items |
|---|
[5]Menu
| [4]Order
| [4]Ready to Serve
| [4]Delivered
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
This sample demonstrates how to customize Kanban cards using templates by visualizing a pizza kitchen order tracker. In this demo, cards include icons, images, tags, prices, and order details for enhanced visual context across menu, order, ready-to-serve, and delivered columns.
Customize the default card design using the Template property of KanbanCardSettings to fully control card content and layout.
Additional essential interactions that enhance analysis and control are also featured:
- Card Template: Render a fully custom layout for each card using Razor templates.
- Columns: Group cards by preparation stage such as Menu, Order, Ready to Serve, and Delivered.
- Tooltip: Show extra card details on hover, reducing on-card clutter.
Key interactive features demonstrated in this sample include:
- Image Preview: Each card displays a pizza image that visually identifies the menu item.
- Order Details: The order ID, description, size, and category are rendered inside the custom card layout.
- Tag Chips: Ingredient tags are rendered as chips for quick visual scanning of toppings.
- Price and Date: The price and order date are surfaced inside the card to provide order context at a glance.
The Template Composition highlights the building blocks of a custom card:
- Image Column: The first column renders the menu item image pulled from the configured asset path.
- Stacked Header and Content: The remaining columns stack the title, description, tags, and date for compact display.
- Status Footer: The card footer changes its layout based on the order status to highlight key actions.
Looking for the full Blazor Kanban component overview, features, pricing, and documentation? Visit the Blazor Kanban page.