Card
The <FluentCard> component is a visual container without semantics that takes children. Cards are snapshots of content that are typically used in a group to present collections of related information.
<FluentCard> wraps the <fluent-card> element, a web component implementation of a card leveraging the Fluent UI design system.
Use the Width and Height parameters to size the card. Both values default to 350 pixels.
Examples
Simple card example
Just some content in a card (with a button that does not do anything).
Just some content in a card (with a button that does not do anything).
No Width or Height has been specified.
Area restricted examples
By default a card restricts its content to the card area. This means, for example, that if you have a select list with a lot of items, the list will be cut off at the bottom of the card.
You can override this behavior by setting the AreaRestricted property to false.
This card's content is restricted to its area. Open the select list below to see the result
This card's content is not restricted to its area. Open the select list below to see the result
Minimal Style
By default the FluentCard component is a visual container and design system provider. Cards are snapshots of content that are typically used in a group to present collections of related information.
Thus, by design, the FluentCard component includes all the styles required for a good representation of the other components included in it.
This adds a large number of styles such as justify-content; align-items; gap; width; and over 80 CSS variables.
The code generated can therefore become very important, especially if you use this component several times, for example in a list or during a foreach.
To avoid this, you can use the MinimalStyle property. This will remove all the default styles from the FluentCard component.
This will allow you to use the FluentCard component as a simple container without any style, except the styles to draw the box-shadow (and some minimal styles).
Just some content in a card (with a button that does not do anything).
No Width or Height has been specified.
Documentation
FluentCard Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
AreaRestricted | bool | True | By default, content in the card is restricted to the area of the card itself. If you want content to be able to overflow the card, set this property to false. |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Height | string? | Gets or sets the height of the card. Must be a valid CSS measurement. | |
MinimalStyle | bool | False | |
Width | string? | Gets or sets the width of the card. Must be a valid CSS measurement. |