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
0 / 10Voto complessivo per Molto scarso
3.5 / 10Voto complessivo per Scarso
4 / 10Voto complessivo per Sotto la media
5.5 / 10Voto complessivo per Nella media
6 / 10Voto complessivo per Discreto
7.5 / 10Voto complessivo per Buono
8 / 10Voto complessivo per Molto buono
10 / 10Opinione 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]
---
::