Data lists are used throughout the Alius platform to display structured information — from device inventories and version histories to API references and component catalogs. The presentation format should match the content type and user task.

List Types

Table

  • Best for structured, columnar data with many rows
  • Include sortable column headers
  • Support horizontal scrolling for wide tables
  • Use zebra striping or subtle row borders for readability
  • Highlight the row on hover
  • Support row selection for batch operations

Card List

  • Best for items that require visual preview or have varied content lengths
  • Display key information on the card face: title, description, status, thumbnail
  • Use a consistent grid layout with equal card heights
  • Support hover effects to indicate interactivity

Resource List

  • Best for downloadable files, documents, and media
  • Show file name, type, size, and last updated date
  • Provide a direct download action
  • Group by category when the list is long

Version List

  • Best for software releases, firmware versions, and changelogs
  • Highlight the latest or current version
  • Show version number, release date, and change summary
  • Provide download or upgrade actions for each version

Component List

  • Best for hardware parts, modules, and assemblies
  • Show component name, part number, category, and compatibility
  • Support filtering by type, status, and compatibility
  • Link to detailed component pages

API List

  • Best for API endpoints and SDK methods
  • Show method name, HTTP verb (for REST), path, and brief description
  • Group by resource or module
  • Link to detailed API reference pages

Device List

  • Best for connected robots, sensors, and hardware
  • Show device name, type, connection status, and last seen time
  • Highlight offline or error-state devices
  • Provide quick actions: connect, disconnect, configure, update

Common Features

Filtering

  • Provide filter controls above or beside the list
  • Support multiple filter criteria
  • Show active filters as removable tags
  • Preserve filter state across page navigation when appropriate
  • Full-text search across list items
  • Highlight matched terms in results
  • Debounce search input to avoid excessive queries

Status Tags

  • Use color-coded tags to indicate status (active, inactive, deprecated, beta, stable)
  • Keep tag labels short and consistent
  • Pair colors with text labels for accessibility

Update Time

  • Show last modified or updated timestamps
  • Use relative time for recent items (“2 hours ago”) and absolute dates for older items
  • Sort by recency when relevant

Version Tags

  • Mark items with version numbers or release stage tags
  • Use consistent version formatting
  • Highlight the current or recommended version

Download Entry

  • Provide a clear download button or link for downloadable items
  • Show file size and format before download
  • Support multiple download formats when applicable

List Principles

  • Choose the list type that best matches the content and user task
  • Prioritize scannability — the user should be able to quickly find what they need
  • Support both browsing and searching as discovery methods
  • Ensure lists perform well with large datasets (pagination, virtual scrolling)
  • Maintain consistent styling across all list types within the same section