Menu

Component: List

UL list

  • Donec fringilla ante at urna eleifend, ullamcorper placerat neque tempus.
  • Nam gravida lorem eget malesuada iaculis.
  • Morbi vitae velit in metus vehicula lacinia.
  • Cras convallis odio et mauris viverra interdum.
  • Donec maximus tortor consectetur mi malesuada accumsan at a leo.
  • Fusce semper velit nec sem congue, ut ultricies eros commodo.
<ul class="list-1 mb-3">
	<li>Donec fringilla ante at urna eleifend, <a href="#">ullamcorper placerat</a> neque tempus.</li>
	<li>Nam gravida lorem eget malesuada iaculis.</li>
	<li>Morbi vitae velit in metus vehicula lacinia.</li>
	<li>Cras convallis odio et mauris viverra interdum.</li>
	<li>Donec maximus tortor consectetur mi malesuada accumsan at a leo.</li>
	<li>Fusce semper velit nec sem congue, ut ultricies eros commodo.</li>
</ul>

OL list

To get a reversed order list, use reversed html attribut, and to start from other than 1, use start="value"

  1. Donec fringilla ante at urna eleifend, ullamcorper placerat neque tempus.
  2. Nam gravida lorem eget malesuada iaculis.
  3. Morbi vitae velit in metus vehicula lacinia.
  4. Cras convallis odio et mauris viverra interdum.
  5. Donec maximus tortor consectetur mi malesuada accumsan at a leo.
  6. Fusce semper velit nec sem congue, ut ultricies eros commodo.
<ol class="list-1 mb-3">
	<li>Donec fringilla ante at urna eleifend, <a href="#">ullamcorper placerat</a> neque tempus.</li>
	<li>Nam gravida lorem eget malesuada iaculis.</li>
	<li>Morbi vitae velit in metus vehicula lacinia.</li>
	<li>Cras convallis odio et mauris viverra interdum.</li>
	<li>Donec maximus tortor consectetur mi malesuada accumsan at a leo.</li>
	<li>Fusce semper velit nec sem congue, ut ultricies eros commodo.</li>
</ol>

DL list

List
Nam gravida lorem eget malesuada iaculis.
Let's see what happens if the left column has a very very very long text
Nam gravida lorem eget malesuada iaculis.
<dl>
	<dt>List</dt>
	<dd>Nam gravida lorem eget malesuada iaculis.</dd>
	<dt>Let's see what happens if the left column has a very very very long text</dt>
	<dd>Nam gravida lorem eget malesuada iaculis.</dd>
</dl>