Webové komponenty

Karta

Základná kartička

Základnú kartičku použite ako hlavnú kartičku (primárnu kartičku). Môžete ju použiť ako najaktuálnejší obsah v aktualitách alebo ako dôležitý obsah, ktorý chcete, aby používateľ videl/našiel. Použite iba 1 základnú kartičku v jednom bloku. Použite maximálne 2 tagy.

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" width="100%" src="/public/assets/images/examples/ministerstvo-aktuality-cover.png" 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 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 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.

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" width="100%" src="/public/assets/images/examples/ministerstvo-aktuality-cover.png" 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.

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" width="100%" src="/public/assets/images/examples/ministerstvo-aktuality-cover.png" 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.

                        

<div class="idsk-card idsk-card-simple">

    <a href="#" title="Lorem ipsum dolor sit amet">
        <img class="idsk-card-img idsk-card-img-simple" width="100%" src="/public/assets/images/examples/ministerstvo-aktuality-cover.png" 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.

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" width="100%" src="/public/assets/images/examples/ministerstvo-aktuality-cover.png" 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. Použite maximálne 2 tagy.

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.

                        

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

                                

<div class="idsk-card idsk-card-profile-vertical">

    <a href="#" title="Macko Pú">
        <img class="idsk-card-img idsk-card-img-profile-vertical" width="100%" src="/public/assets/images/examples/the-pooh-bear.jpg" alt="Macko Pú" 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="Macko Pú">Macko Pú</a>
        </div>

        <div class="idsk-body idsk-body-profile-vertical">
            <a href="#" class="idsk-card-title govuk-link" title="Štátny tajomník medu a radosti">
                Štátny tajomník medu a radosti
            </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.

“Aký je deň?” spýtal sa Pú. “Je dnes,” odpovedalo prasiatko. “Môj najobľúbenejší deň,” povedal Pú.
                        

<div class="idsk-card idsk-card-profile-horizontal">

    <a href="#" title="Macko Pú">
        <img class="idsk-card-img idsk-card-img-profile-horizontal" width="100%" src="/public/assets/images/examples/the-pooh-bear.jpg" alt="Macko Pú" 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="Macko Pú">Macko Pú</a>
        </div>

        <div class="idsk-body idsk-body-profile-horizontal">
            <a href="#" class="idsk-card-title govuk-link" title="Štátny tajomník medu a radosti">
                Štátny tajomník medu a radosti
            </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 src="/assets/images/quote-left.png" xlink:href="" width="29" height="25"></image>
            </svg>
        </div>
        <div class="idsk-quote"> “Aký je deň?” spýtal sa Pú. “Je dnes,” odpovedalo prasiatko. “Môj najobľúbenejší deň,” povedal Pú.</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 src="/assets/images/quote-right.png" xlink:href="" width="29" height="25"></image>
            </svg>
        </div>

    </div>
</div>