Layout layoutdividertypography

Divider with Text

A minimalist line divider with a label in the middle.

Features

Usage

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

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

<SectionDividerText>Content</SectionDividerText>
--- import { DividerwithText } from 'astro-component-kit'; --- <SectionDividerText>Content</SectionDividerText>

Manual Installation

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

astro 
---
---
<div class="txt-divider"><span><slot /></span></div>
<style>
  .txt-divider { display: flex; align-items: center; gap: 1rem; color: #64748b; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 2rem 0; }
  .txt-divider::before, .txt-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
</style>
--- --- <div class="txt-divider"><span><slot /></span></div> <style> .txt-divider { display: flex; align-items: center; gap: 1rem; color: #64748b; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 2rem 0; } .txt-divider::before, .txt-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.08); } </style>

Quick Info

Category
Layout
Filename
DividerwithText.astro
Dependencies
None — pure Astro + CSS
Tags
layoutdividertypography