Karta
Obsah:
Pozrite si vzor použitia kartičiek.
Hlavná kartička
Hlavnú kartičku použijete pre najaktuálnejší obsah v aktualitách alebo, ako dôležitý obsah, ktorý chcete, aby používateľ videl/našiel. Použite iba 1 hlavnú kartičku v jednom bloku, to znamená, že treba použiť grid systém na celú šírku <div class="govuk-grid-column-full"> Použite maximálne 2 tagy.
Kartička je obalená v <div> elemente ktorý vždy používa triedu idsk-card. Túto triedu je potrebné písať ako prvú a za ňou všetky ostatné. V prípade hlavnej kartičky pridávame ešte triedu idsk-card-basic.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="idsk-card idsk-card-basic">
<a href="#" title="Lorem ipsum dolor sit amet: consectetur adipiscing elit!">
<img class="idsk-card-img idsk-card-img-basic" src="/public/assets/images/image-placeholder.jpg" alt="Lorem ipsum dolor sit amet: consectetur adipiscing elit!" aria-hidden="true" />
</a>
<div class="idsk-card-content idsk-card-content-basic">
<div class="idsk-card-meta-container">
<span class="idsk-card-meta idsk-card-meta-date"><a href="#" class="govuk-link" title="Pridané dňa: 1.7.2020">1.7.2020</a></span> <span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 1">Tag 1</a></span><span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 2">Tag 2</a></span>
</div>
<div class="idsk-heading idsk-heading-basic">
<a href="#" class="idsk-card-title govuk-link" title="Lorem ipsum dolor sit amet: consectetur adipiscing elit!">Lorem ipsum dolor sit amet: consectetur adipiscing elit!</a>
</div>
<p class="idsk-body idsk-body-basic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
Sekundárna kartička
Sekundárnu kartičku použite v jednom bloku spolu so základnou kartičkou alebo s hero kartičkou. V jednom bloku môžete použiť aj iba sekundárne kartičky no odporúčame ich používať po základnej, alebo po hero kartičke. Názov článku musí byť výstižný, maximálne na 4 riadky. Popis článku by mal byť maximálne na 6 riadkov. Použite maximálne 2 tagy tak, aby sa zmestili do jedného riadku spolu s dátum publikovania článku.
Pri sekundárnej kartičke odporúčame použiť grid systém s rozložením 1/3 alebo 1/4. V prípade použitia pomeru 1/3 použiť obaľovací tag <div class="govuk-grid-column-one-third">. A v prípade použitia grid rozloženia 1/4 použiť obaľovací tag <div class="govuk-grid-one-quarter">. Týmto spôsobom je jednoduché rozlíšiť sekundárnu kartičku od základnej a taktiež je možné ich použiť viacero vedľa seba.
Kartička je obalená v <div> elemente ktorý vždy používa triedu idsk-card. Túto triedu je potrebné písať ako prvú a za ňou triedu idsk-card-secondary.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
<div class="idsk-card idsk-card-secondary">
<a href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do">
<img class="idsk-card-img idsk-card-img-secondary" src="/public/assets/images/image-placeholder.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do" aria-hidden="true" />
</a>
<div class="idsk-card-content idsk-card-content-secondary">
<div class="idsk-card-meta-container">
<span class="idsk-card-meta idsk-card-meta-date"><a href="#" class="govuk-link" title="Pridané dňa: 1.7.2020">1.7.2020</a></span> <span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 1">Tag 1</a></span><span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 2">Tag 2</a></span>
</div>
<div class="idsk-heading idsk-heading-secondary">
<a href="#" class="idsk-card-title govuk-link" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</a>
</div>
<p class="idsk-body idsk-body-secondary">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
</div>
Sekundárna kartička horizontálna
Sekundárnu kartičku horizontálnu použite keď chcete zobraziť používateľovi pod článkom súvisiace články. Názov kartičky musí byť výstižný. Popis kartičky nesmie presahovať pod fotografiu. Použite maximálne 2 tagy.
Pri tejto kartičke odporúčame použiť grid s plnou šírkou poprípade pomer 2/3. V prípade použitia celej šírky používame obaľovací tag <div class="govuk-grid-column-full">. V prípade použitia gridu v pomere 2/3 treba použiť obaľovací tag <div class="govuk-grid-column-two-thirds">.
Kartička je obalená v <div> elemente ktorý vždy používa triedu idsk-card. Túto triedu je potrebné písať ako prvú a za ňou triedu idsk-card-secondary-horizontal.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
<div class="idsk-card idsk-card-secondary-horizontal">
<a href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do">
<img class="idsk-card-img idsk-card-img-secondary-horizontal" src="/public/assets/images/image-placeholder.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do" aria-hidden="true" />
</a>
<div class="idsk-card-content idsk-card-content-secondary-horizontal">
<div class="idsk-card-meta-container">
<span class="idsk-card-meta idsk-card-meta-date"><a href="#" class="govuk-link" title="Pridané dňa: 1.7.2020">1.7.2020</a></span> <span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 1">Tag 1</a></span><span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 2">Tag 2</a></span>
</div>
<div class="idsk-heading idsk-heading-secondary-horizontal">
<a href="#" class="idsk-card-title govuk-link" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</a>
</div>
<p class="idsk-body idsk-body-secondary-horizontal">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
</div>
</div>
Jednoduchá kartička
Jednoduchú kartičku použite, keď nepotrebujete pridať bližší popis. Názov musí byť výstižný, maximálne na 4 riadky. Použite maximálne 2 tagy.
Jednoduchá kartička by mala používať grid systém v pomere 1/3 alebo 1/4. Napr. rozloženie 1/3 používa obaľovací tag <div class="govuk-grid-column-one-third">.
Kartička je obalená v <div> elemente ktorý vždy používa triedu idsk-card. Túto triedu je potrebné písať ako prvú a za ňou triedu idsk-card-secondary-horizontal.
<div class="idsk-card idsk-card-simple">
<a href="#" title="Lorem ipsum dolor sit amet">
<img class="idsk-card-img idsk-card-img-simple" src="/public/assets/images/image-placeholder.jpg" alt="Lorem ipsum dolor sit amet" aria-hidden="true" />
</a>
<div class="idsk-card-content idsk-card-content-simple">
<div class="idsk-card-meta-container">
<span class="idsk-card-meta idsk-card-meta-date"><a href="#" class="govuk-link" title="Pridané dňa: 1.7.2020">1.7.2020</a></span> <span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 1">Tag 1</a></span><span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 2">Tag 2</a></span>
</div>
<div class="idsk-heading idsk-heading-simple">
<a href="#" class="idsk-card-title govuk-link" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a>
</div>
</div>
</div>
Hero kartička
Hero kartičku môžete použiť ako ekvivalent základnej kartičky (teda ako primárnu kartičku). Názov kartičky musí byť výstižný. Popis kartičky nesmie presahovať pod fotografiu.
Používa horizontálne zobrazenie a rozdeľuje obrázok a kontent na dve polovice. Pri tejto kartičke odporúčame použiť obaľovací tag plnej šírky <div class="govuk-grid-column-full">.
Kartička je obalená v <div> elemente ktorý vždy používa triedu idsk-card. Túto triedu je potrebné písať ako prvú a za ňou triedu idsk-card-hero.
Lorem ipsum dolor sit amet, consenctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="idsk-card idsk-card-hero">
<a href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed fo eiusmod tempor">
<img class="idsk-card-img idsk-card-img-hero" src="/public/assets/images/image-placeholder.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed fo eiusmod tempor" aria-hidden="true" />
</a>
<div class="idsk-card-content idsk-card-content-hero">
<div class="idsk-card-meta-container">
<span class="idsk-card-meta idsk-card-meta-date"><a href="#" class="govuk-link" title="Pridané dňa: 1.7.2020">1.7.2020</a></span> <span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 1">Tag 1</a></span><span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 2">Tag 2</a></span>
</div>
<div class="idsk-heading idsk-heading-hero">
<a href="#" class="idsk-card-title govuk-link" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed fo eiusmod tempor">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed fo eiusmod tempor</a>
</div>
<p class="idsk-body idsk-body-hero">
Lorem ipsum dolor sit amet, consenctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
Základná kartička bez obrázka
Kartičku použite, ak chcete zobraziť viacero článkov na menšom priestore. Z toho dôvodu sa používa aj menší font ako pri základnej kartičke. Použite maximálne 2 tagy.
Meta dáta pri tejto kartičke sa zobrazujú na konci kontentu. Pri tejto kartičke použivajte zozbrazenie na celú šírku pomocou obaľovacieho tagu <div class="govuk-grid-column-full">.
Kartička je obalená v <div> elemente ktorý vždy používa triedu idsk-card. Túto triedu je potrebné písať ako prvú a za ňou triedu idsk-card-basic-variant.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua/ Ut enim ad minim veniam, quis nonstrud exercitation ullamc Lorem ipsum dolor.
<div class="idsk-card idsk-card-basic-variant">
<div class="idsk-card-content idsk-card-content-basic-variant">
<div class="idsk-heading idsk-heading-basic-variant">
<a href="#" class="idsk-card-title govuk-link" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</a>
</div>
<p class="idsk-body idsk-body-basic-variant">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua/ Ut enim ad minim veniam, quis nonstrud exercitation ullamc Lorem ipsum dolor.
</p>
<div class="idsk-card-meta-container">
<span class="idsk-card-meta idsk-card-meta-date"><a href="#" class="govuk-link" title="Pridané dňa: 1.7.2020">1.7.2020</a></span> <span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 1">Tag 1</a></span><span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 2">Tag 2</a></span>
</div>
</div>
</div>
Základná kartička bez obrázka a popisu
Kartičku použite, ak chcete zobraziť viacero článkov na menšom priestore. Použite maximálne 2 tagy.
Meta dáta pri tejto kartičke sa zobrazujú na konci kontentu. Pri tejto kartičke použivajte zozbrazenie na celú šírku pomocou obaľovacieho tagu <div class="govuk-grid-column-full">.
Kartička je obalená v <div> elemente ktorý vždy používa triedu idsk-card. Túto triedu je potrebné písať ako prvú a za ňou triedu idsk-card-basic-variant. Pri používaní tohto komponentu je potrebné vynechať odstavec s popisom.
<div class="idsk-card idsk-card-basic-variant">
<div class="idsk-card-content idsk-card-content-basic-variant">
<div class="idsk-heading idsk-heading-basic-variant">
<a href="#" class="idsk-card-title govuk-link" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor magna aliqua">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor magna aliqua</a>
</div>
<div class="idsk-card-meta-container">
<span class="idsk-card-meta idsk-card-meta-date"><a href="#" class="govuk-link" title="Pridané dňa: 1.7.2020">1.7.2020</a></span> <span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 1">Tag 1</a></span><span class="idsk-card-meta idsk-card-meta-tag"><a href="#" class="govuk-link" title="Tag 2">Tag 2</a></span>
</div>
</div>
</div>
Profilová kartička - vertikálna
Kartičku použite, keď chcete umiestniť viacero profilových kartičiek vedľa seba. Po kliknutí na meno sa zobrazí stránka so životopisom. Po kliknutí na rolu/post/funkciu sa zobrazí stránka so všeobecným popisom povinností a kompetencií danej funkcie.
Pri vertikálnej profilovej kartičke odporúčame použiť grid systém v pomere 1/3 nasledujúcim spôsobom pomocou obaľovacieho tagu<div class="govuk-grid-column-one-third">.
Kartička je obalená v <div> elemente ktorý vždy používa triedu idsk-card. Túto triedu je potrebné písať ako prvú a za ňou triedu idsk-card-profile-vertical.
<div class="idsk-card idsk-card-profile-vertical">
<a href="#" title="Meno Priezvisko">
<img class="idsk-card-img idsk-card-img-profile-vertical" src="/public/assets/images/image-placeholder.jpg" alt="Meno Priezvisko" aria-hidden="true" />
</a>
<div class="idsk-card-content idsk-card-content-profile-vertical">
<div class="idsk-heading idsk-heading-profile-vertical">
<a href="#" class="idsk-card-title govuk-link" title="Meno Priezvisko">Meno Priezvisko</a>
</div>
<div class="idsk-body idsk-body-profile-vertical">
<a href="#" class="idsk-card-title govuk-link" title="Rola/funkcia">
Rola/funkcia
</a>
</div>
</div>
</div>
Profilová kartička - horizontálna
Kartičku použite, keď chcete zvýrazniť osobu alebo post, ktorý je zastavaný. Napríklad pri ministroch, výkonných riaditeľoch podnikov a pod. Pri tejto kartičke sa môže použiť aj motto.
Pri horizonálnej profilovej kartičke odporúčame použiť grid systém v plnej šírke nasledujúcim spôsobom pomocou obaľovacieho tagu <div class="govuk-grid-column-full">.
Kartička je obalená v <div> elemente ktorý vždy používa triedu idsk-card. Túto triedu je potrebné písať ako prvú a za ňou triedu idsk-card-profile-horizontal.
<div class="idsk-card idsk-card-profile-horizontal">
<a href="#" title="Meno Priezvisko">
<img class="idsk-card-img idsk-card-img-profile-horizontal" src="/public/assets/images/image-placeholder.jpg" alt="Meno Priezvisko" aria-hidden="true" />
</a>
<div class="idsk-card-content idsk-card-content-profile-horizontal">
<div class="idsk-heading idsk-heading-profile-horizontal">
<a href="#" class="idsk-card-title govuk-link" title="Meno Priezvisko">Meno Priezvisko</a>
</div>
<div class="idsk-body idsk-body-profile-horizontal">
<a href="#" class="idsk-card-title govuk-link" title="Rola/funkcia">
Rola/funkcia
</a>
</div>
<div aria-hidden="true">
<svg width="24" height="19" viewBox="0 0 29 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M26.3553 0.0139084C23.5864 0.226497 19.9201 2.88 17.0759 7.02567C15.053 9.97412 12.8391 14.6653 12.8391 18.4203C12.8391 21.3658 15.151 23.7536 18.0028 23.7536C20.8546 23.7536 23.1665 21.3658 23.1665 18.4203C23.1665 15.9126 21.4908 13.8092 19.233 13.2392C19.7995 11.258 20.8141 9.10337 22.2396 7.02567C24.1378 4.25885 26.4022 2.15668 28.5216 1.00119L26.3553 0.0139084Z" fill="#003078"/>
<path d="M4.23679 7.02557C7.22761 2.66622 11.1274 -0.0431738 13.937 0.000520662L15.8902 0.890673C13.7117 2.01967 11.3608 4.16818 9.40047 7.02557C7.97502 9.10327 6.96037 11.2579 6.39387 13.2391C8.65175 13.8091 10.3274 15.9125 10.3274 18.4202C10.3274 21.3657 8.0155 23.7535 5.16368 23.7535C2.31186 23.7535 0 21.3657 0 18.4202C0 14.6652 2.21394 9.97402 4.23679 7.02557Z" fill="#003078"/>
<image href="/assets/images/quote-left.png" xlink:href="" width="29" height="25"></image>
</svg>
</div>
<div class="idsk-quote"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="idsk-quote-right" aria-hidden="true">
<svg width="24" height="20" viewBox="0 0 29 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.1662 24.4934C4.93513 24.2808 8.60138 21.6273 11.4456 17.4817C13.4684 14.5332 15.6824 9.84205 15.6824 6.08707C15.6824 3.14154 13.3705 0.753727 10.5187 0.753727C7.66689 0.753727 5.35503 3.14154 5.35503 6.08707C5.35503 8.59472 7.03065 10.6982 9.28852 11.2681C8.72202 13.2493 7.70737 15.404 6.28192 17.4817C4.38369 20.2485 2.1193 22.3506 -0.000114441 23.5061L2.1662 24.4934Z" fill="#003078"/>
<path d="M24.2847 17.4818C21.2939 21.8411 17.3941 24.5505 14.5845 24.5068L12.6313 23.6167C14.8098 22.4877 17.1606 20.3391 19.121 17.4818C20.5465 15.4041 21.5611 13.2494 22.1276 11.2682C19.8697 10.6983 18.1941 8.59482 18.1941 6.08716C18.1941 3.14164 20.506 0.753824 23.3578 0.753824C26.2096 0.753824 28.5215 3.14164 28.5215 6.08716C28.5215 9.84214 26.3075 14.5333 24.2847 17.4818Z" fill="#003078"/>
<image href="/assets/images/quote-right.png" xlink:href="" width="29" height="25"></image>
</svg>
</div>
</div>
</div>