<smart-list-tile>

SmartListTile

A flexible, interactive list item component with leading/trailing icons, title and subtitle text, active state, ripple click effect, disabled state, and optional AJAX action on click.

Ripple Effect Active State AJAX Click Keyboard Nav

<script src="smart_list_tile.js"></script>

Basic Examples

🏠

Dashboard

Overview & analytics

›

⚙️

Settings

Configure preferences

›

🔒

Admin Panel

Restricted access

Disabled

🔔

Notifications

3 unread alerts


<smart-list-tile
  leading-icon="house"
  title="Dashboard"
  subtitle="Overview & analytics"
  trailing-icon="caret-right"
  clickable
></smart-list-tile>

<!-- Active state -->
<smart-list-tile
  leading-icon="gear"
  title="Settings"
  subtitle="Configure preferences"
  active
  active-color="#6378ff"
></smart-list-tile>

<!-- Disabled state -->
<smart-list-tile
  leading-icon="lock"
  title="Admin Panel"
  disabled
></smart-list-tile>

States & AJAX

Tiles can navigate to a URL or execute AJAX calls on click. Supports GET and POST with automatic reload.


<!-- Navigate on click -->
<smart-list-tile
  title="View Profile"
  leading-icon="user"
  href="/profile/None"
></smart-list-tile>

<!-- AJAX POST on click -->
<smart-list-tile
  title="Mark as Done"
  leading-icon="check-circle"
  post="/api/tasks//done"
  clickable
></smart-list-tile>

<!-- Custom click handler -->
<smart-list-tile
  title="Open Modal"
  data-onclick="openModal"
  clickable
></smart-list-tile>

Attributes

Attribute	Type	Description	Default
title	string	Main text shown in the tile	—
subtitle	string	Secondary text below title	—
leading-icon	string	Phosphor icon name for left side	—
trailing-icon	string	Phosphor icon name for right side	—
active	boolean	Mark tile as active/selected	false
active-color	string	CSS color for active state	#0d6efd
clickable	boolean	Enable click interactions and ripple	false
disabled	boolean	Disable interactions, reduces opacity	false
href	string	Navigate to this URL on click	—
post	string	AJAX POST URL on click	—
text-color	string	Custom text color	—
background-color	string	Custom background color	—
icon-color	string	Custom icon color	—
border-radius	string	Custom border radius (e.g., 8px)	—
max-lines	number	Truncate subtitle after N lines	—
data-onclick	string	Global function name to call on click	—

Events


const tile = document.querySelector('smart-list-tile');

// Native click event
tile.addEventListener('click', (e) => {
  console.log('Tile clicked');
});

// Via attribute
function handleTileClick(e) {
  // Toggle active programmatically
  tile.setAttribute('active', '');
}