Card

Le card sono dei contenitori che possono ospitare una grande varietà di contenuti come ad esempio testo, immagine, video e link. Per l'Ecosistema digitale Turismo Cultura sono previste varie tipologie di card, a seconda del loro utilizzo all'interno del portale.
Qui potrai trovare la User Interface, lo snippet e le modalità di utilizzo per le card nell’Ecosistema digitale.

Card news, bandi ed avvisi


Con categoria
Categoria

31 Luglio 2020

Ultricies ipsam facere adipisicing, sociosqu? Congue recusandae ornare quidem possimus, autem vitae enim integer? Provident, nobis temporibus dolores! Recusandae pharetra! Molestias. Nesciunt

continua a leggere
Con tag
Tag

31 Luglio 2020

Ultricies ipsam facere adipisicing, sociosqu? Congue recusandae ornare quidem possimus, autem vitae enim integer? Provident, nobis temporibus dolores! Recusandae pharetra! Molestias. Nesciunt

continua a leggere
Senza immagine
Categoria

31 Luglio 2020

Ultricies ipsam facere adipisicing, sociosqu? Congue recusandae ornare quidem possimus, autem vitae enim integer? Provident, nobis temporibus dolores! Recusandae pharetra! Molestias. Nesciunt

continua a leggere 
                                            
<!-- component -- card news, bandi ed avvisi con categoria -->
<div class="dms-card-news card">
    <div class="card-header"
        style="background-image: url('assets/img/placeholder-img.jpg');">
    </div>
    <div class="card-body">
        <div class="category-tag">
            <a href="#" title="vai a categoria" class="dms-link">Categoria</a>
        </div>
        <p class="date">31 Luglio 2020</p>
        <h4 class="tr-p3">Ultricies ipsam facere adipisicing, sociosqu?
            Congue recusandae ornare quidem possimus, autem vitae enim integer?
            Provident, nobis temporibus dolores! Recusandae pharetra! Molestias.
            Nesciunt</h4>
    </div>
    <div class="card-footer">
        <a href="#" title="continua a leggere">continua a leggere
            <i class="dms-wk-icon-arrow-slider-right"></i>
        </a>
    </div>
</div>
    
<!-- component -- card news, bandi ed avvisi con tag -->
<div class="dms-card-news card">
    <div class="card-header"
        style="background-image: url('assets/img/placeholder-img.jpg');">
    </div>
    <div class="card-body">
        <div class="category-tag">
            <a href="#" class="dms-tag dms-tag--news" role="button"
            title="vai a Tag">Tag</a>

        </div>
        <p class="date">31 Luglio 2020</p>
        <h4 class="tr-p3">Ultricies ipsam facere adipisicing, sociosqu?
            Congue recusandae ornare quidem possimus, autem vitae enim integer?
            Provident, nobis temporibus dolores! Recusandae pharetra! Molestias.
            Nesciunt</h4>
    </div>
    <div class="card-footer">
        <a href="#" title="continua a leggere">continua a leggere
            <i class="dms-wk-icon-arrow-slider-right"></i>
        </a>
    </div>
</div>
    
<!-- component -- card news, bandi ed avvisi senza immagine -->
<div class="dms-card-news card">
    <div class="card-body">
        <div class="category-tag">
            <a href="#" title="vai a categoria" class="dms-link">Categoria</a>
        </div>
        <div class="d-flex justify-content-between">
            <p class="date">31 Luglio 2020</p>
            <span class="dms-badge success-clr--bkg"></span>
        </div>
        <h4 class="tr-p3">Ultricies ipsam facere adipisicing, sociosqu?
            Congue recusandae ornare quidem possimus, autem vitae enim integer?
            Provident, nobis temporibus dolores! Recusandae pharetra! Molestias.
            Nesciunt</h4>
    </div>
    <div class="card-footer">
        <a href="#" title="continua a leggere">continua a leggere
            <i class="dms-wk-icon-arrow-slider-right"></i>
        </a>
    </div>
</div>


Card eventi


Eventi attivi con counter
01 giorni
25 ore
50 minuti
Accreditamento aperto

29/05/2020

Lorem ipsum dolor sit amet, molestiae appellantur

Lorem Ipsum - Bari

Buyers: 25
Sellers: 25
Configura
Eventi attivi
Open registration

29/07/2020

Lorem ipsum dolor sit amet, molestiae appellantur

Lorem Ipsum - Bari

Buyers: 25
Sellers: 25
Setup
Eventi in programma
Open registration

29/07/2020

Lorem ipsum dolor sit amet, molestiae appellantur

Piazzale Aldo Moro, 5 - Bari

Setup
Eventi trascorsi

29/05/2020

Lorem ipsum dolor sit amet, molestiae appellantur

Piazzale Aldo Moro, 5 - Bari

Setup 
                                            
<!-- eventi attivi con counter -->
<div class="dms-card-events card">
    <div class="card-header"
        style="background-image: url('assets/img/placeholder-img.jpg');">

        <div class="dms-card-events--counter d-flex">
            <div class="flex-fill">
                <span class="number">01</span>
                <span class="label">giorni</span>
            </div>
            <div class="flex-fill">
                <span class="number">25</span>
                <span class="label">ore</span>
            </div>
            <div class="flex-fill">
                <span class="number">50</span>
                <span class="label">minuti</span>
            </div>
        </div>
        <div class="status">Accreditamento aperto</div>
    </div>
    <div class="card-body">
        <div class="d-flex justify-content-between">
            <p class="date">29/05/2020</p>
            <span class="dms-badge success-clr--bkg"></span>
        </div>
        <h4 class="tr-p2">Lorem ipsum dolor sit amet, molestiae
            appellantur</h4>
        <p class="place"><i class="dms-wk-icon-pin"></i>Lorem Ipsum - Bari</p>
        <div class="info-users d-flex justify-content-between">
            <div class="d-flex align-items-center justify-content-center">
                <i class="dms-wk-icon-buyer"></i>
                <div class="type">Buyers: <span>25</span></div>
            </div>
            <div class="d-flex align-items-center justify-content-center">
                <i class="dms-wk-icon-seller"></i>
                <div class="type">Sellers: <span>25</span></div>
            </div>
        </div>
    </div>
    <div class="card-footer">
        <a href="#" title="vai a Configura">Configura
            <i class="dms-wk-icon-arrow-slider-right"></i>
        </a>
    </div>
</div>

<!-- eventi attivi -->
<div class="dms-card-events card">
    <div class="card-header"
        style="background-image: url('assets/img/placeholder-img.jpg');">
        <div class="status">Open registration</div>
    </div>
    <div class="card-body">

        <div class="d-flex justify-content-between">
            <p class="date">29/07/2020</p>
            <span class="dms-badge success-clr--bkg"></span>
        </div>

        <h4 class="tr-p2">Lorem ipsum dolor sit amet, molestiae appellantur</h4>
        <p class="place"><i class="dms-wk-icon-pin"></i>Lorem Ipsum - Bari</p>

        <div class="info-users d-flex justify-content-between">
            <div class="d-flex align-items-center justify-content-center">
                <i class="dms-wk-icon-buyer"></i>
                <div class="type">Buyers: <span>25</span></div>
            </div>
            <div class="d-flex align-items-center justify-content-center">
                <i class="dms-wk-icon-seller"></i>
                <div class="type">Sellers: <span>25</span></div>
            </div>
        </div>
    </div>

    <div class="card-footer">
        <a href="#" title="Go a Setup">Setup
            <i class="dms-wk-icon-arrow-slider-right"></i>
        </a>
    </div>
</div>

<!-- eventi in programma -->
<div class="dms-card-events card">
    <div class="card-header"
        style="background-image: url('assets/img/placeholder-img.jpg');">
        <div class="status">Open registration</div>
    </div>
    <div class="card-body">
        <div class="d-flex justify-content-between">
            <p class="date">29/07/2020</p>
            <span class="dms-badge success-clr--bkg"></span>
        </div>

        <h4 class="tr-p2">Lorem ipsum dolor sit amet, molestiae
            appellantur</h4>
        <p class="place"><i class="dms-wk-icon-pin"></i>Piazzale Aldo Moro, 5 - Bari</p>
    </div>

    <div class="card-footer">
        <a href="#" title="Go a Setup">Setup
            <i class="dms-wk-icon-arrow-slider-right"></i>
        </a>
    </div>
</div>

<!-- eventi trascorsi -->
<div class="dms-card-events card">
    <div class="card-header"
        style="background-image: url('assets/img/placeholder-img.jpg');">
    </div>
    <div class="card-body">
        <div class="d-flex justify-content-between">
            <p class="date">29/05/2020</p>
        </div>
        <h4 class="tr-p2">Lorem ipsum dolor sit amet, molestiae
            appellantur</h4>
        <p class="place"><i class="dms-wk-icon-pin"></i>Piazzale Aldo Moro, 5 - Bari</p>
    </div>
    <div class="card-footer">
        <a href="#" title="Go a Setup">Setup
            <i class="dms-wk-icon-arrow-slider-right"></i>
        </a>
    </div>
</div>


Card per mappa


Con immagine

29/07/2020

Lorem ipsum dolor sit amet, molestiae appellantur

Approfondisci
Con contatti

Lorem ipsum dolor sit amet, molestiae appellantur

70024 Gravina in Puglia (BA) +39 339 0000000 nomecognome@regionepuglia.it www.nomesito.it 
                                            
<!-- card per mappa con immagine -->
<div class="dms-card-map card">
    <div class="card-header"
        style="background-image: url('assets/img/placeholder-img.jpg');">
    </div>
    <div class="card-body">
        <p class="date">29/07/2020</p>
        <h4 class="tr-p2">Lorem ipsum dolor sit amet, molestiae
            appellantur</h4>
    </div>
    <div class="card-footer">
        <a href="#" title="vai ad approfondisci">Approfondisci
            <i class="dms-wk-icon-arrow-slider-right"></i>
        </a>
        <div class="arrow"></div>
    </div>
</div>

<!-- card per mappa con contatti -->
<div class="dms-card-map card">
    <div class="card-body">
        <h4 class="tr-p2">Lorem ipsum dolor sit amet, molestiae
            appellantur</h4>

        <div class="info-contact">
            <span>70024 Gravina in Puglia (BA)</span>
            <span><i class="dms-wk-icon-phone"></i>+39 339 0000000</span>
            <span><i class="dms-wk-icon-email"></i><a href="maito:nomecognome@regionepuglia.it" title="email">nomecognome@regionepuglia.it</a></span>
            <span><i class="dms-wk-icon-website"></i><a href="#"
                    title="vai al sito web" target="_blank">www.nomesito.it</a></span>
        </div>
    </div>
    <div class="card-footer">
        <div class="arrow"></div>
    </div>
</div>


Card tematica


Pagina interna al portale

ium distinctio amet lorem eleifend pulvinar magni faucibus! Plate

Modi magnis. Consequatur doloremque error provident repudiandae varius fringilla officia. Mus officiis. Duis egestas itaque.
Sito esterno

ium distinctio amet lorem eleifend pulvinar magni faucibus! Plate

Modi magnis. Consequatur doloremque error provident repudiandae varius fringilla officia. Mus officiis. Duis egestas itaque.

 
                                            
<!-- Card tematica per pagina interna al portale -->
<div class="dms-card-thematic">
    <a href="#" title="vai alla card" class="card">
        <div class="card-body">
            <h4 class="card-title tr-p2">ium distinctio amet lorem eleifend pulvinar
                magni faucibus! Plate</h4>
            <p class="card-text tr-p3">Modi magnis. Consequatur doloremque error
                provident repudiandae
                varius fringilla officia. Mus officiis. Duis egestas itaque.</p>
        </div>
    </a>
</div>

<!-- Card tematica per sito esterno -->
<div class="dms-card-thematic dms-card-thematic--ext">
    <a href="#" title="vai alla card" class="card">
        <div class="card-body">
            <h4 class="card-title tr-p2">ium distinctio amet lorem eleifend pulvinar
                magni faucibus! Plate</h4>
            <i class="dms-wk-icon-external-link"> </i>
            <p class="card-text tr-p3">Modi magnis. Consequatur doloremque error
                provident repudiandae
                varius fringilla officia. Mus officiis. Duis egestas itaque.</p>
        </div>
    </a>
</div>


Card utilità


Link alle sezioni interne al portale (BURP, Open Data, Albo Pretorio, etc.)

Open data

 
                                            
<!-- Card utilità -->
<div class="dms-card-utility">
    <a href="#" class="d-flex align-items-center" title="vai a Open data">
        <i class="dms-wk-icon-open-data"></i>
        <h3>Open data</h3>
    </a>
</div>


Card generica e contatti


Generica (icona, testi e link personalizzabili)

Titolo

Habitant dignissimos sed inventore, gravida dis non mollitia, dictum pulvinar pharetra, enim litora cupiditate, aliquid, tellus architecto primis? Lorem sapien dolorem facere, dicta sit, amet similique sed congue! Voluptatum, sit, dictum fames cupiditate lorem? Diamlorem pretium, esse! Maiores, delectus eu sociis reiciendis, habitasse natoque ornare?

Approfondisci
Contatti e informazioni

Contatti

Telefono: 000 000 00 00

Email: nomecognome@regionepuglia.it

                                            
<!-- Card generica -->
<div class="dms-card-generic card">
    <div class="card-body">
        <div class="title d-flex align-items-center"><i class="dms-wk-icon-guida"></i><h4>Titolo</h4></div>
        <hr>
        <p>Habitant dignissimos sed inventore, gravida dis non mollitia, dictum pulvinar pharetra, enim litora cupiditate, aliquid, 
            tellus architecto primis? Lorem sapien dolorem facere, dicta sit, amet similique sed congue! Voluptatum, sit, 
            dictum fames cupiditate lorem? Diamlorem pretium, esse! Maiores, delectus eu sociis reiciendis, habitasse natoque ornare?</p>
    </div>
    <div class="card-footer">
        <a class="float-right text-uppercase" href="#" title="Approfondisci" target="_blank">Approfondisci <i class="dms-wk-icon-arrow-slider-right"></i></a>
    </div>
</div>

<!-- Card Contatti e informazioni -->
<div class="dms-card-generic card">
    <div class="card-body">
        <div class="title d-flex align-items-center"><i class="dms-wk-icon-contacts"></i><h4>Contatti</h4></div>
        <hr>
        <p><i class="dms-wk-icon-phone"></i>Telefono: <span>000 000 00 00</span></p>
        <p><i class="dms-wk-icon-email"></i>Email: <a href="maito:nomecognome@regionepuglia.it" title="email">nomecognome@regionepuglia.it</a></p>
    </div>
    <div class="card-footer">
        <div class="social">
            <a href="https://www.facebook.com/weareinpuglia"
            title="Facebook" target="_blank">
                <i class="dms-wk-icon-fb-light"></i>
            </a>
            <a href="https://www.instagram.com/weareinpuglia"
                title="Instagram" target="_blank">
                <i class="dms-wk-icon-ig-light"></i>
            </a>
            <a href="https://twitter.com/weareinpuglia" title="Twitter"
                target="_blank">
                <i class="dms-wk-icon-tw-light"></i>
            </a>
            <a href="https://www.youtube.com/user/Viaggiareinpuglia"
                title="Youtube" target="_blank">
                <i class="dms-wk-icon-yt-light"></i>
            </a>
        </div>
    </div>
</div>


Card contenuti multimediali


Documento

Lorem ipsum dolor sit amet, molestiae appellantur
Audio

Lorem ipsum dolor sit amet, molestiae appellantur
Immagini

Lorem ipsum dolor sit amet, molestiae appellantur
Video

Lorem ipsum dolor sit amet, molestiae appellantur
Modale con video

Lorem ipsum dolor sit amet, molestiae appellantur

Modale con immagine

Lorem ipsum dolor sit amet, molestiae appellantur

                                            
<!-- card per documenti -->
<a class="dms-card-multimedia card" href="#" title="Card per documenti">
    <div class="card-header d-flex"
        style="background-image: url('assets/img/placeholder-img.jpg');">
    </div>
    <div class="card-body d-flex">
        <i class="align-self-start dms-wk-icon-document"></i>
        <h4 class="text-uppercase tr-p2">Lorem ipsum dolor sit amet, molestiae
            appellantur</h4>
    </div>
</a>

<!-- card per audio -->
<a class="dms-card-multimedia card" href="#" title="Card per audio">
    <div class="card-header d-flex"
        style="background-image: url('assets/img/placeholder-img.jpg');">
    </div>
    <div class="card-body d-flex">
        <i class="dms-wk-icon-audio"></i>
        <h4 class="text-uppercase tr-p2">Lorem ipsum dolor sit amet, molestiae
            appellantur</h4>
    </div>
</a>

<!-- card per immagini -->
<a class="dms-card-multimedia card" href="#" title="Card per immagini">
    <div class="card-header d-flex"
        style="background-image: url('assets/img/placeholder-img.jpg');">
    </div>
    <div class="card-body d-flex">
        <i class="dms-wk-icon-photo"></i>
        <h4 class="text-uppercase tr-p2">Lorem ipsum dolor sit amet, molestiae
            appellantur</h4>
    </div>
</a>

<!-- card per audio -->
<a href="#" title="Card per video" class="dms-card-multimedia card">
    <div class="card-header d-flex"
        style="background-image: url('assets/img/placeholder-img.jpg');">
    </div>
    <div class="card-body d-flex">
        <i class="dms-wk-icon-video"></i>
        <h4 class="text-uppercase tr-p2">Lorem ipsum dolor sit amet, molestiae
            appellantur</h4>
    </div>
</a>	

<!-- card per video con modale -->
<div class="dms-card-multimedia card">
    <div class="card-header d-flex justify-content-center align-items-center"
            style="background-image: url('assets/img/placeholder-img.jpg');">
        
        <a data-toggle="modal" data-target="#multimediaCardVideo" title="Vedi video">
            <i class="dms-wk-icon-play"></i>
        </a>
    </div>
    <div class="card-body">
        <h4 class="text-uppercase tr-p2">Lorem ipsum dolor sit amet, molestiae
            appellantur</h4>
    </div>
</div>

<!-- contenuto modale video -->
<div class="dms-modal modal fade" id="multimediaCardVideo" tabindex="-1" role="dialog"
        aria-labelledby="multimediaCardVideoLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header mb-5">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <iframe width="100%" height="315" src="https://www.youtube.com/embed/pGoyh8KKltI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--primary"
                    data-dismiss="modal" aria-label="Close">Chiudi</button>
            </div>
        </div>
    </div>
</div>

<!-- card per video con immagini -->
<div class="dms-card-multimedia card">
    <div class="card-header d-flex justify-content-center align-items-center"
        style="background-image: url('assets/img/placeholder-img.jpg');">
        <a data-toggle="modal" data-target="#multimediaCardImmagini" title="espandi">
            <i class="dms-wk-icon-expand"></i>
        </a>
    </div>
    <div class="card-body">
        <h4 class="text-uppercase tr-p2">Lorem ipsum dolor sit amet, molestiae
            appellantur</h4>
    </div>
</div>

<!-- contenuto modale immagini -->
<div class="dms-modal modal fade" id="multimediaCardImmagini" tabindex="-1" role="dialog"
    aria-labelledby="multimediaCardImmaginiLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header mb-5">
                <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">×</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <img src="assets/img/placeholder-img.jpg" alt="">
            </div>
            
            <!-- Modal footer -->
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn dms-btn dms-btn--primary"
                    data-dismiss="modal" aria-label="Close">Chiudi</button>
            </div>
        </div>
    </div>
</div>


Card servizi e argomenti


Argomento
Operatori culturali
Servizio - generico
Pruomuovi evento
Promuovi evento
Servizio - Impresa
Impresa Caio e Sempronio
Impresa Caio e Sempronio e Mevia e Tizio
Servizio - Aggiungi
Aggiungi locazione turistica 


                                            
<!-- card argomento -->
<div class="dms-card-services card with-top-icon">
    <div class="card-header">
        <div class="icon-wrapper">
            <i class="dms-wk-icon-op-culturali"></i>
        </div>
    </div>
    <div class="card-body"></div>
    <div class="card-footer d-flex align-items-center justify-content-center">
        <a class="title tr-p2" title="vai a Operatori culturali" href="#">Operatori culturali</a>
    </div>
</div>

<!-- card servizio - servizio generico -->
<div class="dms-card-services card with-middle-image">
    <div class="card-body d-flex align-items-center justify-content-center">
        <img src="assets/img/evento.svg" alt="Pruomuovi evento" class="img-fluid">
    </div>
    <div class="card-footer d-flex align-items-center justify-content-center">
        <a class="title tr-p2" title="vai a Prumuovi evento" href="#">Promuovi evento</a>
    </div>
</div>

<!-- card servizio - servizio impresa -->
<div class="dms-card-services card with-middle-image">
    <i class="left-icon dms-wk-icon-info" data-toggle="tooltip" data-placement="top" title="Info impresa"></i>
    <i class="right-icon dms-wk-icon-error error-clr--txt" data-toggle="tooltip" data-placement="top" title="Impresa cessata"></i>
    <div class="card-body d-flex align-items-center justify-content-center">
        <img src="assets/img/impresa-1.svg" alt="Impresa Caio e Sempronio" class="img-fluid">
    </div>
    <div class="card-footer d-flex align-items-center justify-content-center">
        <a class="title tr-p2" title="Vai a Impresa Caio" href="#">Impresa Caio e Sempronio e Mevia e Tizio</a>
    </div>
</div>

<!-- card servizio - aggiungi -->
<div class="dms-card-h-services d-flex align-items-center">
    <a href="#" class="d-flex align-items-center justify-content-start" title="Aggiungi locazione turistica">
        <div class="icon-wrapper">
            <i class="dms-wk-icon-aggiungi-locazione"></i>
        </div>
        <span>Aggiungi locazione turistica</span>
    </a>
</div>

Utilizzo

Le card sono componenti html che non necessitano di implementazioni lato js. Ognuna di esse ha una tipologia ben delineata ed occorre fare attenzione ad utilizzarle nel modo corretto. Per le card news, bandi ed avvisi occorre fare una distinzione tra tag e categoria, in quanto le prime sono dei macrocontenitori dell'argomento della notizia mentre le seconde sono le parole chiave che descrivono un articolo. Inoltre, i tag possono essere più di uno e possono anche considerarsi di secondo livello rispetto ad una categoria. Per le card multimediali con modale fare riferimento anche all'apposita pagina Modale per eventuali esigenze strutturali.