Text text · light

{
  "html": "<p>Tenhle blok ukazuje, jak vypadá <strong>volný obsah z editoru</strong> CMS. Na jeho vzhled je jediný zdroj pravdy <code>src/css/core/wysiwyg.css</code> a obal <code>.content-wrapper</code> — blok sám řeší jen šířku sloupce a postupné odhalování. <small>Drobný text</small> i horní index<sup>1</sup> a dolní index<sub>2</sub> mají vzhled z globální typografie.</p><h2>Nadpis druhé úrovně</h2><p>Odstavec s <em>kurzívou</em>, <strong>tučným písmem</strong> a odkazy: <a href=\"/aktuality/\">odkaz v rámci webu</a>, <a href=\"https://www.central-group.cz/\" target=\"_blank\" rel=\"noopener\">odkaz na jiný web</a> a <a href=\"/assets/dokumenty/parkova-ctvrt-blok-ii.pdf\">odkaz na soubor ke stažení</a>. Odkazy jsou podtržené a po najetí ztmavnou.</p><h3>Nadpis třetí úrovně</h3><p>Pod ním odrážkový seznam s vnořenou úrovní — odrážka je kolečko 6 px v CG Blue, odsazení nese položka, ne seznam.</p><ul><li>První položka seznamu</li><li>Druhá položka s delším textem, který se na užším okně zalomí na víc řádků, aby bylo vidět, že odsazení odrážky drží i na druhém řádku<ul><li>Vnořená položka</li><li>Druhá vnořená položka</li></ul></li><li>Třetí položka</li></ul><ol><li>Číslovaný seznam má číslici v CG Blue a tučně<ol><li>Vnořený krok</li><li>Druhý vnořený krok</li></ol></li><li>Druhý krok</li></ol><hr><h4>Nadpis čtvrté úrovně</h4><p>Čtvrtá, pátá i šestá úroveň mají stejnou velikost — editor je rozlišuje jen sémanticky.</p><h5>Nadpis páté úrovně</h5><h6>Nadpis šesté úrovně</h6><blockquote><p>Citace je odsazená svislou linkou v barvě značky a text v ní je o odstín světlejší.</p><p>Víceodstavcová citace drží rozestupy odstavců.</p></blockquote><h3>Tabulka</h3><p>Tabulka má záhlaví na světlém podkladu a linky kolem buněk. Pod 768 px se posouvá vodorovně, aby nerozbila šířku stránky.</p><table><thead><tr><th>Projekt</th><th>Lokalita</th><th>Dokončení</th></tr></thead><tbody><tr><td>Rezidence Parková čtvrť</td><td>Praha 3 – Žižkov</td><td>2026</td></tr><tr><td>Rezidenční čtvrť Tesla Hloubětín</td><td>Praha 9 – Hloubětín</td><td>2027</td></tr><tr><td>Viladomy Počernice</td><td>Praha 9 – Dolní Počernice</td><td>2027</td></tr></tbody></table><h3>Obrázky</h3><figure><img src=\"/assets/images/photos/placeholder-16x9.svg\" alt=\"\" width=\"1280\" height=\"720\" loading=\"lazy\"><figcaption>Obrázek na plnou šířku sloupce s popiskem pod ním.</figcaption></figure><p><img class=\"alignleft\" src=\"/assets/images/photos/download-foto-03-268.jpg\" alt=\"\" width=\"268\" height=\"179\" loading=\"lazy\">Obrázek zarovnaný vlevo text obtéká zprava. Třídy <code>alignleft</code>, <code>alignright</code> a <code>aligncenter</code> sází editor a šablona je zná — na mobilu se obtékání vypíná, obrázek jde přes celou šířku.</p><p>Druhý odstavec vedle obrázku, aby bylo obtékání opravdu vidět.</p><p><img class=\"aligncenter\" src=\"/assets/images/photos/download-foto-03-268.jpg\" alt=\"\" width=\"268\" height=\"179\" loading=\"lazy\"></p><p>Poslední odstavec nemá spodní mezeru — o to se stará pravidlo <code>&gt; :last-child</code>.</p>"
}

{
  "title": "Volitelný titulek sekce",
  "html": "<p>Blok umí i vlastní titulek sekce — hodí se, když text stojí uprostřed stránky pod jiným blokem. Na stránce, kde je nahoře <code>page-title</code>, se titulek nepoužívá: nadpis sekce je 36 px, zatímco <code>h2</code> uvnitř obsahu je drobnější, a dvě různě velké dvojky vedle sebe matou.</p><p>Druhý odstavec pod titulkem.</p>"
}

{
  "large": true,
  "html": "<p>Volný obsah z editoru v <strong>zvětšené</strong> variantě: odstavce jsou 20 px místo 18. Seznamy zůstávají podle grafiky 16 px bez ohledu na kontext.</p><ul><li>První položka</li><li>Druhá položka</li></ul><p>Přepínač je klíč <code>large</code>.</p>"
}

{
  "settings": {
    "background": "dark"
  },
  "title": "Text na tmavé sekci",
  "html": "<p>Volný obsah z editoru v <strong>zvětšené</strong> variantě: odstavce jsou 20 px místo 18. Seznamy zůstávají podle grafiky 16 px bez ohledu na kontext.</p><ul><li>První položka</li><li>Druhá položka</li></ul><p>Přepínač je klíč <code>large</code>.</p>"
}

{}