1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Tipografía typographyquoteglass

Glass Blockquote

Bloque de cita estilizado con fondo glassmorphism, comillas grandes y autor.

“

Glass Blockquote

— Astro Components Team

Uso

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

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

<GlassBlockQuote>Content</GlassBlockQuote>
--- import { GlassBlockquote } from 'astro-component-kit'; --- <GlassBlockQuote>Content</GlassBlockQuote>

Instalación Manual

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

astro 
---
---
<blockquote class="glass-quote">
  <div class="q-ico">“</div>
  <p><slot /></p>
  <footer>— Team Astro Components</footer>
</blockquote>
<style>
  .glass-quote { position: relative; padding: 2.5rem; background: rgba(255,255,255,0.03); border-left: 4px solid #6366f1; border-radius: 0 20px 20px 0; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.05); }
  .q-ico { position: absolute; top: 0px; left: 1rem; font-size: 5rem; color: rgba(99,102,241,0.1); font-family: serif; line-height: 1; }
  p { font-size: 1.2rem; color: #e2e8f0; font-style: italic; line-height: 1.6; margin: 0 0 1rem; position: relative; z-index: 1; }
  footer { color: #64748b; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
</style>
--- --- <blockquote class="glass-quote"> <div class="q-ico">“</div> <p><slot /></p> <footer>— Team Astro Components</footer> </blockquote> <style> .glass-quote { position: relative; padding: 2.5rem; background: rgba(255,255,255,0.03); border-left: 4px solid #6366f1; border-radius: 0 20px 20px 0; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.05); } .q-ico { position: absolute; top: 0px; left: 1rem; font-size: 5rem; color: rgba(99,102,241,0.1); font-family: serif; line-height: 1; } p { font-size: 1.2rem; color: #e2e8f0; font-style: italic; line-height: 1.6; margin: 0 0 1rem; position: relative; z-index: 1; } footer { color: #64748b; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } </style>

Información Rápida

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