feat(ui-docs): improve card documentation

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

@@ -67,22 +67,27 @@ TODO: Test if it works. Set up a mock router in vitest.
 
 Add a `:to` prop, either containing an external link (`"https://..."`) or a Vue Router destination:
 
+<Layout flex>
+
 ```ts
-:to="{name: 'library.albums.detail', params: {id: album.id}}"
+<Card small title="Link"
+  :to="{name: 'library.albums.detail', params: {id: album.id}}"
+/>
 ```
 
-<div class="preview">
-<Card
-title="Frequently Asked Questions"
-@click="alert('A quick answer!')"
->
-Got a question about Funkwhale? Get a quick answer!
-</Card></div>
+<Layout class="preview">
+<Card small title="Link"
+  :to="{name: 'library.albums.detail', params: {id: 1}}"
+/>
+</Layout>
+</Layout>
 
 ## Card as a Category header
 
 Category cards are basic cards that contain only a title. To create a category card, pass a `category` prop.
 
+<Layout flex>
+
 ```vue-html{1}
 <Card category
   title="Example Translations"
@@ -94,12 +99,13 @@ Category cards are basic cards that contain only a title. To create a category c
   title="Example Translations"
   />
 </div>
+</Layout>
 
 ## Add an Image
 
 Pass an image source to the `image` prop or set `image.src` and `image.style`.
 
-<Layout flex>
+<Layout :columnWidth="200" grid>
 
 ```vue-html{4,11-12}
 <Card
@@ -117,20 +123,18 @@ Pass an image source to the `image` prop or set `image.src` and `image.style`.
 </Card>
 ```
 
-<div class="preview">
-<Card
-  style="--width:208px"
-title="For music lovers"
-  image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb" />
-</div>
+<Layout stack class="preview">
+  <Card
+    style="--width:208px"
+  title="For music lovers"
+    image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb" />
 
-<div class="preview">
 <Card
-  style="--width:208px"
-title="For music lovers"
-:image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
-          style:'withPadding' }" />
-</div>
+    style="--width:208px"
+  title="For music lovers"
+  :image="{ src:'https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb',
+            style:'withPadding' }" />
+</Layout>
 </Layout>
 
 ## Add an Alert