Unito.it

Tema Unito v 3 / 3.1

Timeline

Componente per la visualizzazione cronologica di eventi.

Il componente Timeline è caratterizzato dalla classe .it-timeline-wrapper che contiene al suo interno un elenco di colonne .col-12 e quindi singoli elementi .timeline-element

A livello del tag .col-12 è possibile applicare classi aggiungive che determinanto l'aspetto visivo degli elementi a seconda che questi siano nel passato o nel presente/futuro.

  • .it-evidence eventi/milestone nel passato (indicatori visivi semi-trasparenti)
  • .it-now : eventi/milestone nel presente o futuro (indicatori visivi nel colore primario del tema)

Ogni .timeline-element contiene a sua volta un elemento .pin-icon con all'interno la data della milestone e un indicatore di stato (es. "concluso", "in corso").

Gli esempi di codice sono specifici per la Versione 3.1 del tema

Timeline standard

CONCLUSO

14/10/2021

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

imagealt
Leggi di più
CONCLUSO

14/10/2021

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Leggi di più

14/09/2027

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Leggi di più

14/10/2027

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

imagealt
Leggi di più 
<div class="it-timeline-wrapper">
  <div class="row">
    <div class="col-12 it-evidence">
      <div class="timeline-element">
        <div class="it-pin-wrapper">
          <div class="pin-icon"></div>
          <div class="it-pin-text-wrapper">
            <div class="pin-text"><span>CONCLUSO</span></div>
            <p>14/10/2021</p>
          </div>
        </div>
        <div class="card-wrapper">
          <div class="card">
              <div class="card-body">
                <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <figure><img class="w-100" src="https://dummyimage.com/500x200/ebebeb/808080/?text=500x200" title="img title" alt="imagealt"></figure>
                  <a class="read-more" href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                      <span class="text">Leggi di più</span>
                      <svg class="icon">
                      <use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
                      </svg>
                  </a>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 it-evidence">
      <div class="timeline-element">
        <div class="it-pin-wrapper">
          <div class="pin-icon"></div>
          <div class="it-pin-text-wrapper">
            <div class="pin-text"><span>CONCLUSO</span></div>
            <p>14/10/2021</p>
          </div>
        </div>
        <div class="card-wrapper">
          <div class="card">
              <div class="card-body">
                <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  <a class="read-more" href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                      <span class="text">Leggi di più</span>
                      <svg class="icon">
                      <use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
                      </svg>
                  </a>
              </div>
          </div>
        </div>
      </div>
    </div>   
    <div class="col-12 it-now">
      <div class="timeline-element">
        <div class="it-pin-wrapper">
          <div class="pin-icon"></div>
          <div class="it-pin-text-wrapper">
            <p>14/09/2027</p>
          </div>
        </div>
        <div class="card-wrapper">
          <div class="card">
              <div class="card-body">
                <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  <a class="read-more " href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                  <span class="text">Leggi di più</span>
                  <svg class="icon">
                  <use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
                  </svg>
                  </a>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 it-now">
      <div class="timeline-element">
        <div class="it-pin-wrapper">
          <div class="pin-icon"></div>
          <div class="it-pin-text-wrapper">
            <p>14/10/2027</p>
          </div>
        </div>
        <div class="card-wrapper">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
               <figure><img class="w-100" src="https://dummyimage.com/500x200/ebebeb/808080/?text=500x200" title="img title" alt="imagealt"></figure> 
                <a class="read-more " href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                      <span class="text">Leggi di più</span>
                      <svg class="icon">
                      <use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
                      </svg>
                </a>                            
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Timeline Orizzontale

Opzionalmente, è possibile aggiungere la classe .timeline-horizontal all'elemento con classe .it-timeline-wrapper

.timeline-horizontal fa si che dal breakpoint Bootstrap XL in poi ( ≥1200px ) la timeline venga visualizzata a sviluppo orizzontale, assegnando ad ogni elemento presente nella timeline una larghezza pari a due colonne: oltre alle sei milestones presenti nella timeline, l'uso di questa classe è quindi sconsigliato.

CONCLUSO

14/10/2021

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

imagealt
Leggi di più
CONCLUSO

14/10/2021

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Leggi di più

14/09/2027

Lorem ipsum dolor sit amet, consectetur adipiscing elit…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Leggi di più

14/10/2027

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

imagealt
Leggi di più 
<div class="it-timeline-wrapper timeline-horizontal">
  <div class="row">
    <div class="col-12 it-evidence">
      <div class="timeline-element">
        <div class="it-pin-wrapper">
          <div class="pin-icon"></div>
          <div class="it-pin-text-wrapper">
            <div class="pin-text"><span>CONCLUSO</span></div>
            <p>14/10/2021</p>
          </div>
        </div>
        <div class="card-wrapper">
          <div class="card">
              <div class="card-body">
                <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <figure><img class="w-100" src="https://dummyimage.com/500x200/ebebeb/808080/?text=500x200" title="img title" alt="imagealt"></figure>
                  <a class="read-more" href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                      <span class="text">Leggi di più</span>
                      <svg class="icon">
                      <use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
                      </svg>
                  </a>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 it-evidence">
      <div class="timeline-element">
        <div class="it-pin-wrapper">
          <div class="pin-icon"></div>
          <div class="it-pin-text-wrapper">
            <div class="pin-text"><span>CONCLUSO</span></div>
            <p>14/10/2021</p>
          </div>
        </div>
        <div class="card-wrapper">
          <div class="card">
              <div class="card-body">
                <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  <a class="read-more" href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                      <span class="text">Leggi di più</span>
                      <svg class="icon">
                      <use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
                      </svg>
                  </a>
              </div>
          </div>
        </div>
      </div>
    </div>   
    <div class="col-12 it-now">
      <div class="timeline-element">
        <div class="it-pin-wrapper">
          <div class="pin-icon"></div>
          <div class="it-pin-text-wrapper">
            <p>14/09/2027</p>
          </div>
        </div>
        <div class="card-wrapper">
          <div class="card">
              <div class="card-body">
                <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit…</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                  <a class="read-more " href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                  <span class="text">Leggi di più</span>
                  <svg class="icon">
                  <use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
                  </svg>
                  </a>
              </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 it-now">
      <div class="timeline-element">
        <div class="it-pin-wrapper">
          <div class="pin-icon"></div>
          <div class="it-pin-text-wrapper">
            <p>14/10/2027</p>
          </div>
        </div>
        <div class="card-wrapper">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…</h5>
              <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
               <figure><img class="w-100" src="https://dummyimage.com/500x200/ebebeb/808080/?text=500x200" title="img title" alt="imagealt"></figure> 
                <a class="read-more " href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit">
                      <span class="text">Leggi di più</span>
                      <svg class="icon">
                      <use xlink:href="./dist/svg/sprite.svg#it-arrow-right"></use>
                      </svg>
                </a>                            
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Torna su