Appearance

Tile Component ​

File Information ​

  • Path: app/components/dashboard/Tile.vue
  • Purpose: Dashboard tile component with image and navigation
  • Type: Dashboard Component

Overview ​

The Tile component displays a dashboard tile with an image and title. It's used for resource tiles on the homepage that link to external resources or internal pages.

Features ​

  • Image Display: Shows tile image using Vuetify v-img
  • Title: Displays tile title
  • Navigation: Links to external or internal URLs
  • External Links: Opens in new tab
  • Simple Design: Minimal card-based design

Props ​

typescript
{
  tile: Tile  // Tile data object (required)
}

Tile Type ​

typescript
{
  image: string   // Image URL
  title: string   // Tile title
  url: string     // Navigation URL
}

Usage Example ​

vue
<template>
  <Tile :tile="tileData" />
</template>

<script setup lang="ts">
import Tile from '~/components/dashboard/Tile.vue'
import type { Tile } from '~/types'

const tileData: Tile = {
  image: '/images/resource-tile.jpg',
  title: 'Resource Name',
  url: 'https://example.com'
}
</script>

Styling ​

Uses Vuetify card component with default styling. Image and title are displayed in a card format.

  • Resource - Dashboard resource item component