List

Introductie

Voor het toevoegen en tonen van opsommingen en lijsten.

Snelstart

    
      
    
    @use "@minvws/manon/components/list";
  

Voorbeeld

Voorbeeld: Ongenummerde lijst

• List item
• List item

    
      
    
    <ul>
  <li>List item</li>
  <li>List item</li>
</ul>
  

Voorbeeld: Ongenummerde lijst met geneste elementen

• List item
• List item
  • Subitem
  • Subitem
• List item

    
      
    
    <ul>
  <li>List item</li>
  <li>
    List item
    <ul>
      <li>Subitem</li>
      <li>Subitem</li>
    </ul>
  </li>
  <li>List item</li>
</ul>
  

Voorbeeld: Genummerde lijst

1. List item
2. List item

    
      
    
    <ol>
  <li>List item</li>
  <li>List item</li>
</ol>
  

Voorbeeld: Genummerde lijst met geneste elementen

1. List item
2. List item
   1. Subitem
   2. Subitem
3. List item

    
      
    
    <ol>
  <li>List item</li>
  <li>
    List item
    <ol>
      <li>Subitem</li>
      <li>Subitem</li>
    </ol>
  </li>
  <li>List item</li>
</ol>
  

Voorbeeld: Genummerde lijst met hoofdletters

1. List item
2. List item

    
      
    
    <ol type="A">
  <li>List item</li>
  <li>List item</li>
</ol>
  

Voorbeeld: Genummerde lijst met kleine letters

1. List item
2. List item

    
      
    
    <ol type="a">
  <li>List item</li>
  <li>List item</li>
</ol>
  

Voorbeeld: Genummerde lijst met Romeinse cijfers in hoofdletters

1. List item
2. List item

    
      
    
    <ol type="I">
  <li>List item</li>
  <li>List item</li>
</ol>
  

Voorbeeld: Genummerde lijst met Romeinse cijfers in kleine letters

1. List item
2. List item

    
      
    
    <ol type="i">
  <li>List item</li>
  <li>List item</li>
</ol>
  

Voorbeeld: Gecombineerde lijstweergave

Het is mogelijk om binnen een lijst gebruik te maken van verschillende lijstweergaven. Bijvoorbeeld een lijst met daarbinnen een genummerde lijst of een lijst met navigatie-elementen

Ongenummerde lijst met daarbinnen genummerde lijstelementen

• Unordered list item
• Unordered list item
  1. Ordered subitem
  2. Ordered subitem

    
      
    
    <ul>
  <li>Unordered list item</li>
  <li>
    Unordered list item
    <ol>
      <li>Ordered subitem</li>
      <li>Ordered subitem</li>
    </ol>
  </li>
</ul>
  

Genummerde lijst met daarbinnen ongenummerde lijstelementen

1. Unordered list item
2. Unordered list item
   • Ordered subitem
   • Ordered subitem

    
      
    
    <ol>
  <li>Unordered list item</li>
  <li>
    Unordered list item
    <ul>
      <li>Ordered subitem</li>
      <li>Ordered subitem</li>
    </ul>
  </li>
</ol>