.

DOCS

Layout :

Quick Start
Containers
Grids

Elements :

Lists
Subpage Indicator
NavBars
Bars
Articles
Area
Buttons

Helpers :

Horizontal Separator
Vertical Separator

LISTS

Classical List



<section class="list-container">

                        
<section class="first-list-selector">

                        
<p>Element 1</p>

                        
</section>

                        
<section class="list-selector">

                        
<p>Element 2</p>

                        
</section>

                        
<section class="list-selector">

                        
<p>Element 3</p>

                        
</section>

                        
<section class="last-list-selector">

                        
<p>Element 4</p>

                        
</section>

                        
</section>

Example

An example of a classical list

Element 1

Element 2

Element 3

Element 4


Classical List with selector



<section class="list-container">

                        
<section class="first-list-selector selected">

                        
<p>Element 1</p>

                        
</section>

                        
<section class="list-selector">

                        
<p>Element 2</p>

                        
</section>

                        
<section class="list-selector">

                        
<p>Element 3</p>

                        
</section>

                        
<section class="last-list-selector">

                        
<p>Element 4</p>

                        
</section>

                        
</section>

Example

An example of a list with selector

Element 1

Element 2

Element 3

Element 4


Classical List with links



<section class="list-container">

                        
<a href="#"><section class="first-list-selector link">

                        
<p>Element 1</p>

                        
</section></a>

                        
<a href="#"><section class="list-selector link">

                        
<p>Element 2</p>

                        
</section></a>

                        
<a href="#"><section class="list-selector link">

                        
<p>Element 3</p>

                        
</section></a>

                        
<a href="#"><section class="last-list-selector link">

                        
<p>Element 4</p>

                        
</section></a>

                        
</section>

Example

An example of a list with links

Element 1

Element 2

Element 3

Element 4

Classical List with links and selector



<section class="list-container">

                        
<section class="first-list-selector selected">

                        
<p>Element 1</p>

                        
</section>

                        
<a href="#"><section class="list-selector link">

                        
<p>Element 2</p>

                        
</section></a>

                        
<a href="#"><section class="list-selector link">

                        
<p>Element 3</p>

                        
</section></a>

                        
<a href="#"><section class="last-list-selector link">

                        
<p>Element 4</p>

                        
</section></a>

                        
</section>

Example

An example of a list with links

Element 1

Element 2

Element 3

Element 4