Lists

List items and navigation patterns.

Basic List Item

Simple list item Another item Third item

With Icons

Dashboard Users Settings

CSS

.sw-list-item {
  display: flex;
  align-items: center;
  gap: var(--sw-space-3);
  padding: var(--sw-space-3) var(--sw-space-4);
  color: var(--sw-text-secondary);
  text-decoration: none;
  border-radius: var(--sw-radius-md);
  transition: all var(--sw-transition-fast);
}

.sw-list-item:hover {
  background: var(--sw-bg-hover);
  color: var(--sw-text-primary);
}

.sw-list-item.active {
  background: var(--sw-bg-hover);
  color: var(--sw-text-primary);
  font-weight: var(--sw-font-medium);
}