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.

Navigation

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

Image overlay

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
ImageSrc string Image to be placed in the card. For image position see ImagePlacement.
ImagePlacement CardImagePlacement Placement of the image. Default is CardImagePlacement.Top.
ImageAlt string Image alt attribute value.
ImageWidth int? Image width attribute value.
ImageHeight int? Image height attribute value.
HeaderTemplate RenderFragment Header content.
BodyTemplate RenderFragment Body content.
FooterTemplate RenderFragment Footer content.
ChildContent RenderFragment Generic card content (outside .card-body).
CssClass string Additional CSS classes for the card-container.
HeaderCssClass string Additional CSS class for the header.
BodyCssClass string Additional CSS class for the body.
FooterCssClass string Additional CSS class for the footer.
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying HTML element.

Static properties

Property Type Description
Defaults CardDefaults Application-wide defaults for HxCard.

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
ChildContent RenderFragment Text content.
HtmlElement string Underlying HTML element for card-title. Default is h5.
CssClass string Additional CSS class(es) for the card-title element.
AdditionalAttributes Dictionary<string, object> Additional attributes to be splatted onto an underlying HTML element.

HxCardSubtitle

Bootstrap card-subtitle component.

API

Parameters

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