Brendan O'Leary

💾 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 .

Contents

  • 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

    Card
    A card header
    🤷 Card Title

    A one sentance description for the card

    Text for link ↗️ 
    <Card 
    header="A card header"
    icon="🤷"
    title="Card Title"
    description="A one sentance description for the card"
    href="https://google.com"
    linkText="Text for link"
/>
    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>
    Blueksy X LinkedIn GitLab Instagram
    © 2026 | Brendan O'Leary

    The views here are mine alone not my employer's, not anyone else's.

    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 .

    Image Card

    Example Image
    Image Title

    This is a sample caption for the image. It provides additional context or description. 

    <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white dark:bg-gray-800">
    <img class="w-full" src="https://placehold.co/400" alt="Example Image">
    <div class="px-6 py-4">
        <div class="font-bold text-xl mb-2 text-black dark:text-white">Image Title</div>
        <p class="text-gray-700 dark:text-gray-300 text-base">
            This is a sample caption for the image. It provides additional context or description.
        </p>
    </div>
</div>