A collection of reusable Blazor components styled with Bootstrap 5.3+ that can be used with the JFS prefix (JFS.Card, JFS.CardHeader, JFS.CardBody, etc.)
$ dotnet add package JFS.ComponentsA collection of reusable Blazor components styled with Bootstrap 5.3+ that provide a consistent UI experience with the JFS prefix.
Install the package via NuGet Package Manager:
dotnet add package JFS.Components
Or via Package Manager Console in Visual Studio:
Install-Package JFS.Components
Ensure Bootstrap 5.3+ is included in your project. Add this to your wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server):
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
Add the JFS Components CSS to your project:
<link href="_content/JFS.Components/jfs-components.css" rel="stylesheet" />
Add the following to your _Imports.razor file:
@using JFS.Components
A wrapper component that creates a Bootstrap card container.
Parameters:
ChildContent (RenderFragment): The content to render inside the cardCssClass (string): Additional CSS classes to applyAdditionalAttributes (Dictionary<string, object>): Additional HTML attributesA component for the card header section.
Parameters:
ChildContent (RenderFragment): The content to render inside the card headerCssClass (string): Additional CSS classes to applyAdditionalAttributes (Dictionary<string, object>): Additional HTML attributesA component for the main card content area.
Parameters:
ChildContent (RenderFragment): The content to render inside the card bodyCssClass (string): Additional CSS classes to applyAdditionalAttributes (Dictionary<string, object>): Additional HTML attributesA component for the card footer section.
Parameters:
ChildContent (RenderFragment): The content to render inside the card footerCssClass (string): Additional CSS classes to applyAdditionalAttributes (Dictionary<string, object>): Additional HTML attributes<JFS.Card>
<JFS.CardHeader>
<h5 class="card-title mb-0">Card Title</h5>
</JFS.CardHeader>
<JFS.CardBody>
<p class="card-text">This is the main content of the card.</p>
<button class="btn btn-primary">Action Button</button>
</JFS.CardBody>
</JFS.Card>
<JFS.Card CssClass="shadow-lg border-primary">
<JFS.CardHeader CssClass="bg-primary text-white">
<h5 class="card-title mb-0">Featured Card</h5>
</JFS.CardHeader>
<JFS.CardBody>
<p class="card-text">This card has custom styling applied.</p>
</JFS.CardBody>
<JFS.CardFooter CssClass="text-muted">
<small>Last updated 3 mins ago</small>
</JFS.CardFooter>
</JFS.Card>
<JFS.Card id="special-card" data-testid="main-card">
<JFS.CardBody>
<h5 class="card-title">Card with Custom Attributes</h5>
<p class="card-text">This card has additional HTML attributes.</p>
</JFS.CardBody>
</JFS.Card>
<div class="row">
<div class="col-md-4">
<JFS.Card CssClass="h-100">
<JFS.CardHeader>
<h6 class="card-title mb-0">Card 1</h6>
</JFS.CardHeader>
<JFS.CardBody>
<p class="card-text">Content for the first card.</p>
</JFS.CardBody>
</JFS.Card>
</div>
<div class="col-md-4">
<JFS.Card CssClass="h-100">
<JFS.CardHeader>
<h6 class="card-title mb-0">Card 2</h6>
</JFS.CardHeader>
<JFS.CardBody>
<p class="card-text">Content for the second card.</p>
</JFS.CardBody>
</JFS.Card>
</div>
<div class="col-md-4">
<JFS.Card CssClass="h-100">
<JFS.CardHeader>
<h6 class="card-title mb-0">Card 3</h6>
</JFS.CardHeader>
<JFS.CardBody>
<p class="card-text">Content for the third card.</p>
</JFS.CardBody>
</JFS.Card>
</div>
</div>
All components use the JFS prefix to avoid naming conflicts with other component libraries. The components are designed to work seamlessly with Bootstrap's CSS classes while providing additional customization options.
The components come with minimal additional styling that enhances Bootstrap's default card styling:
You can override any styling by providing custom CSS classes via the CssClass parameter or by targeting the component-specific CSS classes (e.g., .jfs-card, .jfs-card-header, .jfs-card-body, .jfs-card-footer).
This library supports all modern browsers that are compatible with:
Contributions are welcome! Please ensure that:
This project is licensed under the MIT License.