●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- A reusable recipe card component rendered as a Bootstrap-styled card with image, title, description, metadata (cooking time, calories) and a call-to-action button.
- Responsive two-column layout using Bootstrap grid (col-md-5 / col-md-7).
- Hover effects and image scale animation via a scoped CSS file (RecipeCard.razor.css).
## Key components
- Razor component: RecipeCard.razor and demo page RecipeCardDemo.razor
- Component parameters: [Parameter] properties for Title, ImageUrl, Description, CookingTime, Calories, RecipeUrl
- HTML elements: <img> for responsive media, <a> for CTA
- Bootstrap classes: container, row, col-md-*, card, btn and utility classes
- FontAwesome icons used for visual metadata
## How it works
- Data flows into the component through [Parameter] properties; the demo page passes literal values to render a single card.
- No two-way binding or EditForm is used; the component is presentational and stateless aside from parameters.
- Interactions are simple navigation via the anchor (RecipeUrl). Hover state is implemented with CSS transitions on the .recipe-card and .recipe-image.
- Icons are inserted via <i class="fas ..."> elements; alt text for the image is bound to the Title parameter.
## Styling
- Uses Bootstrap grid and utilities for layout and spacing.
- Visual polish implemented in RecipeCard.razor.css: rounded corners, shadow, image object-fit:cover, hover translate and scale transitions, responsive max-height adjustments.
- Mobile responsiveness relies on Bootstrap breakpoints (media query adjustments at max-width:768px) and column stacking.
## Reuse steps
1. Add RecipeCard.razor, RecipeCard.razor.css and RecipeCardDemo.razor to a Blazor project (Pages or Shared folder as desired).
2. Ensure Bootstrap CSS is included (default Blazor template includes it) and add FontAwesome for icons (link in index.html/_Host.cshtml or package).
3. Import the component namespace where used or add @using if placed in a non-global folder.
4. Use the component: <RecipeCard Title="..." ImageUrl="..." CookingTime="..." Calories="..." RecipeUrl="..." />
5. Replace placeholder images/URLs with application data or bind to a recipe model in a parent component.
## Limitations & next steps
- This is a single presentational component generated by Instruct UI; no backend services, state management, or authentication are wired.
- No data validation, editing UI, or paging/filtering; integrate with a recipe service or parent component to render lists, filtering, or CRUD operations.
- Accessibility improvements recommended: explicit ARIA roles, focus styles for the CTA, and verification of icon semantics; ensure ImageUrl fallback handling.
- Performance options: lazy-loading images (loading="lazy"), responsive srcset, and skeleton placeholders for async data.
- Extend with unit/UI tests, localization, and stronger type models for recipe data when integrating into an app.