diff --git a/examples/snowpack/astro/components/Card.css b/examples/snowpack/astro/components/Card.css
new file mode 100644
index 000000000000..2fa7efe201ec
--- /dev/null
+++ b/examples/snowpack/astro/components/Card.css
@@ -0,0 +1,67 @@
+.card {
+ display: flex;
+ grid-column: span 1;
+ overflow: hidden;
+ font-family: Open Sans, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI,
+ Roboto, sans-serif;
+ color: #1a202c;
+ -webkit-font-smoothing: antialiased;
+ box-sizing: border-box;
+ border: 1px solid #e2e8f0;
+}
+
+.card:hover {
+ border-color: #2a85ca;
+ box-shadow: 0 2px 2px 0 rgba(46, 94, 130, 0.4);
+}
+
+.card:hover .card-image {
+ opacity: 0.9;
+}
+
+.card:nth-child(4n + 0) .card-image {
+ background: #f2709c;
+ background: linear-gradient(30deg, #ff9472, #f2709c);
+}
+
+.card:nth-child(4n + 1) .card-image {
+ background: #fbd3e9;
+ background: linear-gradient(30deg, #bb377d, #fbd3e9);
+}
+
+.card:nth-child(4n + 2) .card-image {
+ background: #b993d6;
+ background: linear-gradient(30deg, #8ca6db, #b993d6);
+}
+
+.card:nth-child(4n + 3) .card-image {
+ background: #00d2ff;
+ background: linear-gradient(30deg, #3a7bd5, #00d2ff);
+}
+
+.card-image {
+ width: 100%;
+ object-fit: cover;
+ opacity: 0.8;
+}
+
+.card-image__sm {
+ flex-grow: 1;
+ height: 120px;
+}
+
+.card-image__lg {
+ height: 200px;
+}
+
+.card-text {
+ padding: 1rem;
+}
+
+.card-title {
+ margin: 0 0 0.25rem 0;
+ font-weight: 600;
+ font-size: 20px;
+ font-family: 'Overpass';
+ line-height: 1.1;
+}
diff --git a/examples/snowpack/astro/components/Card.jsx b/examples/snowpack/astro/components/Card.jsx
index a7e2dc4eb715..ee9460dcf93c 100644
--- a/examples/snowpack/astro/components/Card.jsx
+++ b/examples/snowpack/astro/components/Card.jsx
@@ -1,5 +1,6 @@
-import {h} from 'preact';
-import {format as formatDate, parseISO} from 'date-fns';
+import { h } from 'preact';
+import { format as formatDate, parseISO } from 'date-fns';
+import './Card.css';
export default function Card({ item }) {
return (
@@ -10,18 +11,24 @@ export default function Card({ item }) {
>
{item.img ? (
) : (
-
{ item.description }
} + {item.date && ( + + )} + {item.description && ( +{item.description}
+ )}