Typography typographyquoteglass

Glass Blockquote

A stylish quote block with a blurred background and thick accent border.

“

Glass Blockquote

— Astro Components Team

Usage

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

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

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

Manual Installation

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

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>

Quick Info

Category
Typography
Filename
GlassBlockquote.astro
Dependencies
None — pure Astro + CSS
Tags
typographyquoteglass