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 RenderMode="TabPanelRenderMode.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.

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 Body content.
ChildContent RenderFragment 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 Footer content.
HeaderCssClass string Additional CSS class for the header.
HeaderTemplate RenderFragment Header content.
ImageAlt string Image alt attribute value.
ImageHeight int? Image height attribute value.
ImagePlacement CardImagePlacement Placement of the image. Default is CardImagePlacement.Top.
ImageSrc string Image to be placed in the card. For image position see ImagePlacement.
ImageWidth int? Image width attribute value.
Settings CardSettings Set of settings to be applied to the component instance (overrides HxCard.Defaults, overridden by individual parameters).

Static properties #

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

HxCardText #

Bootstrap card-title 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 splatted onto an underlying HTML element.
ChildContent RenderFragment Text content.
CssClass string Additional CSS class(es) for the card-title element.
HtmlElement string Underlying HTML element for card-title. 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 card-subtitle. Default is h6.
An unhandled error has occurred. Reload 🗙