starting work on abstracting card design

src/content/meta/design.mdx

@@ -3,14 +3,46 @@ import Palette from '../../components/meta/Palette.astro'
 
 import ArticleCard from '../../components/ArticleCard.astro'
 
-# Meta / Design
+# Meta > Design
 
-In questa pagina tento di spiegare come funziona il design di questo sito.
+In questa pagina tento di spiegare come funziona il design di questo sito. I blocchi di codice con sfondo arancione chiaro sono esempi di codice Astro e sotto hanno un'anteprima del risultato _generata automaticamente_. Ad esempio
+
+```astro
+<p>Questo è un paragrafo</p>
+```
 
 ## Card
 
 Le card sono uno dei componenti più importanti di questo sito. Sono utilizzate per mostrare i post, i progetti e le pagine. Ecco alcuni esempi per dare un'idea
 
+### Esempio di base
+
+Una card semplice ha un titolo ed una descrizione.
+
+```astro
+<div class="card" style="--card-base: var(--guide-base); max-width: 25rem;">
+    <div class="title">Titolo</div>
+    <div class="text">
+        Descrizione lorem ipsum dolor sit amet consectetur
+        adipisicing elit. Aspernatur, labore?
+    </div>
+</div>
+```
+
+### Variante grande
+
+Le card possono essere di dimensioni diverse. Questa è una card grande.
+
+```astro
+<div class="card large" style="--card-base: lightgreen; max-width: 25rem;">
+    <div class="title">Titolo</div>
+    <div class="text">
+        Descrizione lorem ipsum dolor sit amet consectetur
+        adipisicing elit. Aspernatur, labore?
+    </div>
+</div>
+```
+
 ### Lista di articoli
 
 Una lista di articoli è composta da più card, ognuna delle quali rappresenta un articolo. Ogni card ha un titolo, una descrizione e una lista di tag.