1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Tipografía typographylabellayout

Floating Label

Etiqueta tipográfica flotante con resplandor suave para resaltar características de producto.

PREMIUM Floating Label

Uso

Copia y pega este código directamente en tu página de Astro:

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

<FloatingTextLabel>Content</FloatingTextLabel>
--- import { FloatingLabel } from 'astro-component-kit'; --- <FloatingTextLabel>Content</FloatingTextLabel>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/FloatingLabel.astro:

astro 
---
---
<div class="f-label-wrap">
  <span class="f-label">PREMIUM</span>
  <slot />
</div>
<style>
  .f-label-wrap { position: relative; padding-top: 1.5rem; }
  .f-label { position: absolute; top: 0; left: 0; font-size: 0.7rem; font-weight: 800; color: #6366f1; letter-spacing: 0.2em; text-transform: uppercase; }
</style>
--- --- <div class="f-label-wrap"> <span class="f-label">PREMIUM</span> <slot /> </div> <style> .f-label-wrap { position: relative; padding-top: 1.5rem; } .f-label { position: absolute; top: 0; left: 0; font-size: 0.7rem; font-weight: 800; color: #6366f1; letter-spacing: 0.2em; text-transform: uppercase; } </style>

Información Rápida

Categoría
Tipografía
Nombre de archivo
FloatingLabel.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
typographylabellayout