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.

Example #

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

Header and footer

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.

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.

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

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

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, overriden 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 🗙