Components

Reusable modules to provide modal dialog, iconography alerts.
Extensible objects.

Cards

label 23 215

Lorem ipsum dolor sit

label 23 215

Lorem ipsum dolor sit

label 23 215

Lorem ipsum dolor sit

                    
<!-- Card -->
<div class="card">
    <img src="" alt="" />
    <div class="content-card">
        <span class="label-news fleft">label</span>
        <span class="icon-comentaris fright">23</span>
        <span class="icon-visites fright mgright20">215</span>
        <div class="clear"></div>
        <h3>Lorem ipsum dolor sit</h3>
    </div>
</div>
                    
                

Smart Banner

Coches.net para IOS

(999.999)

                    
<div class="mt-SmartBanner">
  <button class="mt-SmartBanner-closeBtn" data-banner-top="close">
    <span class="u-hide--visually">Cerrar</span>
    <svg class="mt-Icon mt-Icon--light">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprite/icons.svg#close"></use>
    </svg>
  </button>
  <img src="http://placehold.it/70x70?text=icon" width="70" height="70" />
  <div class="mt-SmartBanner-content">
    <div class="mt-SmartBanner-info">
      <p>Coches.net <strong>para IOS</strong></p>
      <p class="mt-SmartBanner-stars">
         <svg class="mt-Icon mt-Icon--small">
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprite/icons.svg#star-full"></use>
        </svg>
         <svg class="mt-Icon mt-Icon--small">
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprite/icons.svg#star-full"></use>
        </svg>
         <svg class="mt-Icon mt-Icon--small">
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprite/icons.svg#star-full"></use>
        </svg>
         <svg class="mt-Icon mt-Icon--small">
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprite/icons.svg#star-full"></use>
        </svg>
         <svg class="mt-Icon mt-Icon--small">
           <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../img/sprite/icons.svg#star-empty"></use>
        </svg>
        (999.999)
      </p>
    </div>
    <div class="mt-SmartBanner-cta">
      <button class="mt-SmartBanner-installBtn mt-Button mt-Button--secondary mt-Button--small">Instalar</button>
    </div>
  </div>
</div>
                    
                

Toast

JS needed: drive.min.js

                    
Settings
showToast({
    style : 'ok',             // Border and icon value. Possible values: ok | info | warning | error
    icon : 'icon-ok',         // Toast icon. Icon list
    paragraph : 'Guardando',  // Text.
    delay_time : 1500         // Time in screen,
}]
                    
                

Modal dialog

Perfect for contextual message to show only that functionality to the users in a given time.

JS needed: drive.min.js

Simple dialog

Show dialog

Exemple de diàleg modal

Lorem ipsum dolor sit amet!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor.

¿Con qué periodicidad quieres recibir tu alerta?

                        
<!-- Basic dialog -->
<!-- Launch dialog -->
<a href="#exemple-dialeg" data-modal="open">Mostrar diàleg</a>
<!-- Content dialog -->
<div id="exemple-dialeg" class="mt-modal" data-modal="modal">
    <div class="mt-modal__header">
        <h3 class="mt-modal__title">Exemple de diàleg modal</h3>
        <div class="mt-modal__close-btn modal-close" data-modal="close">
            <span class="icon-tancar2"></span>
        </div>
    </div>
    <div class="mt-modal__body">
        <div class="mt-modal__body-section">
            <h2>Lorem ipsum dolor sit amet!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor.</p>
        </div>
        <div class="mt-modal__body-section">
            <h3>¿Con qué periodicidad quieres recibir tu alerta?</h3>
        </div>
        <div class="mt-modal__body-section mt-radio">
            <label class="mt-radio__label"><input type="radio" name="radios" id="radio1" data-days="1" />Periodicidad cada día</label>
        </div>
    </div>
    <div class="mt-modal__footer right">
        <input type="button" class="btn btn-s" value="Acció secundaria" />
        <input type="button" class="btn btn-s btn-border-dark" value="Acció alternativa" />
    </div>
</div>
                        
                    

Legacy markup

Show dialog legacy

Picture dialog

Show picture dialog

Exemple de diàleg modal

Lorem ipsum dolor sit amet!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor.

                        
<!-- Picture dialog -->
<!-- Launch dialog -->
<a href="#exemple-dialeg" rel="modal-dialog">Mostrar diàleg</a>
<!-- Content dialog -->


<div id="exemple-img-dialeg" class="mt-modal" data-modal="modal">
    <div class="mt-modal__header">
        <h3 class="mt-modal__title">Exemple de diàleg modal</h3>
        <div class="mt-modal__close-btn modal-close" data-modal="close">
            <span class="modal-close icon-tancar2"></span>
        </div>
    </div>
    <div class="mt-modal__body"

    <div class="mt-modal__body mt-media clearfix">
        <div class="mt-media__media">
            <span class="icon-registre mt-media__media-bg-icon"></span>
        </div>

        <div class="mt-media__content mt-modal__body-section">
            <h2>Lorem ipsum dolor sit amet!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mattis nulla vitae fringilla pharetra. Suspendisse tristique risus ut turpis varius auctor.</p>
        </div>
    </div>

    <div class="mt-modal__footer right">
        <input type="button" class="btn btn-s" value="Acció secundaria" />
        <input type="button" class="btn btn-s btn-border-dark" value="Acció alternativa" />
    </div>
</div>
                        
                    

Legacy markup

Show picture dialog legacy

Pagination

                        
<!-- Paginació -->
<ul class="pagination">
    <li><a class="pprev" href="#">« Anterior</a></li>
    <li><a href="#">1</a></li>
    <li class="selected">2</li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a class="pnext" href="#">Siguiente »</a></li>
</ul>
                        
                    

Alerts

¡Mensaje enviado! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Información: Lorem ipsum dolor sit amet, consectetur elit.
Cuidao! Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ooops! Lorem ipsum dolor sit amet.
                        
<!-- Missatge confirmació -->
<div class="alert alert-ok">
    <strong>¡Mensaje enviado!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<!-- Missatge informació -->
<div class="alert alert-info">
    <strong>Información:</strong> Lorem ipsum dolor sit amet, consectetur elit.
</div>
<!-- Missatge warning -->
<div class="alert alert-warning">
    <strong>Cuidao!</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Missatge error -->
<div class="alert alert-error">
    <strong>Ooops!</strong> Lorem ipsum dolor sit amet.
</div>
                        
                    

Icons

Iconografia carregada amb webfont.
Per afegir la icona , simplement haurem d'afegir un element span class="icon-likeblack".
Després podrem definir el tamany amb la propietat font-size i el color amb color.

  • icon-alerta
  • icon-android
  • icon-anunci
  • icon-apple
  • icon-bell
  • icon-borrar
  • icon-calendari
  • icon-candau-obert
  • icon-candau
  • icon-check
  • icon-coche
  • icon-comentaris
  • icon-contactar
  • icon-down
  • icon-dreta
  • icon-editar-perfil
  • icon-editar
  • icon-esquerra
  • icon-estadistiques
  • icon-estadistiques2
  • icon-estrella2
  • icon-closed-eye
  • icon-facebook
  • icon-fichas-tecnicas
  • icon-filtros
  • icon-fotos
  • icon-fotos2
  • icon-fullscreen
  • icon-ghost
  • icon-google
  • icon-graella
  • icon-imprimir
  • icon-info
  • icon-like
  • icon-likeblack
  • icon-link
  • icon-location
  • icon-loop
  • icon-lupa
  • icon-mail
  • icon-mailetter
  • icon-mailopen
  • icon-menu
  • icon-nolike
  • icon-noticies
  • icon-ok
  • icon-ordenar
  • icon-play
  • icon-portatil
  • icon-pregunta
  • icon-premi
  • icon-refresh
  • icon-registre
  • icon-reload
  • icon-servicios
  • icon-share
  • icon-smartphone
  • icon-suggest
  • icon-suma
  • icon-tablet
  • icon-talk
  • icon-tancar
  • icon-tancar2
  • icon-telefon
  • icon-telefon2
  • icon-time
  • icon-tornar
  • icon-twitter
  • icon-up
  • icon-user-following
  • icon-user-unfollow
  • icon-user
  • icon-users
  • icon-video
  • icon-visites
  • icon-xarxes
  • icon-youtube