Cards

The agnostic-astro package utilizes XElement under-the-hood in order to provide build-time Astro components. These build-time components will help your project get closer to realizing a mostly no client-side runtime…if you do it right, this should mean an all-green 100% Lighthouse performance score! Leverage the benefits of Islands architecture by sending mostly server built agnostic-astro components. Then, sprinkle client-hydrated ones only as needed.

Usage

AgnosticUI requires the import of the common.min.css from your Astro base layout: 

import 'agnostic-css/public/css-dist/common.min.css';

Then you can import Astro Card component: 

import AgCard from 'agnostic-astro/Card.astro';

Here's the agnostic-astro Card component in use:

<AgCard>
  <h1 class="mbe24"><a href="#">You're Invited!</a></h1>
  <p class="mbe24">We'll be hacking all night!</p>
  <button class="btn btn-block">Join Us!</button>
</AgCard>
Image placeholder image for testing responsiveness
Card Title

★★★★☆ (1234 votes)

Gingerbread gingerbread candy lollipop oat cake danish dragée sugar plum. Lemon drops powder icing cake chocolate.

Image placeholder image for testing responsiveness
Card Title

★★★★☆ (1234 votes)

Gingerbread gingerbread candy lollipop oat cake danish dragée sugar plum. Lemon drops powder icing cake chocolate.

You're Invited!

We'll be hacking all night long on Astro 🚀 and AgnosticUI. Come join us for the fun times!

You're Invited!

We'll be hacking all night long on Astro 🚀 and AgnosticUI. Come join us for the fun times!

Warning

Here be dragons. Thou art forewarned!

Error

There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.