**Language / Langue :** [[fr:ui:cards|FR]] | **EN**

====== Cards mode (ui: cards) ======

In ''cards'' mode, the choices of each room are displayed as **illustrated cards** on a horizontal rail below the room text. A click selects a card; a drag scrolls the rail without triggering anything. Keyboard arrows and the side arrows work too.

<code yaml>
title: "The crossroads"
ui: cards
</code>

Every button type becomes a card: navigation choices, events with ''button:'', custom actions, global aliases.

===== Card design =====

A card look is configured with the following keys, from general to specific (each level overrides the previous one):

  - ''cards:'' at scenario level: default values for all cards;
  - ''cards: slots:'' : one design per position on the rail;
  - ''card:'' on a **room**: design of the cards leading to that room;
  - ''card:'' on a **choice**: design of that specific card.

<code yaml>
cards:
  image: "https://example.com/standard-back.png"
  color: "#7c5cff"

rooms:
  - id: sanctuary
    card:
      image: "https://example.com/sanctuary.png"
      title: "The Sanctuary"
      subtitle: "A deceptive calm"
      rarity: rare
    text: "..."
</code>

^ Key ^ Effect ^
| ''image:'' | Front-side artwork. |
| ''title:'' / ''subtitle:'' | Texts centered on the card. |
| ''color:'' | Accent color of the card. |
| ''rarity:'' | Rarity style (''rare'', ''epic''...). |
| ''hidden: true'' | The card is shown face down (back visible). |
| ''back_title:'' / ''back_subtitle:'' | Texts displayed on the back. |

===== Hidden cards and flipping =====

''hidden: true'' presents the card **face down**, without revealing its destination. On click, the card flips (3D animation) and reveals its face before the room change. A normal card reveals its back when flipped; ''back_title:'' and ''back_subtitle:'' let you write something there.

<code yaml>
choices:
  - button: "Mystery card"
    card:
      hidden: true
      back_title: "?"
    to: surprise_room
</code>

===== Random draw =====

A ''random: N'' block draws N cards from a list each time the player enters the room. The draw stays stable until the player leaves the room.

<code yaml>
choices:
  - random: 2
    cards:
      - button: "The cave"
        to: cave
      - button: "The cliff"
        to: cliff
      - button: "The swamp"
        to: swamp
</code>

===== Tips =====

  * The input bar is hidden by default in cards mode (''hide_input: false'' to keep it).
  * The usual conditions apply: ''visible-if:'' hides the card, ''disabled-if:'' makes it inactive.
  * The mode pairs well with a [[en:yaml:hud|HUD]] showing the player's resources.

See also: [[en:ui:presentation|Interface modes]], [[en:ui:deck|Deck mode]].

**Join us on [[https://discord.gg/Z63DtVV|Discord Make&Play]]**