Componenti predefiniti
Link: [Prose Components](/articles/2026-01-17-lorwyn-eclipsed)
Link: Prose Components
> This is a quote block
This is a quote block
```js [file.js]
export default () => {
console.log('Code block')
}
```
export default () => {
console.log('Code block')
}
# Intestazione di primo livello (non usare)
## Intestazione di secondo livello
### Intestazione di terzo livello
#### Intestazione di quarto livello
Divisore sotto.
---
Divisore sotto.
Divisore sopra.
Se necessiti di specificare la larghezza di un'immagine, usa html
{style="width:400px; display: block; margin: 0 auto;"}
- Una
- lista
- non
- ordinata
- Una
- lista
- non
- ordinata
1. Una
2. lista
3. numerata
- Una
- lista
- numerata
Una parola **in grassetto**.
Una parola in grassetto.
Una parola *in corsivo*.
Una parola in corsivo.
Scrivo `codice` in linea.
Scrivo codice in linea.
::tip
Messaggio di nota.
::
::caution
Messaggio di cautela.
::
::note
Messaggio informativo.
::
::warning
Messaggio di allerta.
::
::card{title="Titolo della card"}
Contenuto della card.
::
The Consistency Paradox
The people who seem most disciplined aren't superhuman – they've just made their habits so small and automatic that they barely require willpower. They're like efficiency ninjas, but with better sleep schedules.
| Key | Type | Description |
| --- | --------- | ----------- |
| 1 | Wonderful | Table |
| 2 | Wonderful | Data |
| 3 | Wonderful | Website |
| Key | Type | Description |
|---|---|---|
| 1 | Wonderful | Table |
| 2 | Wonderful | Data |
| 3 | Wonderful | Website |
::u-table
---
data:
- Time Period: Week 1-2
What Happens: Feels hard, requires lots of willpower
Example: Every workout is a battle
- Time Period: Week 3-4
What Happens: Starts to feel slightly easier
Example: You remember to pack gym clothes
- Time Period: Week 5-8
What Happens: Becomes part of routine
Example: You feel weird on rest days
- Time Period: Month 3+
What Happens: Automatic behavior
Example: Working out feels as natural as brushing teeth
---
::
| Time Period | What Happens | Example |
|---|---|---|
| Week 1-2 | Feels hard, requires lots of willpower | Every workout is a battle |
| Week 3-4 | Starts to feel slightly easier | You remember to pack gym clothes |
| Week 5-8 | Becomes part of routine | You feel weird on rest days |
| Month 3+ | Automatic behavior | Working out feels as natural as brushing teeth |
Componenti personalizzati
Simboli di mana singoli
:magic-card-mana-symbol{symbol="w"}
:magic-card-mana-symbol{symbol="u"}
:magic-card-mana-symbol{symbol="b"}
:magic-card-mana-symbol{symbol="r"}
:magic-card-mana-symbol{symbol="g"}
:magic-card-mana-symbol{symbol="c"}
/ / / / /
Combinazioni di simboli di mana
:magic-card-mana-symbol{symbol="wubrgc"}
Simboli speciali
:magic-card-mana-symbol{symbol="X"}
:magic-card-mana-symbol{symbol="0"}
:magic-card-mana-symbol{symbol="1"}
:magic-card-mana-symbol{symbol="2"}
:magic-card-mana-symbol{symbol="3"}
:magic-card-mana-symbol{symbol="4"}
:magic-card-mana-symbol{symbol="5"}
:magic-card-mana-symbol{symbol="6"}
:magic-card-mana-symbol{symbol="7"}
:magic-card-mana-symbol{symbol="8"}
:magic-card-mana-symbol{symbol="9"}
:magic-card-mana-symbol{symbol="10"}
/ / / / / / / / / / /
Combinazioni di colori
:magic-card-mana-symbol{symbol="W/B"}
:magic-card-mana-symbol{symbol="U/B"}
:magic-card-mana-symbol{symbol="U/R"}
:magic-card-mana-symbol{symbol="B/R"}
:magic-card-mana-symbol{symbol="B/G"}
:magic-card-mana-symbol{symbol="R/G"}
:magic-card-mana-symbol{symbol="R/W"}
:magic-card-mana-symbol{symbol="G/W"}
:magic-card-mana-symbol{symbol="G/U"}
/ / / / / / / / /
Tipi di carte
:magic-card-mana-symbol{symbol="creature"}
:magic-card-mana-symbol{symbol="instant"}
:magic-card-mana-symbol{symbol="sorcery"}
:magic-card-mana-symbol{symbol="artifact"}
:magic-card-mana-symbol{symbol="land"}
:magic-card-mana-symbol{symbol="enchantment"}
/ / / / /
Simboli di mana phyrexiano
:magic-card-mana-symbol{symbol="P"}
:magic-card-mana-symbol{symbol="W/P"}
:magic-card-mana-symbol{symbol="U/P"}
:magic-card-mana-symbol{symbol="B/P"}
:magic-card-mana-symbol{symbol="R/P"}
:magic-card-mana-symbol{symbol="G/P"}
/ / / / /
Mostrare l'anteprima di una carta nel testo
Quando usarlo
Il componente magic-card-tooltip è utile nel testo, è quindi un componente in linea, quando si vuole mostrare l'anteprima di una carta tramite hover (da pc) o toccando il nome della carta da mobile.
Come usarlo
Selezionare il nome della carta completo in inglese e premere due volte il carattere [ (parentesi quadra aperta), l'editor di testo Visual Studio Code inserirà automaticamente le parentesi di chiusura (]]).
Una volta che il codice viene analizzato verrà automaticamente trasformato nel componente magic-card-tooltip.
:magic-card-tooltip{name="Swords to Plowshares"}
Varianti
Ci sono due varianti di questo componente:
- con la sola specifica del nome (
name): viene restituita l'ultima illustrazione "normale";Risultato: Swords to PlowsharesVersione minimale[[Swords to Plowshares]] - con la specifica del nome (
name) e dell'espansione (set): spiegazione;Risultato: Swords to PlowsharesVersione minimale[[Swords to Plowshares | spg]]
Il componente magic-card-tooltip viene riutilizzato all'interno del componente magic-decklist e del componente magic-sideboard-guide come potrai notare più avanti.
Alcuni casi limite
Alcuni casi limite con double faced cards e adventure cards
- Nel testo in prosa (
:MagicCardTooltip{name="Card Name" image="https://api.scryfall.com/cards/named?exact=Card%20Name&format=image"}) usa solo il nome della prima faccia, così come stampato sulla carta::MagicCardTooltip{name="Sagu Wildling" image="https://cards.scryfall.io/normal/front/d/8/d8b43b00-f4d1-436c-bf3f-6d414cd4ce38.jpg?1783907334"}. - Nelle decklist (
::magic-decklist,::magic-sideboard-guide) usa il nome completo con//, così come lo esporta MTGO/Scryfall:4 Sagu Wildling // Roost Seek.
cards.db viene generato con una riga per ciascuna delle due varianti (vedi docs/architecture/card-download-database-flow.md).Delver of Secrets / The Modern Age / Sagu Wildling
[[Insectile Aberration]]
[[Vector Glider]]
Mostrare una o più carte
magic-cards è l'unico componente da usare per mostrare carte intere negli articoli — sia per una carta sola (utile in spoiler) sia per più carte insieme, con ventaglio ruotato (fan, default) o variante "a mano" (hand, senza rotazione). Su schermi stretti (mobile) passa automaticamente a una striscia scorrevole: non è una modalità scelta dall'autore, è il comportamento responsive automatico, come nel componente originale di WotC.
Per una singola carta basta un array con un solo elemento:
::magic-cards
---
cards:
- Swords to Plowshares
---
::
Per più carte insieme: il ventaglio ruotato.
::magic-cards
---
cards:
- Swords to Plowshares
- Counterspell
- Lightning Bolt
- Brainstorm
- Lava Spike
caption: "Cinque carte a ventaglio"
arch: 20.5 # opzionale, apertura totale del ventaglio in gradi (solo layout: fan)
---
::
Variante "a mano"
Impostando layout: hand le carte non ruotano più: si dispongono in un leggero arco verticale (la carta centrale è la più "vicina", quelle ai lati risalgono leggermente), come tenerle in mano.
::magic-cards
---
cards:
- Lightning Bolt
- Mulldrifter
- Prophetic Prism
- Chain Lightning
- Ghostly Flicker
caption: "Cinque carte a mano"
layout: hand
---
::
Icona del tipo di carta
Piccola icona inline (mana-font) per un tipo di carta, utile in prosa o tabelle senza dover caricare l'immagine intera.
:magic-card-types-icon{type="creature" size="md"}
Creatura Istantaneo Terra
Mostrare l'art di una carta
Il componente magic-card-art-crop in modo predefinito prende il nome della carta e ne restituisce l'art.
è possibile specificare l'espansione e il numero di collezione della carta, il numero di espansione non è necessario quando l'art è univoca.
::magic-card-art-crop
---
card: Swords to Plowshares (spg)
---
::
Varianti
Opzionalmente è possibile specificare la proprietà crop con due parametri obbligatori:
height: che assumere i valorismall|medium|large|xlposition: che assumere i valoritop|center|bottom
Comportamento predefinito
Senza alcun parametro viene restituita tutta l'art.
::magic-card-art-crop
---
card: Repel Calamity
---
::
In questo caso è possibile specificare in modo più immediato:
:magic-card-art-crop{card="Repel Calamity"}
Il risultato è il medesimo:
Small top crop
::magic-card-art-crop
---
card: Repel Calamity
crop:
height: small
position: top
---
::
Small center crop
::magic-card-art-crop
---
card: Repel Calamity
crop:
height: small
position: center
---
::
Small bottom crop
::magic-card-art-crop
---
card: Repel Calamity
crop:
height: small
position: bottom
---
::
Esprimere una valutazione
Componente per mostrare il voto di una carta su una scala da 0 a 10.
Come usarlo
::magic-card-rating
---
cardName: Nome della carta
rating: 6.5
---
::
Esempi di voti da 0 a 10
Il colore del badge cambia in base al voto:
- 0 - 3.5: Rosso (error) - Voto insufficiente
- 4 - 5.5: Giallo/Arancio (warning) - Voto mediocre
- 6 - 7.5: Blu (primary) - Voto buono
- 8 - 10: Verde (success) - Voto eccellente
Voto complessivo per Pessimo
Voto complessivo per Molto scarso
Voto complessivo per Scarso
Voto complessivo per Sotto la media
Voto complessivo per Nella media
Voto complessivo per Discreto
Voto complessivo per Buono
Voto complessivo per Molto buono
Opinione del revisore
Componente per mostrare l'opinione di un revisore su una carta, utilizzato negli articoli di spoiler.
Come usarlo
::reviewer-opinion
---
name: Nome del revisore
rating: 7
---
Testo dell'opinione del revisore sulla carta.
::
Esempio
Pietro Bragioto
7Carta interessante che potrebbe trovare spazio in diversi archetipi. La sua versatilità la rende una solida aggiunta al formato, anche se non è una carta definitiva. Il costo di mana è giustificato dall'impatto che può avere sulla partita.
Card Autore
Piccola card cliccabile con avatar, nome e descrizione dell'autore — usata ad esempio nelle byline degli articoli. Tutti gli autori attualmente registrati:
author: "Nome Cognome") — non serve invocare ::author-card a mano nel corpo del testo. Il nome deve corrispondere esattamente (case-insensitive) al campo name di un file in content/authors/**.yml. La card completa con la bio (mostrata ad esempio nella sezione "Riguardo l'autore" in fondo agli articoli) è un componente diverso da quello mostrato qui sotto, e al momento non è dimostrata in questa pagina.::author-card
---
author:
name: Alessandro Moretti
avatar: /assets/avatars/alessandro-moretti.png
description: Presidente Pauperwave
nickname: AdeptoTerra
url: /authors/alessandro-moretti
---
::
Alessandro Moretti
Presidente Pauperwave
Pietro Bragioto
Scribacchino di liste
Nicola Cordeschi
Fondatore Lega Pauper TAA
Paolo Donfrancesco
Walker735
Hypergeomancer
Matematico
Guida al sideboard
decklists e in spoilers.::magic-sideboard-guide
---
description: Descrizione breve delle scelte di side
matchup: Mono Red Rally
---
#in
3 Cast into the Fire
#out
3 Thermo-Alchemist
#out-alt
1 Thermo-Alchemist
2 Great Furnace
::
Mostrare una decklist
decklist, report e tutorial.::magic-decklist
---
name: Elves
player: Lahiri Cristofori
placement: Winner
headerGradient: monowhite
---
Creatures
4 Delver of Secrets
4 Elvish Mystic
4 Sagu Wildling // Roost Seek
4 The Modern Age
4 Masked Vandal
4 Priest of Titania
4 Timberwatch Elf
4 Avenging Hunter
3 Sagu Wildling // Roost Seek
4 Generous Ent
Sorceries
4 Land Grant
4 Winding Way
4 Lead the Stampede
Lands
1 Gingerbread Cabin
8 Forest
Sideboard
4 Spinewoods Paladin
3 Faerie Macabre
3 Hydroblast
3 Monstrous Emergence
1 Island
1 Tangled Islet
::
Gradienti per le decklist
Gradienti mono-colore
headerGradient: monowhite
heading
subheading
headerGradient: monoblue
heading
subheading
headerGradient: monoblack
heading
subheading
headerGradient: monored
heading
subheading
headerGradient: monogreen
heading
subheading
headerGradient: colorless
heading
subheading
Gradienti due-colori
headerGradient: gruul
heading
subheading
headerGradient: azorius
heading
subheading
headerGradient: dimir
heading
subheading
headerGradient: boros
heading
subheading
headerGradient: golgari
heading
subheading
headerGradient: izzet
heading
subheading
headerGradient: orzhov
heading
subheading
headerGradient: rakdos
heading
subheading
headerGradient: selesnya
heading
subheading
headerGradient: simic
heading
subheading
Gradienti tre-colori
headerGradient: esper
heading
subheading
headerGradient: grixis
heading
subheading
headerGradient: jund
heading
subheading
headerGradient: naya
heading
subheading
headerGradient: bant
heading
subheading
headerGradient: mardu
heading
subheading
headerGradient: temur
heading
subheading
headerGradient: sultai
heading
subheading
headerGradient: jeskai
heading
subheading
headerGradient: abzan
heading
subheading
Immagini
Immagine con didascalia
::image-caption
---
src: /arts/cmm-81-counterspell.jpg
alt: "Counterspell"
caption: "Una didascalia esplicativa sotto l'immagine"
---
::

Carosello di immagini
Utile per foto di mazzi o più angolazioni di una carta fisica.
::image-carousel
---
images:
- /arts/cmm-81-counterspell.jpg
- src: /sets/lord-of-the-rings.jpg
alt: "Lord of the Rings"
---
::

Grafici
Sette componenti grafico (sei via ECharts, più un renderer di diagrammi Mermaid) utili per articoli di meta-analisi, report e tutorial. Si adattano automaticamente alla dark mode e allo schermo.
Grafico a barre
Utile per confronti tra categorie (es. numero di copie giocate per archetipo). Usa horizontal: true quando i nomi delle categorie sono lunghi o numerosi.
Grafico a barre verticale
Comportamento predefinito (senza horizontal).
::bar-chart
---
title: Meta Breakdown - Copie Giocate
seriesName: Copie
data:
- { name: Jund Wildfire, value: 11 }
- { name: Monored Madness, value: 11 }
- { name: Spy Combo, value: 8 }
- { name: Grixis Affinity, value: 7 }
---
::
Grafico a barre orizzontale
Con horizontal: true, utile quando i nomi delle categorie sono lunghi o numerosi.
::bar-chart
---
title: Meta Breakdown - Copie Giocate
seriesName: Copie
horizontal: true
data:
- { name: Jund Wildfire, value: 11 }
- { name: Monored Madness, value: 11 }
- { name: Spy Combo, value: 8 }
- { name: Grixis Affinity, value: 7 }
---
::
Grafico a linee
Una o più serie nominate sull'asse temporale condiviso categories. Con stacked: true ottieni il classico grafico ad area impilata, utile per mostrare l'andamento della meta share nel tempo.
::line-chart
---
title: Andamento Meta nel Tempo
categories: [Gen, Feb, Mar, Apr, Mag, Giu]
stacked: true
yAxisName: "% Meta Share"
series:
- { name: Jund Wildfire, data: [12, 14, 13, 15, 16, 18] }
- { name: Monoblu Terror, data: [8, 9, 10, 9, 8, 7] }
- { name: RDW, data: [5, 6, 6, 7, 6, 5] }
---
::
Grafico con banda di confidenza
Una linea di valore con una fascia superiore/inferiore intorno, utile per stime e proiezioni (es. win rate previsto).
::confidence-band-chart
---
title: Win Rate Previsto - Mono Blue Control
seriesName: Win Rate
bandLabel: "Intervallo di Confidenza (95%)"
yAxisName: "Win Rate %"
data:
- { x: "Round 1", value: 55, lower: 48, upper: 62 }
- { x: "Round 2", value: 57, lower: 51, upper: 63 }
- { x: "Round 3", value: 54, lower: 46, upper: 61 }
- { x: "Round 4", value: 58, lower: 52, upper: 65 }
---
::
Grafico a torta
Utile per mostrare la distribuzione degli archetipi in un torneo.
::pie-chart
---
title: Meta Breakdown
data:
- { value: 11, name: Jund Wildfire }
- { value: 11, name: Monored Madness }
- { value: 8, name: Spy Combo }
- { value: 7, name: Grixis Affinity }
---
::
Grafico a dispersione (scatter)
Utile per mostrare correlazioni tra due valori (es. costo di mana medio e win rate). La legenda compare solo con più di una serie.
::scatter-chart
---
title: CMC medio vs Win Rate
xAxisName: CMC medio
yAxisName: Win Rate %
series:
- name: Aggro
data: [{ x: 1.8, y: 52 }, { x: 2.1, y: 55 }, { x: 1.5, y: 58 }]
- name: Control
data: [{ x: 3.2, y: 51 }, { x: 3.8, y: 49 }, { x: 3.5, y: 53 }]
---
::
Grafico radar
Utile per confrontare uno o più mazzi su più assi contemporaneamente (es. profilo di un archetipo). L'ordine dei values di ogni serie deve corrispondere all'ordine degli indicators.
::radar-chart
---
title: Profilo Archetipo
indicators:
- { name: Aggro, max: 10 }
- { name: Control, max: 10 }
- { name: Consistenza, max: 10 }
- { name: Potenza, max: 10 }
- { name: Budget, max: 10 }
series:
- { name: Mono Red Madness, values: [9, 2, 6, 7, 8] }
- { name: Mono Blue Control, values: [2, 9, 7, 8, 5] }
---
::
Diagramma Mermaid
Renderizza un diagramma Mermaid (flowchart, sequence diagram, ecc.) lato client. Utile per illustrare flussi decisionali (es. guide al sideboard, alberi di scelta durante una partita). A differenza degli altri grafici, il diagramma viene renderizzato solo dopo l'hydration della pagina, non è presente nell'HTML prerenderizzato.
::mermaid
---
code: |
flowchart TD
A[Mainboard] --> B{Sideboard}
B -->|Round 1| C[Swap]
B -->|Round 2| D[Keep]
---
::