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 #
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 #
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 linkHeader and footer #
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 #
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.
Images #
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
Image overlays #
List groups #
Create lists of content in a card with a flush list group.
Variants #
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
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. |