Giovedì, 21 Settembre 2023
A+ R A-

Creazione di liste

Questa è una pagina d'esempio sulle liste ordinate ol, non ordinate ul e di definizione dl. Si possono creare anche liste non ordinate precedute da icone usando particolari classi. Vedi codice in basso 

Lista ordinata ol

  1. This is a sample Ordered List.
  2. Lorem ipsum dolor sit amet consectetur
  3. Lorem ipsum dolor sit amet consectetur
  4. Lorem ipsum dolor sit amet consectetur

Lista non ordinata ul

  • This is a sample Unordered List.
  • Lorem ipsum dolor sit amet consectetur
  • Lorem ipsum dolor sit amet consectetur
  • Lorem ipsum dolor sit amet consectetur

lista di definizioni dl con elementi della lista separati da dt e dd.

This is a sample Definition List.
Condimentum quis.
Congue Quisque augue elit dolor.
Congue Quisque augue elit dolor.

Liste non ordinate ul con icone:

  • This is a sample Arrow list.
  • This is a sample Arrow list.
  • This is a sample Arrow list.

 

  • This is a sample Check list
  • This is a sample Checklist
  • This is a sample Checklist

 

  • This is a sample Star list.
  • This is a sample Star list.
  • This is a sample Star list.
  • This is a sample Phone list
  • This is a sample Phonelist
  • This is a sample Phonelist
  • This is a sample Address list.
  • This is a sample Address list
  • This is a sample Address list
  • This is a sample Mail list
  • This is a sample Mail list
  • This is a sample Mail list
Icon List Styles Sample Code
<ul class="ol-typo-list list-mail"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ol-typo-list list-address"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ol-typo-list list-phone"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ol-typo-list list-check"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ol-typo-list list-star"><li><span class="icon"> </span>List's content goes here!</li></ul>
<ul class="ol-typo-list list-arrow"><li><span class="icon"> </span>List's content goes here!</li></ul>