Layout layoutheaderglass

Glass Section Header

Visual header for page sections with a blurred underline.

Why Astro Components Kit

Build faster with premium components

Usage

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

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

<GlassSectionHeader title="Example" subtitle="A description">Content</GlassSectionHeader>
--- import { GlassSectionHeader } from 'astro-component-kit'; --- <GlassSectionHeader title="Example" subtitle="A description">Content</GlassSectionHeader>

Manual Installation

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

astro 
---
interface Props { title: string; subtitle?: string; }
const { title, subtitle } = Astro.props;
---
<div class="s-header">
  <h2>{title}</h2>
  {subtitle && <p>{subtitle}</p>}
  <div class="s-line"></div>
</div>
<style>
  .s-header { margin-bottom: 3rem; }
  h2 { font-size: 2rem; color: #fff; margin: 0; }
  p { color: #64748b; margin: 0.5rem 0 0; }
  .s-line { height: 4px; width: 60px; background: #6366f1; border-radius: 2px; margin-top: 1.25rem; }
</style>
--- interface Props { title: string; subtitle?: string; } const { title, subtitle } = Astro.props; --- <div class="s-header"> <h2>{title}</h2> {subtitle && <p>{subtitle}</p>} <div class="s-line"></div> </div> <style> .s-header { margin-bottom: 3rem; } h2 { font-size: 2rem; color: #fff; margin: 0; } p { color: #64748b; margin: 0.5rem 0 0; } .s-line { height: 4px; width: 60px; background: #6366f1; border-radius: 2px; margin-top: 1.25rem; } </style>

Quick Info

Category
Layout
Filename
GlassSectionHeader.astro
Dependencies
None — pure Astro + CSS
Tags
layoutheaderglass