Ant Design Blazor
Card
Simple rectangular container.
When To Use
- A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
Examples
A basic card containing a title, content and an extra corner content.
Supports two sizes: default and small.
A borderless card on a gray background.
You can use Card.Meta to support more flexible content.
Grid style card content.
Cards usually cooperate with grid column layout in overview page.
It can be placed inside the ordinary card to display the information of the multilevel structure.
Shows a loading indirector while the contents of the card is being featched.
A Card that supports cover, avatar, title and description.
A simple card only containing a content area.
More content can be hosted. Use the StandaloneInCard parameter to use Tabs independently in Card to avoid conflicts with other content.
Card API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ChildContent | ParameterContent for the card's body. Shown below AntDesign.Card.Body |
RenderFragment | -- |
| Body | ParameterContent for the card's body. Shown above AntDesign.Card.ChildContentUse ChildContent insteadObsolete Will be removed in a future version. |
RenderFragment | -- |
| ActionTemplate | ParameterContent to put in the actions section of the card. Takes priority over AntDesign.Card.Actions |
RenderFragment | -- |
| Bordered | ParameterToggles rendering of the border around the card | Boolean | true |
| Hoverable | ParameterMake card hoverable | Boolean | false |
| Loading | ParameterShows a loading indicator while the contents of the card are being fetched | Boolean | false |
| BodyStyle | ParameterStyle string for body section | String | -- |
| Cover | ParameterCover content for card. Displayed below header and above body | RenderFragment | -- |
| Actions | ParameterActions for the card | IList<RenderFragment> | -- |
| Type | ParameterCard style type, can be set to inner or not set | CardType | -- |
| Size | ParameterSize of the card | CardSize | -- |
| Title | ParameterTitle string for header | String | -- |
| TitleTemplate | ParameterTitle content for header. Takes priority over AntDesign.Card.Title |
RenderFragment | -- |
| Extra | ParameterContent to render in the top-right corner of the card | RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
CardGrid API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ChildContent | ParameterContent for that section of the grid | RenderFragment | -- |
| Hoverable | ParameterIf the section should be hoverable. Adds dropshadow and lifts up when hovered if true. | Boolean | false |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
CardMeta API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| Title | ParameterTitle string | String | -- |
| TitleTemplate | ParameterTitle content. Takes priority over AntDesign.CardMeta.Title |
RenderFragment | -- |
| Description | ParameterDescription string | String | -- |
| DescriptionTemplate | ParameterDescription content. Takes priority over AntDesign.CardMeta.Description |
RenderFragment | -- |
| Avatar | ParameterAvatar string. Will be passed to Avatar component's AntDesign.Avatar.Src |
String | -- |
| AvatarTemplate | ParameterAvatar content. Takes priority over AntDesign.CardMeta.Avatar |
RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
CardAction API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ChildContent | ParameterThe action of the card. | RenderFragment | -- |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |