1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографика typographylabellayout

Floating Label

Плавающая текстовая метка со свечением для акцента на ключевых свойствах.

PREMIUM Floating Label

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

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

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

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: 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>

Краткая информация

Категория
Типографика
Имя файла
FloatingLabel.astro
Зависимости
Нет — чистый Astro + CSS
Теги
typographylabellayout