ars-info-tile

About

Renders a card with title, subtitle, accent color header, and key-value property list. Supports selection and dragging states for graph visualization integration.

Basic Card

With and Without Subtitle

Custom Accent Colors

Selection State

Click tiles to toggle selection:

Event Handling

Double-click a tile to see the activation event:

[ready] Double-click a tile...

Attribute-Driven

<ars-info-tile
  title="Attribute Title"
  subtitle="attribute subtitle"
  tile-id="ATTR-01"
  accent-color="#FF6B6B"
></ars-info-tile>

Usage

const tile = document.querySelector('ars-info-tile');
tile.data = {
  id: 'bot_001',
  title: 'Scalper Bot',
  subtitle: 'Trading Bot',
  accentColor: '#3aa8ff',
  properties: {
    status: 'active',
    pnl: '+$1,234',
    trades: '48'
  }
};