💾 Demo Page

This is a demo page to show off the all of the components available for Astro Nano with Catppuccin customzied and added to by Brendan .

Typography
Callouts
Buttons
Cards
Utilities
Accessibility

Typography

H1

<h1 class="animate text-3xl font-bold text-black dark:text-white my-4">
    H1
</h1>

H2

<h2 class="animate font-semibold text-xl text-black dark:text-white my-4">
    H2
</h2>

Section Header

optional section link

<div class="flex flex-wrap gap-y-2 items-center justify-between my-4">
    <h5 class="font-semibold text-black dark:text-white">
        Section Header
    </h5>
    <Link href="/blog">
        See all posts
    </Link>
</div>

This is a paragraph. It's a great way to add some context to your content.

<p class="animate">
    This is a paragraph. It's a great way to add some context to your content.
</p>

Buttons

Button Label

<a class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-2 px-4 rounded my-4" href="#">
    Button Label
</a>

Callouts

👨🏻‍💻

Default callout

<Callout icon="👨🏻‍💻" type="default">Content</Callout>

👨🏻‍💻

Info callout

<Callout icon="👨🏻‍💻" type="info">Content</Callout>

👨🏻‍💻

Success callout

<Callout icon="👨🏻‍💻" type="success">Content</Callout>

👨🏻‍💻

Warning callout

<Callout icon="👨🏻‍💻" type="warning">Content</Callout>

👨🏻‍💻

Danger callout

<Callout icon="👨🏻‍💻" type="danger">Content</Callout>

Cards

ArrowCard

Arrow card example

An arrow card takes in an Astro collection entry.

<ArrowCard entry={arrowcardentry} />

GhostCard

A card to point back to a Ghost page.

📖 Example Ghost Card

This is an example of a ghost card.

<GhostCard entry={ghostcardentry} />

SocialCard

A card to point to a social network profile.

🐦

Example

@boleary

<SocialCard 
    url="https://twitter.com/olearycrew"
    icon="🐦"
    title="Example"
    handle="@boleary"
/>

Utilities

Divider

<Divider />

Breadcrumb

<nav class="flex" aria-label="Breadcrumb">
<ol role="list" class="flex items-center space-x-4">
    <li>
    <div>
        <a href="#" class="text-surface2 hover:text-subtext1">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
            <path fill-rule="evenodd" d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" clip-rule="evenodd" />
        </svg>
        <span class="sr-only">Home</span>
        </a>
    </div>
    </li>
    <li>
    <div class="flex items-center">
        <span class="text-subtext0">{'/'}</span>
        <a href="#" class="ml-4 text-sm font-medium text-surface2 hover:text-subtext1">Projects</a>
    </div>
    </li>
    <li>
    <div class="flex items-center">
        <span class="text-subtext0">{'/'}</span>
        <span class="ml-4 text-sm font-medium text-subtext1" aria-current="page">Project Nero</span>
    </div>
    </li>
</ol>
</nav>

Stats Component

Creators on the platform: 8,000+
Flat platform fee: 3%
Uptime guarantee: 99.9%

<dl class="grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-1 lg:grid-cols-3">
    <div class="flex flex-col bg-white/5 p-8">
        <dt class="text-sm font-semibold leading-6 text-subtext0">Creators on the platform</dt>
        <dd class="order-first text-2xl font-semibold tracking-tight text-mauve">8,000+</dd>
    </div>
    <div class="flex flex-col bg-white/5 p-8">
        <dt class="text-sm font-semibold leading-6 text-subtext0">Flat platform fee</dt>
        <dd class="order-first text-2xl font-semibold tracking-tight text-mauve">3%</dd>
    </div>
    <div class="flex flex-col bg-white/5 p-8">
        <dt class="text-sm font-semibold leading-6 text-subtext0">Uptime guarantee</dt>
        <dd class="order-first text-2xl font-semibold tracking-tight text-mauve">99.9%</dd>
    </div>
</dl>

Accessibility

I am in no way a web accessibility expert, but I did what I could to make this theme more accessible. If you find any issues, please get in touch .

Colors

For dark mode, the foreground color is typically #D1D5DB (or #FFF) and the background color is #1E1E2E, for a contrast ratio of 11.13:1 .

For light mode, the foreground color is typically #28262B (or #000) and the background color is #F1E8FC, for a contrast ratio of 12.61:1 .

💾 Demo Page

Contents

Typography

H1

H2

Section Header

Buttons

Callouts

Cards

ArrowCard

GhostCard

SocialCard

Utilities

Divider

Breadcrumb

Stats Component

Accessibility

Colors