Webové komponenty

Súvisiaci obsah

Súvisiaci obsah slúži na to, aby ste používateľovi zobrazili odkazy na podobné, súvisiace témy.

Obsah:

Pri článkoch ho použite na konci, pod článkom. Môžu sa tam nachádzať odkazy na články, ktoré tému rozvíjajú, ďalej vysvetľujú alebo sú príbuzného charakteru.

Ak to rozloženie obsahu dovoľuje, môžete ho použiť na pravej strane obrazovky v rozložení ⅔ obsah a ⅓ súvisiaci obsah. Nepoužívajte viac ako 5 odkazov v tomto komponente.

Vzor súvisiaceho obsahu

---

            
<div class="govuk-grid-column-two-thirds">
  <div class="idsk-related-content " data-module="idsk-related-content">
    <hr class="idsk-related-content__line" aria-hidden="true" />
    <h4 class="idsk-related-content__heading govuk-heading-s">Súvisiace témy (⅔)</h4>
    <ul class="idsk-related-content__list govuk-list">
      <li class="idsk-related-content__list-item">
        <a class="idsk-related-content__link" href="#" title="Súvisiaca téma č. 1">Súvisiaca téma č. 1</a>
      </li>
      <li class="idsk-related-content__list-item">
        <a class="idsk-related-content__link" href="#" title="Súvisiaca téma č. 2">Súvisiaca téma č. 2</a>
      </li>
      <li class="idsk-related-content__list-item">
        <a class="idsk-related-content__link" href="#" title="Súvisiaca téma č. 3">Súvisiaca téma č. 3</a>
      </li>
    </ul>
  </div>
</div>

---

            
<div class="govuk-grid-column-one-third">
  <div class="idsk-related-content " data-module="idsk-related-content">
    <hr class="idsk-related-content__line" aria-hidden="true" />
    <h4 class="idsk-related-content__heading govuk-heading-s">Súvisiace témy (⅓)</h4>
    <ul class="idsk-related-content__list govuk-list">
      <li class="idsk-related-content__list-item">
        <a class="idsk-related-content__link" href="#" title="Súvisiaca téma č. 1">Súvisiaca téma č. 1</a>
      </li>
      <li class="idsk-related-content__list-item">
        <a class="idsk-related-content__link" href="#" title="Súvisiaca téma č. 2">Súvisiaca téma č. 2</a>
      </li>
      <li class="idsk-related-content__list-item">
        <a class="idsk-related-content__link" href="#" title="Súvisiaca téma č. 3">Súvisiaca téma č. 3</a>
      </li>
    </ul>
  </div>
</div>