[FluentCard] Add MinimalStyle property

[dvoituron]

[FluentCard] Add MinimalStyle property

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).

Example

<FluentCard MinimalStyle="true">
    <p>Just some content in a card (with a button that does not do anything).</p>

    <FluentButton Appearance="Appearance.Accent">Hello</FluentButton>
    <p>No Width or Height has been specified.</p>
</FluentCard>

Code generated

<div class="fluent-card-minimal-style">
  <p>Just some content in a card (with a button that does not do anything).</p>
  <fluent-button type="button" appearance="accent" class="accent">Hello</fluent-button>
  <p>No Width or Height has been specified.</p>
</div>

Default FluentCard code generated