Data Display metadatapillsdata

Metadata Pill List

Dense grouping of status metadata for entities.

OS:MacOS
Ver:14.5
Arch:ARM64

Usage

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

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

<KeyValuePillGroup>Content</KeyValuePillGroup>
--- import { MetadataPillList } from 'astro-component-kit'; --- <KeyValuePillGroup>Content</KeyValuePillGroup>

Manual Installation

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

astro 
---
---
<div class="meta-row">
  <div class="m-pill">OS:<span>MacOS</span></div>
  <div class="m-pill">Ver:<span>14.5</span></div>
  <div class="m-pill">Arch:<span>ARM64</span></div>
</div>
<style>
  .meta-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .m-pill { background: rgba(0,0,0,0.2); color: #64748b; font-size: 0.7rem; padding: 4px 12px; border-radius: 8px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.05); }
  span { color: #e2e8f0; margin-left: 6px; }
</style>
--- --- <div class="meta-row"> <div class="m-pill">OS:<span>MacOS</span></div> <div class="m-pill">Ver:<span>14.5</span></div> <div class="m-pill">Arch:<span>ARM64</span></div> </div> <style> .meta-row { display: flex; gap: 8px; flex-wrap: wrap; } .m-pill { background: rgba(0,0,0,0.2); color: #64748b; font-size: 0.7rem; padding: 4px 12px; border-radius: 8px; font-weight: 700; border: 1px solid rgba(255, 255, 255, 0.05); } span { color: #e2e8f0; margin-left: 6px; } </style>

Quick Info

Category
Data Display
Filename
MetadataPillList.astro
Dependencies
None — pure Astro + CSS
Tags
metadatapillsdata