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

Ensure you've installed the agnostic-astro npm package (note this installs depedency agnostic-css as well): 

npm i agnostic-astro

and then import common.min.css from your “base layout” (you should only need to do this in once place as this is global CSS). This brings in the required CSS custom properties, reset, and properties: 

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.