Dokumentace · API · Data · Design · Editor · Nápověda · Infrastruktura

Komponenty

Komponenty žijí v components.css. Nejdřív určujeme typ komponenty, teprve potom typ obsahu – karta filmu, knihy i hry má stejné HTML, liší se jen třídou .module-*, která nastaví proměnnou --module-color. Modul nesmí znovu vytvářet stejnou komponentu jen kvůli jiné barvě.

Karta

Základní komponenta pro film, knihu, hru nebo svět v mřížce.

Název filmu

2026 · Drama

<div class="content-card-main module-movies">
    <a href="/film/example" class="content-card-link">
        <img src="/example.webp" alt="Název filmu" class="content-card-image">
        <div class="content-card-body">
            <h3 class="content-card-title">Název filmu</h3>
            <p class="content-card-text">2026 · Drama</p>
        </div>
    </a>
</div>

Kniha nebo hra používají stejný základ, jen jinou třídu modulu:

<div class="content-card-main module-books">...</div>
<div class="content-card-main module-games">...</div>

Řádek

Kompaktnější varianta karty pro seznamy s náhledem.

Název knihy

Jméno autora · 2026

<div class="content-row-main module-books">
    <div class="content-row-image">
        <img src="/example.webp" alt="Název knihy">
    </div>
    <div class="content-row-body">
        <h3 class="content-row-title">
            <a href="/kniha/example">Název knihy</a>
        </h3>
        <p>Jméno autora · 2026</p>
    </div>
</div>

Seznam

Jednoduchý textový výčet odkazů – např. pro levé menu nebo krátký přehled.

<ul class="content-list-main module-games">
    <li class="content-list-item">
        <a href="/hra/example" class="content-list-link">Název hry</a>
    </li>
</ul>

Tlačítko

Jedna komponenta se třemi úrovněmi důrazu – ne samostatná třída pro každou barvu nebo modul jako dřív (.add-book, .add-movie, .add-serie, .add-game). Barvu nastavuje obalující .module-*.

Přidat film Upravit Zrušit

<div class="module-movies">
    <a href="#" class="action-button-main">Přidat film</a>
</div>

<a href="#" class="action-button-secondary">Upravit</a>
<a href="#" class="action-button-ghost">Zrušit</a>

Badge

Krátký doplňkový popisek – stav, typ obsahu nebo modulová identita.

Seriál Hra E-kniha

<span class="content-badge-main module-series">Seriál</span>
<span class="content-badge-outline module-books">E-kniha</span>

Formulář

Název

Zobrazí se přesně takto v detailu.

<div class="form-field-main">
    <label class="form-field-label" for="title">Název</label>
    <input class="form-field-input" id="title" type="text">
    <p class="form-field-hint">Nápověda k poli.</p>
</div>

<div class="form-actions-main">
    <button type="submit" class="action-button-main">Uložit</button>
    <button type="button" class="action-button-ghost">Zrušit</button>
</div>

Tabulka

Název	Hodnota
Položka	Hodnota

<table class="content-table-main">
    <thead>
        <tr><th>Název</th><th>Hodnota</th></tr>
    </thead>
    <tbody>
        <tr><td>Položka</td><td>Hodnota</td></tr>
    </tbody>
</table>

Specializovaná tabulka (např. vzorník barev) přidá jen modifier a neopakuje základní definici – viz design-color-table na stránce Moduly.

Pagination

<ul class="content-pagination-main">
    <li><span class="content-pagination-link content-pagination-current">1</span></li>
    <li><a class="content-pagination-link" href="?page=2">2</a></li>
</ul>

Upozornění

Krátká vsuvka odlišná od běžného textu – vysvětlení, výjimka nebo varování.

Neutrální upozornění – výchozí varianta.

Stránka je rozpracovaná, obsah se může změnit.

Tato akce je nevratná.

<div class="content-note-main content-note-warning">
    <p>Stránka je rozpracovaná, obsah se může změnit.</p>
</div>