Components

The lists component is used to display information. List present content in a way that makes it easy to identify a specific item in a collection. They provide a consistent styling for organizing groups of text and images.

Bullet

Set the bullet (disk) as list marker.

Type	Default Value
boolean	false

item 1
item 2
item 3

<NVList Bullet>
  <NVListItem>item 1</NVListItem>
  <NVListItem>item 2</NVListItem>
  <NVListItem>item 3</NVListItem>
</NVList>

<ul class="nv-list nv-list-bullet neutral">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<nv-list bullet>
  <nv-listitem isactive="true" href="#"> Item 1 </nv-listitem>
  <nv-listitem href="#">Item 2</nv-listitem>
  <nv-listitem href="#">Item 3</nv-listitem>
</nv-list>

<NvList bullet>
  <NvListItem href="#" isActive> Item 1 </NvListItem>
  <NvListItem href="#"> Item 2 </NvListItem>
  <NvListItem href="#"> Item 3 </NvListItem>
</NvList>

Decimal

Set a number as list marker.

Type	Default Value
boolean	false

item 1
item 2
item 3

<NVList Decimal>
  <NVListItem>item 1</NVListItem>
  <NVListItem>item 2</NVListItem>
  <NVListItem>item 3</NVListItem>
</NVList>

<ul class="nv-list nv-list-decimal neutral">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<nv-list decimal>
  <nv-listitem isactive="true" href="#"> Item 1 </nv-listitem>
  <nv-listitem href="#">Item 2</nv-listitem>
  <nv-listitem href="#">Item 3</nv-listitem>
</nv-list>

<NvList decimal>
  <NvListItem href="#" isActive> Item 1 </NvListItem>
  <NvListItem href="#"> Item 2 </NvListItem>
  <NvListItem href="#"> Item 3 </NvListItem>
</NvList>

Divider

Add a border divider on items of the list.

Type	Default Value
boolean	false

item 1
item 2
item 3

<NVList Divider>
  <NVListItem>item 1</NVListItem>
  <NVListItem>item 2</NVListItem>
  <NVListItem>item 3</NVListItem>
</NVList>

<ul class="nv-list nv-list-divider neutral">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<nv-list divider>
  <nv-listitem isactive="true" href="#"> Item 1 </nv-listitem>
  <nv-listitem href="#">Item 2</nv-listitem>
  <nv-listitem href="#">Item 3</nv-listitem>
</nv-list>

<NvList divider>
  <NvListItem href="#" isActive> Item 1 </NvListItem>
  <NvListItem href="#"> Item 2 </NvListItem>
  <NvListItem href="#"> Item 3 </NvListItem>
</NvList>

Gutter

Set spacing between items in a list.

Type	Default Value
string	null

item 1
item 2
item 3

<NVList Gutter="4">
  <NVListItem>item 1</NVListItem>
  <NVListItem>item 2</NVListItem>
  <NVListItem>item 3</NVListItem>
</NVList>

<ul class="nv-list neutral gutter-y-4">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<nv-list gutter="4">
  <nv-listitem isactive="true" href="#"> Item 1 </nv-listitem>
  <nv-listitem href="#">Item 2</nv-listitem>
  <nv-listitem href="#">Item 3</nv-listitem>
</nv-list>

<NvList gutter="4">
  <NvListItem href="#" isActive> Item 1 </NvListItem>
  <NvListItem href="#"> Item 2 </NvListItem>
  <NvListItem href="#"> Item 3 </NvListItem>
</NvList>

Link

Set the list to react as a list of item link.
When the list is list of Link, Pad will apply the spacing to the link himself.
Each items now, have now an hover effect and react to "IsActive" boolean.

Type	Default Value
bool	false

<NVList Link>
  <NVListItemLink IsActive Href="#">item 1</NVListItemLink>
  <NVListItemLink Href="#">item 2</NVListItemLink>
  <NVListItemLink Href="#" Margin=". . 0">item 3</NVListItemLink>
</NVList>

<ul class="nv-list nv-list-link neutral">
  <li><a class="is-active" href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

<nv-list pad="3">
  <nv-listitem isactive="true" href="#"> Item 1 </nv-listitem>
  <nv-listitem href="#">Item 2</nv-listitem>
  <nv-listitem href="#">Item 3</nv-listitem>
</nv-list>

<NvList link>
  <NvListItem href="#" isActive> Item 1 </NvListItem>
  <NvListItem href="#"> Item 2 </NvListItem>
  <NvListItem href="#"> Item 3 </NvListItem>
</NvList>

Pad

Set spacing within items in a list. If the value is set to 1, it will apply internally ChildPadding="1 2" to the list.

Type	Default Value
string	null

item 1
item 2
item 3

<NVList Pad="3">
  <NVListItem>item 1</NVListItem>
  <NVListItem>item 2</NVListItem>
  <NVListItem>item 3</NVListItem>
</NVList>

<ul class="nv-list neutral cpy-3 cpx-6">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<nv-list link>
  <nv-listitem isactive="true" href="#"> Item 1 </nv-listitem>
  <nv-listitem href="#">Item 2</nv-listitem>
  <nv-listitem href="#">Item 3</nv-listitem>
</nv-list>

<NvList pad="3">
  <NvListItem href="#" isActive> Item 1 </NvListItem>
  <NvListItem href="#"> Item 2 </NvListItem>
  <NvListItem href="#"> Item 3 </NvListItem>
</NvList>

Select

Set the list 'selectable'.
Each items now, have now an hover effect and react to "IsSelected" boolean.

Type	Default Value
bool	false

item 1
item 2
item 3

<NVList Select>
  <NVListItem IsSelected>item 1</NVListItem>
  <NVListItem>item 2</NVListItem>
  <NVListItem>item 3</NVListItem>
</NVList>

<ul class="nv-list nv-list-select neutral">
  <li class="is-selected">item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<nv-list select>
  <nv-listitem isactive="true" href="#"> Item 1 </nv-listitem>
  <nv-listitem href="#">Item 2</nv-listitem>
  <nv-listitem href="#">Item 3</nv-listitem>
</nv-list>

<NvList select>
  <NvListItem isSelected> Item 1 </NvListItem>
  <NvListItem> Item 2 </NvListItem>
  <NvListItem> Item 3 </NvListItem>
  <NvListItem> Item 4 </NvListItem>
</NvList>