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

Příklady

Referenční bloky bez dalšího vysvětlování – vysvětlení a živé ukázky jsou v jednotlivých kapitolách manuálu. Sem se vrací ten, kdo už ví, co hledá, a chce si to jen zkopírovat.

Nová stránka dokumentace

{% extends "docs/docs_base_public.html" %}

{% block title %}Název stránky | DIV.cz{% endblock %}

{% block docs_menu %}
    {% include "docs/_menu_design.html" %}
{% endblock %}

{% block docs_nav %}
    {% include "docs/_section_nav.html" with active_section="design" %}
{% endblock %}

{% block content %}
<h1>Název stránky</h1>
{% endblock %}

Karta obsahu

<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>

Řádek obsahu

<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 obsahu

<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 s modulovou barvou

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

Breadcrumb

<nav class="docs-breadcrumb-main" aria-label="Drobečková navigace">
    <a href="/">DIV.cz</a>
    <span>/</span>
    <a href="/dokumentace/">Dokumentace</a>
    <span>/</span>
    <strong>Aktuální stránka</strong>
</nav>

Tabulka s vzorníkem barvy

<table class="content-table-main design-color-table">
    <tr>
        <td class="design-color-swatch" style="background:#E31E24;"></td>
        <td>DIV červená</td>
        <td>Filmy</td>
        <td>#E31E24</td>
    </tr>
</table>

Upozornění

<div class="content-note-main content-note-warning">
    <p>Text upozornění.</p>
</div>

Formulářové pole

<div class="form-field-main">
    <label class="form-field-label" for="q">Popisek</label>
    <input class="form-field-input" id="q" type="text">
</div>