Data Display userlistdata

Directory Card

Compact row for listing users with avatar and online status.

JS
John Doe

Software Engineer

Online

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { DirectoryCard } from 'astro-component-kit';
---

<UserDirectoryItem>Content</UserDirectoryItem>
--- import { DirectoryCard } from 'astro-component-kit'; --- <UserDirectoryItem>Content</UserDirectoryItem>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/DirectoryCard.astro and paste the following code:

astro 
---
---
<div class="u-item">
  <div class="u-pic">JS</div>
  <div class="u-info"><h5>John Doe</h5><p>Software Engineer</p></div>
  <div class="u-stat">Online</div>
</div>
<style>
  .u-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); transition: 0.2s; }
  .u-item:hover { border-color: rgba(99, 102, 241, 0.4); background: rgba(99, 102, 241, 0.05); }
  .u-pic { width: 42px; height: 42px; background: linear-gradient(135deg, #6366f1, #c084fc); border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.8rem; }
  .u-info h5 { margin: 0; color: #fff; font-size: 1rem; }
  .u-info p { margin: 2px 0 0; font-size: 0.75rem; color: #64748b; }
  .u-stat { margin-left: auto; font-size: 0.65rem; color: #34d399; font-weight: 800; text-transform: uppercase; background: rgba(52, 211, 153, 0.1); padding: 2px 8px; border-radius: 4px; }
</style>
--- --- <div class="u-item"> <div class="u-pic">JS</div> <div class="u-info"><h5>John Doe</h5><p>Software Engineer</p></div> <div class="u-stat">Online</div> </div> <style> .u-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.03); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); transition: 0.2s; } .u-item:hover { border-color: rgba(99, 102, 241, 0.4); background: rgba(99, 102, 241, 0.05); } .u-pic { width: 42px; height: 42px; background: linear-gradient(135deg, #6366f1, #c084fc); border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 0.8rem; } .u-info h5 { margin: 0; color: #fff; font-size: 1rem; } .u-info p { margin: 2px 0 0; font-size: 0.75rem; color: #64748b; } .u-stat { margin-left: auto; font-size: 0.65rem; color: #34d399; font-weight: 800; text-transform: uppercase; background: rgba(52, 211, 153, 0.1); padding: 2px 8px; border-radius: 4px; } </style>

Quick Info

Category
Data Display
Filename
DirectoryCard.astro
Dependencies
None — pure Astro + CSS
Tags
userlistdata