feat(ui): Cards can be flat to help with differentiating separate types

front/src/components/ui/Card.vue

@@ -19,6 +19,8 @@ const props = defineProps<{
   image?: string | { src: string, style?: 'withPadding' }
   icon?: string
 
+  flat?: true
+
   alertProps?: AlertProps
 } & Partial<RouterLinkProps>
   &(PastelProps | ColorProps | DefaultProps)
@@ -186,11 +188,10 @@ const attributes = computed(() =>
 
   color: var(--fw-text-color);
   background-color: var(--fw-bg-color);
-  box-shadow: 0px 2px 8px 0px var(--shadow-color);
+  box-shadow: 0px 2px 8px 0px v-bind("flat?'transparent':'var(--shadow-color)'");
 
   border-radius: var(--fw-border-radius);
   font-size: 1rem;
-  overflow: hidden;
 
   >.covering {
     position: absolute;
@@ -282,6 +283,7 @@ const attributes = computed(() =>
   }
 
   >.content {
+    overflow: hidden;
     padding: 0 var(--fw-card-padding);
     /* Consider making all line height, vertical paddings, margins and borders,
     a multiple of a global vertical rhythm so that side-by-side lines coincide */

front/ui-docs/components/ui/card.md

@@ -408,15 +408,27 @@ Instead, use the [action area](#add-an-action) to offer the primary link:
 
 <!-- prettier-ignore-end -->
 
-## Add color
+## Differentiate mixed cards visually
+
+Consider differentiating cards by color, size and shadow when mixing several of the following types:
+
+- Cards used for organizing the page spatially
+- Cards that represent objects
+- Interactive cards (buttons or links)
+
+### Add color
 
 - Choose a color: `default`, `primary`, `secondary`, `destructive`, or a Pastel (red, yellow, purple, green or blue)
 - Choose a variant: `raised`, `solid`, `outline`,...
 
 Read more: [Using Color](/using-color)
 
-## Set size
+### Set size
 
 `large` (304px), `medium` (208px), `auto`, `small`, ...
 
 Read more: [Using Width](/using-width)
+
+### Remove shadow
+
+Use the `flat` attribute to remove the automatic shadow. This helps reduce visual noise and differentiates cards.