Launcher tile component for dashboard navigation. Used on signed-in dashboards to provide quick access to key areas: galleries, offers, reservations, and utilities. Supports icon, title, description, and interactive states.
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.
Interactive launcher tile for dashboard navigation. Use as a link to navigate to key sections: image galleries, reservations, configuration, etc. Responds to hover, focus, and active states. Works in both standard and glassy contexts.
For use on normal app pages and content areas
<a href="/dashboard/galleries" class="dashboard-tile">
<div class="dashboard-tile-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div>
<h3 class="dashboard-tile-title t-h4">Image Galleries</h3>
<p class="dashboard-tile-description t-body t-muted">Manage property photos and media</p>
</div>
</a>For use on dark overlays and app content containers (signed-in pages)
<a href="/dashboard/galleries" class="dashboard-tile is-glassy">
<div class="dashboard-tile-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div>
<h3 class="dashboard-tile-title t-h4">Image Galleries</h3>
<p class="dashboard-tile-description t-body t-muted">Manage property photos and media</p>
</div>
</a>
Non-interactive tile for unavailable dashboard sections. Use the .is-disabled class
to indicate a tile is unavailable or locked. Interactions are disabled and opacity is reduced.
For use on normal app pages and content areas
Premium features coming soon
<!-- Use .is-disabled class to mark tile as unavailable -->
<div class="dashboard-tile is-disabled">
<div class="dashboard-tile-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<div>
<h3 class="dashboard-tile-title t-h4">Advanced Settings</h3>
<p class="dashboard-tile-description t-body t-muted">Premium features coming soon</p>
</div>
</div>For use on dark overlays and app content containers (signed-in pages)
Premium features coming soon
<!-- Combine .is-glassy and .is-disabled to disable in glassy context -->
<div class="dashboard-tile is-glassy is-disabled">
<div class="dashboard-tile-icon">
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</div>
<div>
<h3 class="dashboard-tile-title t-h4">Advanced Settings</h3>
<p class="dashboard-tile-description t-body t-muted">Premium features coming soon</p>
</div>
</div><a>
for navigation or
<button>
for actions
.is-glassy
class when tiles appear in dark overlays
.ui-glassy-panel
for correct background context
.is-disabled
class for unavailable tiles
.is-glassy
and standard tiles without wrapper classes
.is-disabled
class
Dashboard Tiles inside other patterns or layouts
MUST use this Tile Element and Typography classes only. Defined in
/assets/css/dashboard-tile.css. Do not create custom tile styling in component-specific CSS. If you need a new tile variant, add it to the Dashboard Tile definition.
All dashboard tile styles are defined in:
/assets/css/dashboard-tile.css
Imported by: /assets/css/ui-system.css
Includes: Base tile styles, icon container, title and description text classes, hover/focus/active states, disabled state, glassy variant with backdrop filter, dark mode support through tokens.