This page demonstrates the various typography and content elements available in AstroDeck. Whether you're creating blog posts, documentation, or landing pages, these styles will help you create beautiful, readable content that works in both light and dark modes.

Headings

AstroDeck provides a clear hierarchy of heading styles, from H1 through H6. Each heading is designed to maintain proper visual weight and spacing.

Heading 1 - Page Title

Heading 2 - Major Section

Heading 3 - Subsection

Heading 4 - Minor Section

Heading 5 - Small Section

Heading 6 - Smallest Section

Paragraphs & Text Styles

Regular paragraph text uses a comfortable line height and spacing for optimal readability. The text automatically adapts to light and dark modes, ensuring excellent contrast in any viewing condition.

Large paragraph text can be used for introductions or emphasis. It draws attention without overwhelming the reader.

Small, muted text is perfect for captions, metadata, or secondary information that supports the main content without competing for attention.

You can use bold text for emphasis, italic text for subtle stress, and inline code for technical references.

Lists

Unordered Lists

Perfect for presenting items without a specific order:

Fast performance with Astro's island architecture
Modern styling with Tailwind CSS v4
Beautiful UI components from shadcn/ui
Full TypeScript support for type safety
AI-friendly documentation for coding assistants

Ordered Lists

Use numbered lists for sequential steps or ranked items:

Clone the repository from GitHub
Install dependencies with npm install
Start the development server with npm run dev
Open your browser to localhost:4321
Start building your project

Nested Lists

Frontend Technologies
- Astro v5.x for static site generation
- React for interactive components
- TypeScript for type safety
Styling & Design
- Tailwind CSS v4 with Vite plugin
- OKLCH color space for accurate colors
- Dark mode support out of the box

Blockquotes

Use blockquotes to highlight important information or quotations:

"AstroDeck combines the best of modern web development: blazing-fast performance, beautiful design, and developer-friendly tooling. It's the perfect starting point for any landing page or SaaS website."

Pro Tip

Always use semantic HTML elements and maintain proper heading hierarchy for better accessibility and SEO. Screen readers and search engines rely on this structure.

Code Examples

Display code with proper syntax highlighting and formatting:

import BaseLayout from "@/layouts/BaseLayout.astro";
import Hero from "@/components/sections/Hero.astro";

<BaseLayout title="Home" description="Welcome">
  <Hero
    title="Build amazing products faster"
    subtitle="Pre-built components for Astro.js"
    primaryCta={{ href: "/sections", label: "Browse" }}
  />
</BaseLayout>

Horizontal Rules

Use horizontal rules to separate major sections:

Links

Links are styled with appropriate contrast and hover states to ensure they're easily identifiable. External links can include an icon to indicate they open in a new tab.

Tables

Tables are responsive and well-formatted:

Component	Type	Props
Hero	Section	title, subtitle, badge
Features	Section	title, subtitle, features[]
Pricing	Section	plans[], highlight

Ready to Start Building?

Explore our component library and start creating beautiful websites with AstroDeck.

Browse Components