LIST GROUPS

Grouping the lists might create a better visuals for the users. So we added the list grouping option to JTB_MD. Here is how you can use it.

Usage

The most basic usage comes with .jtbListGroup class.

  • List item
  • List item
  • List item
  • List item
			Copy
			<ul class='jtbListGroup'>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ul>
		

Active item

Add .active to desired li tag to indicate the current active selection.

  • List item
  • List item
  • List item
  • List item
			Copy
			<ul class='jtbListGroup'>
	<li class='active'>List item</li>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ul>
		

Disabling

To disable an item, add .disabled to your desired li.

  • List item
  • List item
  • List item
  • List item
			Copy
			<ul class='jtbListGroup'>
	<li class='disabled'>List item</li>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ul>
		

Hoverable

To make your List items hoverable, add .jtbListGroupHoverable class to your .jtbListGroup element.

  • List item
  • List item
  • List item
  • List item
			Copy
			<ul class='jtbListGroup jtbListGroupHoverable'>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ul>
		

Links

For making items link, just wrap them with <a> tag.

			Copy
			<ul class='jtbListGroup'>
	<a href='#'><li>List item</li></a>
	<a href='#'><li>List item</li></a>
	<a href='#'><li>List item</li></a>
	<a href='#'><li>List item</li></a>
</ul>
		

You can use all features with links too. Just make sure you are adding classes to the <li> elements

			Copy
			<ul class='jtbListGroup jtbListGroupHoverable'>
	<a href='#'><li class='active'>List item</li></a>
	<a href='#'><li class='disabled'>List item</li></a>
	<a href='#'><li>List item</li></a>
	<a href='#'><li>List item</li></a>
</ul>
		

Icon usage

To create a list group with icons, you can combine the features of the list group and flex system like following.

  • List item
  • List item
  • List item
  • List item
  • List item
  • List item
			Copy
			<!-- append -->
<ul class='jtbListGroup jtbListGroupHoverable'>
	<li class='jtbFlexInline jtbFlexNoWrap jtbFlexAlignCenter jtb100Width'>
		<div class='_x1 jtbContainer_15px jtbContainer_5px_xs'>
			List item
		</div>
		<i class='jtb-chevron-right'></i>
	</li>

	<li class='jtbFlexInline jtbFlexNoWrap jtbFlexAlignCenter jtb100Width'>
		<div class='_x1 jtbContainer_15px jtbContainer_5px_xs'>
			List item
		</div>
		<i class='jtb-chevron-right'></i>
	</li>

	<li class='jtbFlexInline jtbFlexNoWrap jtbFlexAlignCenter jtb100Width'>
		<div class='_x1 jtbContainer_15px jtbContainer_5px_xs'>
			List item
		</div>
		<i class='jtb-chevron-right'></i>
	</li>
</ul>

<!-- Prepend -->
<ul class='jtbListGroup jtbListGroupHoverable'>
	<li class='jtbFlexInline jtbFlexNoWrap jtbFlexAlignCenter jtb100Width'>
		<i class='jtb-chevron-right'></i>
		<div class='_x1 jtbContainer_15px jtbContainer_5px_xs'>
			List item
		</div>
	</li>

	<li class='jtbFlexInline jtbFlexNoWrap jtbFlexAlignCenter jtb100Width'>
		<i class='jtb-chevron-right'></i>
		<div class='_x1 jtbContainer_15px jtbContainer_5px_xs'>
			List item
		</div>
	</li>

	<li class='jtbFlexInline jtbFlexNoWrap jtbFlexAlignCenter jtb100Width'>
		<i class='jtb-chevron-right'></i>
		<div class='_x1 jtbContainer_15px jtbContainer_5px_xs'>
			List item
		</div>
	</li>
</ul>
		

Inline groups

To create the list group as horizontal oriented, you can create the group with .jtbListGroupInline class.

			Copy
			<ul class='jtbListGroup jtbListGroupInline'>
	<li class='active'>List item</li>
	<li class='disabled'>List item</li>
	<li>List item</li>
	<a href='#'><li>List item</li></a>
</ul>