Data Display datalistdetails

Data Key-Value List

Clean list for technical specifications or user details.

Module Name
AuthEngine
Version
1.4.2
Status
Deployment Ready

Usage

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

astro 
---
import { DataKey-ValueList } from 'astro-component-kit';
---

<DescriptionListHoriz>Content</DescriptionListHoriz>
--- import { DataKey-ValueList } from 'astro-component-kit'; --- <DescriptionListHoriz>Content</DescriptionListHoriz>

Manual Installation

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

astro 
---
---
<dl class="desc-list">
  <div class="row"><dt>Module Name</dt><dd>AuthEngine</dd></div>
  <div class="row"><dt>Version</dt><dd>1.4.2</dd></div>
  <div class="row"><dt>Status</dt><dd>Deployment Ready</dd></div>
</dl>
<style>
  .desc-list { display: flex; flex-direction: column; width: 100%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.1); }
  .row { display: grid; grid-template-columns: 140px 1fr; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; }
  .row:last-child { border-bottom: none; }
  dt { color: #64748b; font-weight: 600; }
  dd { color: #fff; margin: 0; }
</style>
--- --- <dl class="desc-list"> <div class="row"><dt>Module Name</dt><dd>AuthEngine</dd></div> <div class="row"><dt>Version</dt><dd>1.4.2</dd></div> <div class="row"><dt>Status</dt><dd>Deployment Ready</dd></div> </dl> <style> .desc-list { display: flex; flex-direction: column; width: 100%; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; background: rgba(0,0,0,0.1); } .row { display: grid; grid-template-columns: 140px 1fr; padding: 0.75rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.85rem; } .row:last-child { border-bottom: none; } dt { color: #64748b; font-weight: 600; } dd { color: #fff; margin: 0; } </style>

Quick Info

Category
Data Display
Filename
DataKey-ValueList.astro
Dependencies
None — pure Astro + CSS
Tags
datalistdetails