TheBestTutorials.css Lists
Displaying a List
-
×
Mike
Web Designer -
×
Jill
Support -
×
Jane
Accountant
Basic List
- Jill
- Eve
- Adam
Bordered List
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-border">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
List Header
Names
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
List as a Card
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-card-4">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Centered List
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-center">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Colored List
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-red">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Colored List Item
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul">
<li class="subhodaya-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li class="subhodaya-blue">Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Hoverable list
The subhodaya-hoverable class adds a grey background color to each list item on mouse-over:
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-hoverable">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
If you want a specific hover color, add any of the subhodaya-hover-classes to each <li> element:
- Jill
- Eve
- Adam
Closable list
Click on the letter "x" to close/hide a list item:
- Jill x
- Adam x
- Eve x
Example
<li>Jill
<span onclick="this.parentElement.style.display='none'"
class="subhodaya-closebtn subhodaya-margin-right subhodaya-medium">x</span>
</li>
Try It Yourself »
<span onclick="this.parentElement.style.display='none'"
class="subhodaya-closebtn subhodaya-margin-right subhodaya-medium">x</span>
</li>
Padded List
- Jill
- Eve
- Adam
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul">
<li class="subhodaya-padding-16">Jill</li>
<li class="subhodaya-padding-16">Eve</li>
<li class="subhodaya-padding-16">Adam</li>
</ul>
Try It Yourself »
<li class="subhodaya-padding-16">Jill</li>
<li class="subhodaya-padding-16">Eve</li>
<li class="subhodaya-padding-16">Adam</li>
</ul>
Avatar List
-
x
Mike
Web Designer -
x
Jill
Support -
x
Jane
Accountant
Example
<ul class="subhodaya-ul subhodaya-card-4">
<li class="subhodaya-padding-16">
<span onclick="this.parentElement.style.display='none'"
class="subhodaya-closebtn subhodaya-padding">x</span>
<img src="img_avatar2.png" class="subhodaya-left subhodaya-circle" style="width:60px">
<span class="subhodaya-xlarge">Mike</span><br>
<span>Web Designer</span>
</li>
</ul>
Try It Yourself »
<li class="subhodaya-padding-16">
<span onclick="this.parentElement.style.display='none'"
class="subhodaya-closebtn subhodaya-padding">x</span>
<img src="img_avatar2.png" class="subhodaya-left subhodaya-circle" style="width:60px">
<span class="subhodaya-xlarge">Mike</span><br>
<span>Web Designer</span>
</li>
</ul>
Tiny List
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-tiny">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Small List
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-small">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Large List
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-large">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XLarge List
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-xlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXLarge List
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-xxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
XXXLarge List
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-xxxlarge">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Jumbo List
- Jill
- Eve
- Adam
Example
<ul class="subhodaya-ul subhodaya-jumbo">
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
Try It Yourself »
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>