List Component

List is a common component used in web pages. There are 2 common lists from W3C HTML: ordered list (ol) and unordered list (ul). Bissetii styles both lists seemlessly.

The difference between the 2 list types are:

  1. <ul> is known for Unordered List which provides bullet points
  2. <ol> is known for Ordered List which provides numbering points.

For list items, it is always <li> for both types of list.

This component is available starting from v1.11.0.

Sass Styling Parts

The Sass script that is responsible for styling list are:

assets/css/bissetii/modules/core/_List.sass

This is Bissetii core module so it is always included in the CSS compilation.

Javascript Parts

This component does not rely on any Javascript.

HTML Parts

Bissetii renders native list (unless otherwise specified like <nav> list).

Ordered List

For ordered list, Bissetii recommends the following HTML syntax:

<ol>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ol>

This will render like the following:

  1. This is No "A" first item

  2. This is No "C" second item

  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac posuere nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut magna blandit, fringilla mauris id, hendrerit magna. Suspendisse ullamcorper mi fermentum metus feugiat, nec posuere dolor ultricies. In nec orci aliquet, consequat lorem vel, condimentum elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus cursus bibendum nibh, eget maximus mi imperdiet sit amet. Quisque mollis tellus in ex porta, a accumsan orci porttitor. Sed finibus congue dignissim. Suspendisse cursus lorem ut augue sagittis varius. Ut maximus nibh vel dui maximus euismod. more...

Unordered List

For unordered list, Bissetii recommends the following HTML syntax:

<ul>
	<li>...</li>
	<li>...</li>
	<li>...</li>
</ul>

This will render something like: