@contentrain/astro-kit 0.33.1 → 0.34.0

package/README.md

@@ -17,7 +17,7 @@ They read its design tokens and pass its gates: `astro check` with the
 | `header` | Brand, navigation, optional call to action | none |
 | `nav` | Inline menu with submenus; popover drawer or `<details>` on phones | none |
 | `footer` | Brand, link columns or a link row, social links, copyright | none |
-| `hero` | Page opener: heading, text, actions, image | none |
+| `hero` | Page opener: heading, text, points, actions, image | none |
 | `card-grid` | Grid of cards (features, services, team) | none |
 | `post-card` | One post in a list | none |
 | `cta` | Call-to-action band | none |

package/catalog.json

@@ -611,6 +611,11 @@
                 "label": "Link",
                 "description": "Makes the whole card a link."
               },
+              "linkLabel": {
+                "type": "string",
+                "label": "Link text",
+                "description": "The link's own text, shown under the card (\"Get a quote\"); without it the whole card is the link."
+              },
               "image": {
                 "type": "image",
                 "label": "Image",
@@ -783,6 +788,7 @@
         "items[].title": "items[].title",
         "items[].text": "items[].text",
         "items[].href": "items[].href",
+        "items[].linkLabel": "items[].link_label",
         "items[].image": "items[].image",
         "items[].imageAlt": "items[].image_alt",
         "items[].eyebrow": "items[].eyebrow"
@@ -2672,7 +2678,7 @@
         },
         "tagline": {
           "type": "string",
-          "description": "One line under the name (site.tagline)."
+          "description": "A line under the name (site.tagline, or the source footer's about text); line breaks are kept, so a credit under it stays its own line."
         },
         "columns": {
           "type": "array",
@@ -2743,6 +2749,29 @@
             "email": {
               "type": "email",
               "description": "Email address, linked as mailto:."
+            },
+            "labels": {
+              "type": "object",
+              "description": "The words the source prints before each detail (\"Telefon:\", \"Email:\"); each optional.",
+              "fields": {
+                "address": {
+                  "type": "string",
+                  "description": "Before the address."
+                },
+                "phone": {
+                  "type": "string",
+                  "description": "Before the phone number."
+                },
+                "email": {
+                  "type": "string",
+                  "description": "Before the email address."
+                }
+              }
+            },
+            "order": {
+              "type": "array",
+              "items": "string",
+              "description": "The details' order as the source prints them: address, phone and email, each once; absent, that order. A detail left out is printed after the listed ones."
             }
           },
           "description": "Contact details printed in an address block under the tagline; the block is left out when none is set."
@@ -3439,6 +3468,27 @@
           "label": "Lead",
           "description": "Paragraph under the heading."
         },
+        "items": {
+          "type": "array",
+          "label": "Points",
+          "items": {
+            "type": "object",
+            "fields": {
+              "icon": {
+                "type": "image",
+                "label": "Icon",
+                "description": "A small image before the text (decoration)."
+              },
+              "title": {
+                "type": "string",
+                "label": "Text",
+                "required": true,
+                "description": "A short promise or feature (\"Fast, easy and painless\")."
+              }
+            }
+          },
+          "description": "Short points under the lead, before the buttons, in order: a hero's feature or promise list."
+        },
         "actions": {
           "type": "array",
           "label": "Buttons",
@@ -3652,6 +3702,9 @@
         "heading": "heading",
         "eyebrow": "eyebrow",
         "lead": "lead",
+        "items": "items",
+        "items[].icon": "items[].icon",
+        "items[].title": "items[].title",
         "actions": "actions",
         "actions[].label": "actions[].label",
         "actions[].href": "actions[].href",
@@ -5969,7 +6022,6 @@
         "heading": {
           "type": "string",
           "label": "Heading",
-          "required": true,
           "description": "The section heading."
         },
         "headingLevel": {

package/components/card-grid/CardGrid.astro

@@ -37,6 +37,8 @@ interface Item {
   title: string
   text?: string | undefined
   href?: string | undefined
+  /** The link's own text, shown under the card ("Get a quote"); without it the whole card is the link. */
+  linkLabel?: string | undefined
   /** The image's address (or, until 0.7, an `ImageInput`). */
   image?: ImageSource | undefined
   imageAlt?: string | undefined
@@ -79,11 +81,12 @@ const headingId = title ? `cards-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-
         {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.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
         <CardHeading class={cardTitle()}>
-          {item.href
+          {item.href && !item.linkLabel
             ? <a href={safeHref(item.href)} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{item.title}</a>
             : item.title}
         </CardHeading>
         {item.text && <p class={text({ class: dim })} data-kit-text>{item.text}</p>}
+        {item.href && item.linkLabel && <a href={safeHref(item.href)} class="font-medium text-accent-text underline-offset-4 hover:underline">{item.linkLabel}</a>}
       </li>
     ))}
   </ul>

package/components/card-grid/fixtures.json

@@ -3,5 +3,6 @@
   { "name": "two-bordered-center", "props": { "columns": "2", "style": "bordered", "align": "center", "tone": "muted", "title": "Plans", "items": [{ "eyebrow": "Starter", "title": "One site", "text": "Everything you need for a single site." }, { "eyebrow": "Team", "title": "Many sites", "text": "Shared components across a portfolio." }] } },
   { "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": "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": "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

@@ -84,6 +84,11 @@
             "label": "Link",
             "description": "Makes the whole card a link."
           },
+          "linkLabel": {
+            "type": "string",
+            "label": "Link text",
+            "description": "The link's own text, shown under the card (\"Get a quote\"); without it the whole card is the link."
+          },
           "image": {
             "type": "image",
             "label": "Image",

package/components/footer/Footer.astro

@@ -3,7 +3,7 @@
 // links and the copyright line.
 import { tv } from 'tailwind-variants'
 import type { LinkInput } from '../_shared/types'
-import { footerLinkSizeClasses, footerVars } from './footer'
+import { contactKeys, footerLinkSizeClasses, footerVars, type ContactInput } from './footer'
 import { safeHref } from '../_shared/safe-url'
 
 const footer = tv({
@@ -50,8 +50,12 @@ interface Props {
   /** A single row of links (the footer menu). */
   links?: LinkInput[] | undefined
   social?: LinkInput[] | undefined
-  /** Contact details printed in an `<address>` block; each is optional, and the block is left out when none is set. */
-  contact?: { address?: string | undefined, phone?: string | undefined, email?: string | undefined } | undefined
+  /**
+   * Contact details printed in an `<address>` block; each is optional, and the block is left out when none is set.
+   * `labels`: the words the source prints before a detail ("Telefon:", "Email:"), each optional. `order`: the details'
+   * order as the source prints them; absent, address, phone, email. A detail the order leaves out is printed after it.
+   */
+  contact?: ContactInput | undefined
   /** The copyright line, e.g. "© 2026 Northwind Studio"; `{year}` is the current year; `false` prints none. Absent: "© year Site". */
   copyright?: string | false | undefined
   /** Label of the cookie settings link after the copyright line ("Cookie settings"); it reopens the consent bar, so a visitor can withdraw consent as easily as they gave it. Only with a consent bar on the page. */
@@ -84,6 +88,7 @@ const vars = footerVars({ layout, columnCount: columns.length, pack, narrow, pac
 const year = String(new Date().getFullYear())
 const phoneHref = contact?.phone?.replace(/[^\d+]/g, '')
 const hasContact = Boolean(contact?.address || contact?.phone || contact?.email)
+const contactOrder = contactKeys(contact?.order)
 const line = copyright === false ? undefined : copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
 // The line and the cookie settings control share one paragraph; neither: no paragraph.
 const hasBottom = Boolean(line || consentLabel)
@@ -93,12 +98,15 @@ const hasBottom = Boolean(line || consentLabel)
   <div class:list={[inner(), ...footerLinkSizeClasses({ linkSize, linkSizeNarrow })]} data-kit-footer style={vars || undefined}>
     <div class="flex flex-col gap-3">
       <p class="text-base font-semibold" data-kit-brand>{siteName}</p>
-      {tagline && <p class={muted()} data-kit-tagline>{tagline}</p>}
+      {/* Line breaks are kept: an about line and the designer's credit under it ("Web Tasarım: …") stay two lines. */}
+      {tagline && <p class={`${muted()} whitespace-pre-line`} data-kit-tagline>{tagline}</p>}
       {hasContact && (
         <address class={`${muted()} flex flex-col gap-1 not-italic`} data-kit-contact>
-          {contact?.address && <span class="whitespace-pre-line">{contact.address}</span>}
-          {contact?.phone && (phoneHref ? <a href={`tel:${phoneHref}`} class={link()}>{contact.phone}</a> : <span>{contact.phone}</span>)}
-          {contact?.email && <a href={`mailto:${contact.email}`} class={link()}>{contact.email}</a>}
+          {contactOrder.map(key => key === 'address'
+            ? contact?.address && <span class="whitespace-pre-line">{contact.labels?.address && <>{contact.labels.address} </>}{contact.address}</span>
+            : key === 'phone'
+              ? contact?.phone && <span>{contact.labels?.phone && <>{contact.labels.phone} </>}{phoneHref ? <a href={`tel:${phoneHref}`} class={link()}>{contact.phone}</a> : contact.phone}</span>
+              : contact?.email && <span>{contact.labels?.email && <>{contact.labels.email} </>}<a href={`mailto:${contact.email}`} class={link()}>{contact.email}</a></span>)}
         </address>
       )}
       {layout === 'columns' && hasBottom && <p class:list={[muted(), 'mt-auto pt-6']}>{line}{consentLabel && <>{line && ' · '}<button type="button" data-kit-consent-open class={link()}>{consentLabel}</button></>}</p>}

package/components/footer/fixtures.json

@@ -7,5 +7,6 @@
   { "name": "columns-end", "props": { "siteName": "Golden Works", "tagline": "Websites for makers", "layout": "columns", "pack": "end", "packGap": "128px", "linkSize": "17.88px", "copyright": "© 2026 Golden Works", "columns": [{ "label": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Work", "href": "/work/" }] }, { "label": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }, { "label": "Press", "href": "/press/" }] }] } },
   { "name": "columns-end-row", "props": { "siteName": "Golden Works", "layout": "columns", "pack": "end", "narrow": "row", "packGap": "128px", "packGapNarrow": "48px", "linkSize": "17.88px", "copyright": "© 2026 Golden Works", "columns": [{ "label": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Work", "href": "/work/" }] }, { "label": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }] }] } },
   { "name": "columns-end-row-narrow-size", "props": { "siteName": "Golden Works", "layout": "columns", "pack": "end", "narrow": "row", "packGap": "128px", "packGapNarrow": "48px", "linkSize": "17.88px", "linkSizeNarrow": "16.4px", "copyright": "© 2026 Golden Works", "columns": [{ "label": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Work", "href": "/work/" }] }, { "label": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }] }] } },
-  { "name": "columns-end-row-long-brand", "props": { "siteName": "Golden Works Engineering Consultancy", "tagline": "Websites, systems and signalling for the people who keep cities moving every single day", "layout": "columns", "pack": "end", "narrow": "row", "packGap": "128px", "packGapNarrow": "70px", "linkSize": "17.88px", "linkSizeNarrow": "16.14px", "copyright": "© 2026 Golden Works Engineering Consultancy, all rights reserved", "columns": [{ "label": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Work", "href": "/work/" }] }, { "label": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }] }] } }
+  { "name": "columns-end-row-long-brand", "props": { "siteName": "Golden Works Engineering Consultancy", "tagline": "Websites, systems and signalling for the people who keep cities moving every single day", "layout": "columns", "pack": "end", "narrow": "row", "packGap": "128px", "packGapNarrow": "70px", "linkSize": "17.88px", "linkSizeNarrow": "16.14px", "copyright": "© 2026 Golden Works Engineering Consultancy, all rights reserved", "columns": [{ "label": "Studio", "links": [{ "label": "About", "href": "/about/" }, { "label": "Work", "href": "/work/" }] }, { "label": "Contact", "links": [{ "label": "Email", "href": "mailto:hello@example.com" }] }] } },
+  { "name": "contact-labels", "props": { "siteName": "Private Sigorta", "tagline": "Private Sigorta, yenilikçi yönetim ve ileri teknolojiyi geçmişin tecrübeleriyle birleştiren bir acentedir. Web Tasarım: Farkol Digital", "contact": { "address": "G.O.P. Mah. Barbaros Cad. No: 2 D: 403 Çerkezköy/Tekirdağ", "phone": "+90 (282) 725 1400", "email": "info@privatesigorta.com.tr", "labels": { "email": "Email:", "phone": "Telefon:" }, "order": ["email", "phone", "address"] }, "links": [{ "label": "Hakkımızda", "href": "/hakkimizda/" }, { "label": "İletişim", "href": "/iletisim/" }] } }
 ]

package/components/footer/footer.ts

@@ -1,3 +1,22 @@
+export type ContactKey = 'address' | 'phone' | 'email'
+
+/** The footer's contact details, with the words the source prints before each and the order it prints them in. */
+export interface ContactInput {
+  address?: string | undefined
+  phone?: string | undefined
+  email?: string | undefined
+  labels?: { address?: string | undefined, phone?: string | undefined, email?: string | undefined } | undefined
+  order?: readonly ContactKey[] | undefined
+}
+
+const CONTACT_KEYS: readonly ContactKey[] = ['address', 'phone', 'email']
+
+/** The details in the order given (unknown and repeated keys dropped), then the ones it left out in the default order. */
+export function contactKeys(order: readonly string[] | undefined): ContactKey[] {
+  const given = [...new Set((order ?? []).filter((key): key is ContactKey => (CONTACT_KEYS as readonly string[]).includes(key)))]
+  return [...given, ...CONTACT_KEYS.filter(key => !given.includes(key))]
+}
+
 export interface FooterVarsInput {
   layout: 'simple' | 'columns'
   columnCount: number

package/components/footer/meta.json

@@ -59,7 +59,7 @@
     },
     "tagline": {
       "type": "string",
-      "description": "One line under the name (site.tagline)."
+      "description": "A line under the name (site.tagline, or the source footer's about text); line breaks are kept, so a credit under it stays its own line."
     },
     "columns": {
       "type": "array",
@@ -121,7 +121,17 @@
       "fields": {
         "address": { "type": "text", "description": "Postal address; line breaks are kept." },
         "phone": { "type": "string", "description": "Phone number, linked as tel: when it has digits." },
-        "email": { "type": "email", "description": "Email address, linked as mailto:." }
+        "email": { "type": "email", "description": "Email address, linked as mailto:." },
+        "labels": {
+          "type": "object",
+          "description": "The words the source prints before each detail (\"Telefon:\", \"Email:\"); each optional.",
+          "fields": {
+            "address": { "type": "string", "description": "Before the address." },
+            "phone": { "type": "string", "description": "Before the phone number." },
+            "email": { "type": "string", "description": "Before the email address." }
+          }
+        },
+        "order": { "type": "array", "items": "string", "description": "The details' order as the source prints them: address, phone and email, each once; absent, that order. A detail left out is printed after the listed ones." }
       },
       "description": "Contact details printed in an address block under the tagline; the block is left out when none is set."
     },

package/components/hero/Hero.astro

@@ -1,5 +1,5 @@
 ---
-// The page's opening section: heading, lead, actions and an image — beside the
+// The page's opening section: heading, lead, points, actions and an image — beside the
 // text, below it, or behind it as a cover with the text over a scrim.
 import { tv } from 'tailwind-variants'
 import Button from '../_shared/Button.astro'
@@ -16,13 +16,16 @@ const hero = tv({
     eyebrow: 'text-sm font-semibold tracking-wide uppercase opacity-80',
     heading: 'text-4xl [font-weight:var(--font-weight-heading,700)] tracking-tight text-balance md:text-5xl lg:text-6xl',
     lead: 'max-w-2xl text-lg text-pretty opacity-85 md:text-xl',
+    // A hero's short promise list ("Fast, easy and painless"), each with its icon when it has one.
+    points: 'flex flex-wrap gap-x-6 gap-y-2 text-base font-medium md:text-lg',
+    point: 'flex items-center gap-2',
     actions: 'flex flex-wrap gap-3 pt-2',
     media: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
   },
   variants: {
     layout: {
       split: { grid: 'md:grid-cols-2' },
-      centered: { copy: 'items-center text-center', lead: 'mx-auto', actions: 'justify-center', media: 'mx-auto w-full max-w-4xl' },
+      centered: { copy: 'items-center text-center', lead: 'mx-auto', points: 'justify-center', actions: 'justify-center', media: 'mx-auto w-full max-w-4xl' },
       cover: { grid: 'relative z-10 min-h-[28rem] md:min-h-[36rem]', copy: 'max-w-3xl' },
     },
     // accent/accent-ink is only ~5:1 — dimming text on it drops body copy under 4.5:1 (WCAG 1.4.3), so accent keeps it at full strength.
@@ -46,7 +49,7 @@ const hero = tv({
   compoundVariants: [
     // After the layout's own heights, so a boxed cover keeps WordPress's 430px default.
     { layout: 'cover', width: 'content', class: { grid: 'min-h-[20rem] md:min-h-[26.875rem]' } },
-    { layout: 'cover', align: 'center', class: { grid: 'justify-items-center', copy: 'mx-auto items-center text-center', lead: 'mx-auto', actions: 'justify-center' } },
+    { layout: 'cover', align: 'center', class: { grid: 'justify-items-center', copy: 'mx-auto items-center text-center', lead: 'mx-auto', points: 'justify-center', actions: 'justify-center' } },
     // After the centring rules, so the lead leaves them.
     { leadAlign: 'start', class: { lead: 'mx-0 max-w-none self-stretch text-start' } },
     { actionsAlign: 'start', class: { actions: 'justify-start self-stretch' } },
@@ -60,6 +63,8 @@ interface Props {
   level?: 1 | 2 | undefined
   eyebrow?: string | undefined
   lead?: string | undefined
+  /** Short points under the lead, before the buttons: a promise or feature list, each with an optional icon (an image address). */
+  items?: Array<{ title: string, icon?: string | undefined }> | undefined
   actions?: ActionInput[] | undefined
   image?: ImageInput | undefined
   layout?: 'split' | 'centered' | 'cover' | undefined
@@ -84,7 +89,7 @@ interface Props {
 }
 
 
-const { heading, level = 1, eyebrow, lead, actions = [], image, layout = 'split', align, leadAlign, actionsAlign, width = 'full', tone, id, minHeight, headingScale, headingSize, measured } = Astro.props
+const { heading, level = 1, eyebrow, lead, items = [], actions = [], image, layout = 'split', align, leadAlign, actionsAlign, width = 'full', tone, id, minHeight, headingScale, headingSize, measured } = Astro.props
 const s = hero({ layout, align, leadAlign, actionsAlign, width, tone, headingScale, headingSize })
 const Heading = level === 1 ? 'h1' : 'h2'
 const headingId = id ? `${id}-title` : undefined
@@ -107,6 +112,7 @@ const scrim = cover ? measuredFrame(measured).overlay : undefined
               {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
               <Heading id={headingId} class={s.heading()} style={headingStyle}>{heading}</Heading>
               {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
+              {items.length > 0 && <ul class={s.points()}>{items.map(item => <li class={s.point()}>{item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-6 w-6 shrink-0 object-contain" />}<span>{item.title}</span></li>)}</ul>}
               {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
             </div>
           </div>
@@ -125,6 +131,7 @@ const scrim = cover ? measuredFrame(measured).overlay : undefined
             {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
             <Heading id={headingId} class={s.heading()} style={headingStyle}>{heading}</Heading>
             {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
+              {items.length > 0 && <ul class={s.points()}>{items.map(item => <li class={s.point()}>{item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-6 w-6 shrink-0 object-contain" />}<span>{item.title}</span></li>)}</ul>}
             {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
           </div>
         </div>
@@ -139,6 +146,7 @@ const scrim = cover ? measuredFrame(measured).overlay : undefined
           {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
           <Heading id={headingId} class={s.heading()} style={headingStyle}>{heading}</Heading>
           {lead && <p class={s.lead()} data-kit-text>{lead}</p>}
+              {items.length > 0 && <ul class={s.points()}>{items.map(item => <li class={s.point()}>{item.icon && <KitImage image={{ src: item.icon, alt: '' }} class="h-6 w-6 shrink-0 object-contain" />}<span>{item.title}</span></li>)}</ul>}
           {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}
         </div>
         {image && (

package/components/hero/fixtures.json

@@ -240,5 +240,6 @@
       "headingSize": "h2"
     }
   },
-  {"name": "cover-measured-overlay", "props": {"heading": "Fresh eggs, every morning", "lead": "A family farm since 1962.", "layout": "cover", "image": {"src": "/kit-fixtures/photo-4.svg", "alt": "", "width": 1600, "height": 900}, "actions": [{"label": "Visit us", "href": "/visit/"}], "measured": {"padY": 140, "minHeight": 560, "tone": "dark", "bg": {"image": "/kit-fixtures/photo-4.svg", "overlay": "rgba(20, 40, 10, 0.45)"}}}}
+  {"name": "cover-measured-overlay", "props": {"heading": "Fresh eggs, every morning", "lead": "A family farm since 1962.", "layout": "cover", "image": {"src": "/kit-fixtures/photo-4.svg", "alt": "", "width": 1600, "height": 900}, "actions": [{"label": "Visit us", "href": "/visit/"}], "measured": {"padY": 140, "minHeight": 560, "tone": "dark", "bg": {"image": "/kit-fixtures/photo-4.svg", "overlay": "rgba(20, 40, 10, 0.45)"}}}},
+  {"name": "points", "props": {"heading": "Private Sigorta'ya Hoşgeldiniz!", "items": [{"icon": "/kit-fixtures/logo.svg", "title": "Hızlı, Kolay & Sorunsuz"}, {"title": "En Uygun Fiyatlar"}], "actions": [{"label": "Ürünlerimiz", "href": "/urunlerimiz/"}], "image": {"src": "/kit-fixtures/photo-1.svg", "alt": "", "width": 1200, "height": 800}}}
 ]

package/components/hero/meta.json

@@ -109,6 +109,27 @@
       "label": "Lead",
       "description": "Paragraph under the heading."
     },
+    "items": {
+      "type": "array",
+      "label": "Points",
+      "items": {
+        "type": "object",
+        "fields": {
+          "icon": {
+            "type": "image",
+            "label": "Icon",
+            "description": "A small image before the text (decoration)."
+          },
+          "title": {
+            "type": "string",
+            "label": "Text",
+            "required": true,
+            "description": "A short promise or feature (\"Fast, easy and painless\")."
+          }
+        }
+      },
+      "description": "Short points under the lead, before the buttons, in order: a hero's feature or promise list."
+    },
     "actions": {
       "type": "array",
       "label": "Buttons",

package/components/split/Split.astro

@@ -67,7 +67,8 @@ interface Feature {
 }
 
 interface Props {
-  heading: string
+  /** The section heading; absent when the source's text and image stand without one. */
+  heading?: string | undefined
   /** The heading's level: 2 under the page title; 3 or 4 when the section sits inside another. */
   headingLevel?: 2 | 3 | 4 | undefined
   eyebrow?: string | undefined
@@ -103,14 +104,14 @@ const Heading = `h${headingLevel}` as 'h2'
 const columns = COLUMNS[imageSide === 'start' ? 'image' : 'text'][ratio]
 const bleed = imageBleed === 'edge' ? BLEED[imageSide === 'start' ? 'start' : 'end'] : undefined
 const video = mediaKind === 'video' && videoUrl
-const headingId = id ? `${id}-title` : undefined
+const headingId = id && heading ? `${id}-title` : undefined
 const html = await renderMarkdown(body)
 ---
 <Section measured={measured} tone={tone} id={id} aria-labelledby={headingId} class={bleed ? 'overflow-x-clip' : undefined}>
   <div class:list={[s.grid(), columns]}>
     <div class={s.copy()}>
       {eyebrow && <p class={s.eyebrow()}>{eyebrow}</p>}
-      <Heading id={headingId} class={s.heading()}>{heading}</Heading>
+      {heading && <Heading id={headingId} class={s.heading()}>{heading}</Heading>}
       {html && <div class={s.body()} data-kit-text set:html={html} />}
       {features.length > 0 && <FeatureList items={features} columns="2" style={featureStyle} tone={tone === 'brand' || tone === 'none' ? undefined : tone} bare titleLevel={Math.min(5, headingLevel + 1) as 3 | 4 | 5} />}
       {actions.length > 0 && <div class={s.actions()}>{actions.map(action => <Button action={action} size="lg" />)}</div>}

package/components/split/fixtures.json

@@ -9,5 +9,6 @@
   { "name": "bleed-edge-end", "props": { "heading": "A wider picture", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "imageBleed": "edge", "image": { "src": "/kit-fixtures/photo-4.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "tone": "brand" } },
   { "name": "bleed-edge-start-none", "props": { "heading": "From the other side", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "imageBleed": "edge", "imageSide": "start", "image": { "src": "/kit-fixtures/photo-5.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "tone": "none" } },
   { "name": "video-sticky-check", "props": { "heading": "See how it works", "headingLevel": 3, "mediaKind": "video", "videoUrl": "https://www.youtube.com/watch?v=dQw4w9WgXcQ", "playLabel": "Play video", "sticky": true, "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.\n\nWe have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.\n\nWe have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "features": [{ "title": "Fast", "text": "Static pages, one stylesheet.", "icon": "bolt" }, { "title": "Safe", "text": "Your repository stays yours.", "icon": "shield" }], "image": { "src": "/kit-fixtures/photo-6.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 } } },
-  { "name": "measured-frame", "props": { "eyebrow": "Our studio", "heading": "Small team, careful work", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "actions": [{ "label": "Meet the team", "href": "/team/" }, { "label": "Our process", "href": "/process/", "style": "ghost" }], "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "measured": { "containerPx": 1000, "padY": 80, "bg": { "color": "#eef2ff" }, "tone": "light" } } }
+  { "name": "measured-frame", "props": { "eyebrow": "Our studio", "heading": "Small team, careful work", "body": "We have built websites for independent publishers since 2012.\n\nEvery project gets **one** designer and one engineer from start to launch.", "actions": [{ "label": "Meet the team", "href": "/team/" }, { "label": "Our process", "href": "/process/", "style": "ghost" }], "image": { "src": "/kit-fixtures/photo-2.svg", "alt": "The studio's workshop", "width": 1200, "height": 800 }, "measured": { "containerPx": 1000, "padY": 80, "bg": { "color": "#eef2ff" }, "tone": "light" } } },
+  { "name": "no-heading", "props": { "body": "Private Sigorta günümüz gelişen sigortacılık sektörünün bir adım önünde olmayı hedeflemiş bir sigorta acentesidir.\n\nÖzel sağlık sigortası alanında, bireysel ve kurumsal müşterilere yönelik çözümler sunuyoruz.", "image": { "src": "/kit-fixtures/photo-3.svg", "alt": "", "width": 1200, "height": 800 } } }
 ]

package/components/split/meta.json

@@ -107,7 +107,6 @@
     "heading": {
       "type": "string",
       "label": "Heading",
-      "required": true,
       "description": "The section heading."
     },
     "headingLevel": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.33.1",
+  "version": "0.34.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",
@@ -42,7 +42,7 @@
     "mapping"
   ],
   "dependencies": {
-    "@contentrain/types": "1.60.0"
+    "@contentrain/types": "1.61.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",