Karty

Karty sú pre zložky odporúčané. Zložka môže mať vlastné karty. Pri novom webe alebo redizajne by však mala prejsť na karty Diela.

Karta

Karta je upútavka, ktorá vedie na jednu stránku, napríklad článok alebo zložku. Má fotku, štítok, nadpis, krátky text, zoznam s ikonami a na spodku „Čítať viac“. Fotka, štítky aj zoznam s ikonami sú nepovinné. Štítok je nad nadpisom alebo pod ním, pravidlo je v časti Štítky.

    • Dielo
    • Posledné miesta

    Otvorenie Diela 2026

    Fotky a zážitky z otvorenia Saleziánskeho diela, na ktorom sa stretli všetky zložky aj susedia z Trnávky.

    • Fotogaléria
    • Farnosť

    Deň farnosti

    Stretnutie celej farnosti na nádvorí so svätou omšou, spoločným obedom a programom pre deti aj dospelých.

    • Nedeľa 31. 5.

Bez štítkov

  • Začala 2. etapa rekonštrukcie

    V októbri sa začala druhá etapa rekonštrukcie kostola. Jej cieľom je odstrániť bariéry.

  • Divadlo Oratka 2026

    Deti z Oratka nacvičovali celú jeseň a pred Vianocami zahrali rozprávku pre rodičov aj celú farnosť.

Bez fotky, štítky pod nadpisom

  • Ako pripraviť veľkú hru

    • Hry
    • Pre animátorov

    Ako vybrať hru podľa veku detí, pripraviť terén a rozdeliť úlohy medzi animátorov.

    • Čítanie na 5 minút

  • Ako viesť stretko

    • Stretká
    • Pre animátorov

    Ako pripraviť tému stretka, zapojiť do rozhovoru celú skupinu a čo robiť, keď sa debata nedarí.

    • Čítanie na 4 minúty

Celá karta je odkaz

Kliknúť sa dá kamkoľvek na kartu, odkaz z nadpisu sa natiahne cez celú kartu. V karte preto nie je ďalší odkaz ani tlačidlo. „Čítať viac“ na spodku je len znak, že karta vedie ďalej, čítačka ho preskočí. Pri prejdení myšou sa nadpis podčiarkne, focus obkreslí celú kartu.

Fotka v karte má prázdny alternatívny text, lebo o čom karta je, povie nadpis.

Farebné karty

Farebná karta zvýrazní jednu kartu medzi ostatnými, napríklad Podporte nás alebo rekonštrukciu. Farba nepatrí zložke. Telo karty dostane triedu bg-subtle-{farba} alebo bg-strong-{farba} z base.css, fotka ostáva hore.

Jemné pozadie

Text je čierny, „Čítať viac“ v tmavom odtieni farby.

Výrazné pozadie

Text, štítok aj „Čítať viac“ majú farbu textu pozadia.

<li class="card">
  <img class="card__image" src="…" alt="">
  <div class="card__body bg-strong-blue">…</div>
</li>

Mriežka kariet

Karty sú v obale card-grid na mriežke systému. Každá karta zaberá 4 stĺpce, takže na desktope sú tri v rade, na tablete dve a na mobile jedna pod druhou. Karty v jednej mriežke sú rovnaké: všetky majú fotku alebo žiadna, štítky všetky na rovnakom mieste alebo žiadne a rovnako zoznam s ikonami aj „Čítať viac“. Rad kariet tak pôsobí pokojne a údaje sú v jednej línii. Na bielej ploche je karta piesková bez okraja, na pieskovej ploche biela (card--white). Na výraznom pozadí karta nie je.

<ul class="card-grid">
  <li class="card">
    <img class="card__image" src="…" alt="">
    <div class="card__body">
      <ul class="tag-list"><li><span class="tag">Oratko</span></li></ul>
      <h3 class="card__title"><a href="…">Nadpis</a></h3>
      <p>Krátky text.</p>
      <span class="card__more" aria-hidden="true">Čítať viac<svg class="icon" …>…</svg></span>
    </div>
  </li>
</ul>

Text v karte

Nadpis má najviac dva riadky, text dve až tri riadky, teda jednu až dve vety. Zoznam s ikonami je vždy na spodku karty, aby boli údaje v rade kariet na jednej línii.