Confirm?

Are you sure you want to proceed?
l
lolhans

Blog Post Preview Section

Clone & Customize via AI

MudBlazor Blog Section renders a responsive grid of article cards using MudGrid and MudCard. Static view models provide title, excerpt, image and link and styling uses MudBlazor components.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Responsive card-based blog list using a grid layout. - Individual post tiles with image, title, excerpt and a "Read More" link. - Static `BlogPostViewModel` collection populated in `OnInitialized`. - Simple navigation via `MudButton` Href to post URLs. ## Key components - `MudContainer`, `MudGrid`, `MudItem` - `MudCard`, `MudCardMedia`, `MudCardContent`, `MudCardActions` - `MudText`, `MudButton` - `BlogPostViewModel` class and a local `_blogPosts` list ## How it works - The component populates a `List<BlogPostViewModel>` in `OnInitialized` and renders items with an `@foreach` loop. - Each item renders a `MudCard` with `MudCardMedia` for the image, `MudCardContent` for title/excerpt, and `MudCardActions` for the link button. - No two-way `@bind-` bindings are used; interaction is read-only navigation via Href on `MudButton`. - The code is self-contained and expects routes or server pages at the `Url` values; replace static data with an injected service for runtime data. ## Styling - Uses MudBlazor components and layout primitives; responsiveness is provided by `MudGrid` breakpoints (`xs`, `sm`, `md`) and `MudItem` sizing. - Visuals rely on MudBlazor theming (elevation, spacing, typography) rather than utility classes. - Cards include `Elevation` and consistent spacing for a clean, card-grid presentation. ## Reuse steps 1. Add the MudBlazor NuGet package and call `builder.Services.AddMudServices()` in `Program.cs`. 2. Import MudBlazor namespaces in `_Imports.razor` or the component file: `@using MudBlazor` and `@using MudBlazor.Services` as needed. 3. Include MudBlazor CSS and any required icons/theming in `index.html` or `_Host.cshtml` per MudBlazor setup docs. 4. Copy `BlogSection.razor` and `BlogPostViewModel.cs` into the project, adjust namespaces, and place component where desired. 5. Replace the static list with an injected data service or API call to load posts, add paging or lazy loading for larger datasets. ## Limitations & next steps - Page shows static sample data; no data services, caching, or authentication is wired. - No pagination, infinite scroll, or server-side rendering for large feeds; consider adding pagination and lazy image loading. - Accessibility enhancements (alt text management, keyboard focus, ARIA roles) and SEO-friendly markup are not implemented and require additional wiring. - Integrate a post service, configure routing for post URLs, and add unit/UI tests for rendering and navigation behavior.