HAVIT Blazor

HxCard #

Bootstrap card component.

About #

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Basic usage #

Grey area
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Content types #

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

Body #

This is some text within a card body.

Titles, text and links #

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

Featured
Special title treatment

With supporting text below as a natural lead-in to additional content.

2 days ago
Special title treatment

With supporting text below as a natural lead-in to additional content.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Navigation with HxTabPanel #

With <HxTabPanel Variant="TabPanelVariant.Card">, the tab navigation is placed in the card header and tab contents go into the card body.

This is the first tab.
This is the second tab. This tab is initially active.
This is the disabled tab.

Images #

Grey area
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Grey area

Image overlays #

Grey area
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

List groups #

Create lists of content in a card with a flush list group.

Card header
An item
A second item
A third item
A fourth item
And a fifth one
Card footer

Variants #

Header
Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Secondary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Warning card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Info card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Light card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header
Dark card title

Some quick example text to build on the card title and make up the bulk of the card's content.

API #

Parameters #

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying HTML element.
BodyCssClass string Additional CSS class for the body.
BodyTemplate RenderFragment The body content.
ChildContent RenderFragment The generic card content (outside .card-body).
CssClass string Additional CSS classes for the card container.
FooterCssClass string Additional CSS class for the footer.
FooterTemplate RenderFragment The footer content.
HeaderCssClass string Additional CSS class for the header.
HeaderTemplate RenderFragment The header content.
ImageAlt string The value of the image's alt attribute.
ImageCssClass string Additional CSS class for the image.
ImageHeight int? The value of the image's height attribute.
ImagePlacement CardImagePlacement Placement of the image. The default is CardImagePlacement.Top.
ImageSrc string Image to be placed in the card. For the image position, see ImagePlacement.
ImageWidth int? The value of the image's width attribute.
Settings CardSettings Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters).

Static properties #

Property Type Description
Defaults CardSettings Application-wide defaults for HxCard and derived components.

HxCardText #

Bootstrap card-text component.

API #

Parameters #

Name Type Description
ChildContent RenderFragment Text content.
CssClass string Additional CSS class(es) for the card-text element.

HxCardTitle #

Bootstrap card-title component.

API #

Parameters #

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be applied to the underlying HTML element.
ChildContent RenderFragment Text content.
CssClass string Additional CSS class(es) for the card-title element.
HtmlElement string Underlying HTML element for the card-title. The default is h5.

HxCardSubtitle #

Bootstrap card-subtitle component.

API #

Parameters #

Name Type Description
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying HTML element.
ChildContent RenderFragment Text content.
CssClass string Additional CSS class(es) for the card-subtitle element.
HtmlElement string Underlying HTML element for the card-subtitle. The default is h6.
An unhandled error has occurred. Reload 🗙