Action Tile (Compact)

Compact horizontal tile for CRUD entry points. Features icon-to-left layout with title and subtitle. Approximately 50% height of dashboard feature tiles. Use for "Add New", "Show All", and other quick-action links in CRUD sections.

Default Glassy Context Disabled

📐 Context vs. Theme

Context = Physical placement in the layout (standard page vs. glassy overlay/hero).
Theme = Site-wide user preference (light/dark mode toggle 🌙).

Below previews show tiles in both contexts. Use the 🌙 toggle (top-right) to test how tiles look in both themes. Tiles should work correctly in all 4 combinations: Light+Standard, Light+Glassy, Dark+Standard, Dark+Glassy.

🎯 Design Intent

Action Tile (Compact) is designed for CRUD entry points and quick actions.

Not the same as Dashboard Tile: Dashboard tiles are vertical, full-height launchers for major dashboard sections. Action tiles are compact, horizontal, for quick CRUD operations.

1. Default Action Tile

Standard compact action tile with horizontal layout. Icon appears on the left with title and subtitle stacked to the right. Responds to hover, focus, and active states. Works in both standard and glassy contexts.

1.1 Standard Layout Preview

Standard Context

For use on normal app pages and content areas

Add new
Currency
Show all
Reservations
Edit
User Roles
Manage
Offer Categories

1.2 Standard Layout HTML Snippet

HTML 
<!-- Add new; Currency -->
<a href="/pl/admin/dictionaries/currencies/add" class="action-tile">
  <div class="action-tile-icon">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
  </div>
  <div class="action-tile-content">
    <div class="action-tile-title">Add new</div>
    <div class="action-tile-subtitle">Currency</div>
  </div>
</a>

<!-- Show all; Reservations -->
<a href="/pl/admin/reservations" class="action-tile">
  <div class="action-tile-icon">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
    </svg>
  </div>
  <div class="action-tile-content">
    <div class="action-tile-title">Show all</div>
    <div class="action-tile-subtitle">Reservations</div>
  </div>
</a>

1.3 Glassy Layout Preview

Glassy Context

Use on dark overlays and glass panels (app shell signed-in)

1.4 Glassy Layout HTML Snippet

HTML 
<!-- Add new; Currency -->
<a href="/pl/admin/dictionaries/currencies/add" class="action-tile is-glassy">
  <div class="action-tile-icon">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
  </div>
  <div class="action-tile-content">
    <div class="action-tile-title">Add new</div>
    <div class="action-tile-subtitle">Currency</div>
  </div>
</a>

<!-- Show all; Reservations -->
<a href="/pl/admin/reservations" class="action-tile is-glassy">
  <div class="action-tile-icon">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
    </svg>
  </div>
  <div class="action-tile-content">
    <div class="action-tile-title">Show all</div>
    <div class="action-tile-subtitle">Reservations</div>
  </div>
</a>

2. Disabled Action Tile

Disabled state for actions that are unavailable or require additional permissions. Uses is-disabled modifier class.

2.1 Standard Layout Preview

Standard Context

Disabled tiles are visually muted and non-interactive

Add new
Restricted access
Show all
Permission required

2.2 Standard Layout HTML Snippet

HTML 
<!-- Disabled action tile -->
<a href="#" class="action-tile is-disabled">
  <div class="action-tile-icon">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
  </div>
  <div class="action-tile-content">
    <div class="action-tile-title">Add new</div>
    <div class="action-tile-subtitle">Restricted access</div>
  </div>
</a>

2.3 Glassy Layout Preview

Glassy Context

Disabled state also works in glassy contexts

2.4 Glassy Layout HTML Snippet

HTML 
<!-- Disabled glassy action tile -->
<a href="#" class="action-tile is-glassy is-disabled">
  <div class="action-tile-icon">
    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
  </div>
  <div class="action-tile-content">
    <div class="action-tile-title">Add new</div>
    <div class="action-tile-subtitle">Currency</div>
  </div>
</a>

Usage Guidelines

✅ Do

  • • Use for CRUD entry points (Add New, Show All, Edit, Manage)
  • • Keep title text short (1-3 words)
  • • Keep subtitle text concise (single line, 1-3 words)
  • • Use semantic HTML (link <a> for navigation)
  • • Use clear, action-oriented icons
  • • Use is-glassy in glassy containers
  • • Use is-disabled for unavailable actions
  • • Arrange in grids (2-4 columns on desktop)
  • • Ensure keyboard focus is visible

❌ Don't

  • • Don't use for major dashboard sections (use Dashboard Tile instead)
  • • Don't use long title/subtitle text (causes overflow)
  • • Don't use as button element unless form submission is needed
  • • Don't hardcode colors or spacing
  • • Don't override icon sizes outside DS tokens
  • • Don't mix standard and glassy tiles in same container
  • • Don't use for non-action items (use list items or cards)
  • • Don't stack vertically in narrow containers (use single column grid)

⚠️ Layering Contract

Action Tile (Compact) styles live in /assets/css/action-tile-compact.css. Do not re-style action tiles locally. If you need new behavior or variants, extend the Design System component instead of overriding in page CSS.

CSS Location

All action tile (compact) styles are defined in:

/assets/css/action-tile-compact.css

Imported by: /assets/css/ui-system.css

Includes: Base tile layout, horizontal icon+text structure, hover/focus/active/disabled states, glassy context colors, and responsive adjustments.

Related Documentation

Dashboard Tile

Full-height vertical tiles for major dashboard sections

Buttons

Primary/secondary button elements for forms and actions

App Shell (Signed-in)

Complete layout showing action tile placement in CRUD sections