@contentrain/astro-kit 0.35.0 → 0.36.0

package/catalog.json

@@ -626,6 +626,11 @@
                 "label": "Image description",
                 "description": "What the image shows, for readers who cannot see it; empty when it is decoration."
               },
+              "icon": {
+                "type": "image",
+                "label": "Icon",
+                "description": "A small image above the title (decoration)."
+              },
               "eyebrow": {
                 "type": "string",
                 "label": "Eyebrow",
@@ -791,6 +796,7 @@
         "items[].linkLabel": "items[].link_label",
         "items[].image": "items[].image",
         "items[].imageAlt": "items[].image_alt",
+        "items[].icon": "items[].icon",
         "items[].eyebrow": "items[].eyebrow"
       }
     },

package/components/card-grid/CardGrid.astro

@@ -42,6 +42,8 @@ interface Item {
   /** The image's address (or, until 0.7, an `ImageInput`). */
   image?: ImageSource | undefined
   imageAlt?: string | undefined
+  /** A small image (an icon) above the title: decoration, so it has no alt (an icon box's svg, a feature's mark). */
+  icon?: string | undefined
   eyebrow?: string | undefined
 }
 
@@ -79,6 +81,7 @@ const headingId = title ? `cards-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-
     {items.map(item => (
       <li class={card()}>
         {imageOf(item.image, item.imageAlt) && <div class={media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
+        {item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-10 w-10 object-contain" />}
         {item.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
         <CardHeading class={cardTitle()}>
           {item.href && !item.linkLabel

package/components/card-grid/fixtures.json

@@ -4,5 +4,6 @@
   { "name": "four-elevated-inverse", "props": { "columns": "4", "style": "elevated", "tone": "inverse", "headingLevel": 3, "title": "Team", "items": [{ "title": "Mira Kovač", "text": "Editor", "image": { "src": "/kit-fixtures/avatar-1.svg", "alt": "Mira Kovač", "width": 96, "height": 96 } }, { "title": "Jon Ade", "text": "Engineer", "image": { "src": "/kit-fixtures/avatar-2.svg", "alt": "Jon Ade", "width": 96, "height": 96 } }, { "title": "Lea Park", "text": "Designer", "image": { "src": "/kit-fixtures/avatar-3.svg", "alt": "Lea Park", "width": 96, "height": 96 } }, { "title": "Sam Ortiz", "text": "Producer" }] } },
   { "name": "accent", "props": { "tone": "accent", "columns": "3", "items": [{ "title": "Fast", "text": "Static HTML, one stylesheet." }, { "title": "Editable", "text": "Content in Contentrain Studio." }, { "title": "Kept", "text": "Every address survives." }] } },
   {"name": "measured-columns", "props": {"title": "Services", "measured": {"containerPx": 1140, "padY": 80, "columns": {"390": 1, "768": 2, "1280": 4}, "gap": 30, "radius": 4, "bg": {"color": "#f4f1ea"}}, "items": [{"title": "Audits", "text": "Where a site loses readers."}, {"title": "Builds", "text": "Static and fast."}, {"title": "Hosting", "text": "Managed for you."}, {"title": "Care", "text": "Kept up to date."}]}},
+  {"name": "icon-boxes", "props": {"columns": "3", "align": "center", "items": [{"title": "Design", "text": "Layouts built around your products.", "icon": "/kit-fixtures/icon-1.svg"}, {"title": "Build", "text": "Fast pages that stay fast.", "icon": "/kit-fixtures/icon-1.svg"}, {"title": "Grow", "text": "Monthly reports you can read in five minutes.", "icon": "/kit-fixtures/icon-1.svg"}]}},
   {"name": "link-labels", "props": {"columns": "4", "align": "center", "items": [{"title": "Kasko", "href": "/urunlerimiz/kasko/", "linkLabel": "Teklif Al"}, {"title": "Trafik Sigortası", "href": "/urunlerimiz/trafik-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Konut Sigortası", "href": "/urunlerimiz/konut-sigortasi/", "linkLabel": "Teklif Al"}, {"title": "Tamamlayıcı Sağlık"}]}}
 ]

package/components/card-grid/meta.json

@@ -99,6 +99,11 @@
             "label": "Image description",
             "description": "What the image shows, for readers who cannot see it; empty when it is decoration."
           },
+          "icon": {
+            "type": "image",
+            "label": "Icon",
+            "description": "A small image above the title (decoration)."
+          },
           "eyebrow": {
             "type": "string",
             "label": "Eyebrow",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "license": "MIT",
   "description": "Copy-in Astro components for Contentrain sites (shadcn model): typed props, tailwind-variants, zero JavaScript by default — with a machine-readable catalog",
   "type": "module",