Typography typographylabellayout

Floating Label

Small text label that floats above a title or section.

PREMIUM Floating Label

Usage

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

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

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

Manual Installation

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

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>

Quick Info

Category
Typography
Filename
FloatingLabel.astro
Dependencies
None — pure Astro + CSS
Tags
typographylabellayout