@netlify/spark-ui 1.20.0 → 1.21.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.20.0",
+  "version": "1.21.1",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",

package/packages/components/Card.astro

@@ -28,7 +28,8 @@ const {
 } = Astro.props;
 
 const isAnchorHeadline = isCardClickable && headline && !link?.text && link?.href;
-const isExternal = link?.href && !new URL(link.href, 'https://www.netlify.com').hostname.endsWith('netlify.com');
+const isExternal =
+  link?.href && !new URL(link.href, 'https://www.netlify.com').hostname.endsWith('netlify.com');
 ---
 
 <Element
@@ -68,7 +69,12 @@ const isExternal = link?.href && !new URL(link.href, 'https://www.netlify.com').
   <slot />
   {
     link && link.text && (
-      <ActionLink class="n-card-link" id={link.id} href={link.href} {...isExternal && { target: '_blank', rel: 'noopener' }}>
+      <ActionLink
+        class="n-card-link"
+        id={link.id}
+        href={link.href}
+        {...(isExternal && { target: '_blank', rel: 'noopener' })}
+      >
         {link.text}
       </ActionLink>
     )
@@ -163,6 +169,7 @@ const isExternal = link?.href && !new URL(link.href, 'https://www.netlify.com').
   }
 
   .n-card-clickable .n-action-arrow {
+    margin-block-start: auto;
     margin-inline-start: auto;
   }
 

package/packages/components/HeadingBlock.astro

@@ -21,7 +21,7 @@ const {
   id,
   eyebrow,
   heading,
-  headingLevel = 2,
+  headingLevel = '2',
   headingMaxWidth,
   text,
   textMaxWidth,

package/skills/landing-page.md

@@ -2,6 +2,17 @@
 
 Build a marketing landing page using Netlify Spark UI. Follow these guidelines strictly.
 
+## Template Reference
+
+Before building, read the template pages under `docs/src/content/docs/templates/`. They contain complete, working examples of full landing pages and individual sections with recommended layouts and usage patterns:
+
+- `docs/src/content/docs/templates/page.mdx` — Full landing page example showing a recommended section order and composition
+- `docs/src/content/docs/templates/cards.mdx` — Cards section layout and usage patterns
+- `docs/src/content/docs/templates/switchback.mdx` — Switchback section layout and usage patterns
+- `docs/src/content/docs/templates/tabbed-content.mdx` — Tabbed content section layout and usage patterns
+
+Treat these templates as the authoritative reference for structure and layout decisions. Where template examples differ from or extend the guidelines below, prefer the template.
+
 ## Page Structure
 
 Wrap every section in `<PageSection>` (props: `spaceTop`, `spaceBottom`, `theme`). Use this order (include only what fits the request):
@@ -80,8 +91,8 @@ import tickerData from '../data/trust-bar-ticker.json';
 <PageSection>
   <HeadingBlock eyebrow={cardData.eyebrow} heading={cardData.heading} text={cardData.text} alignment="center" />
   <div class="ntl-grid" style="--ntl-grid-column-min-size: 20rem;">
-    {cardData.items.map(({ eyebrow, heading, text, cta, image }) => (
-      <Card eyebrow={eyebrow} headline={heading} paragraph={text} link={cta}>
+    {cardData.items.map(({ image, ...card }) => (
+      <Card {...card}>
         {image && <Image slot="image" src={image.src} alt={image.alt} width={image.width} height={image.height} />}
       </Card>
     ))}
@@ -92,9 +103,8 @@ import tickerData from '../data/trust-bar-ticker.json';
 <PageSection>
   <HeadingBlock eyebrow={switchbackData.eyebrow} heading={switchbackData.heading} />
   <SwitchbackGroup>
-    {switchbackData.items.map(({ eyebrow, heading, text, list, cta, mediaPattern, image }, i) => (
-      <Switchback eyebrow={eyebrow} heading={heading} text={text} list={list} cta={cta}
-        isReversed={i % 2 === 0} mediaPattern={mediaPattern}>
+    {switchbackData.items.map(({ image, ...item }, i) => (
+      <Switchback {...item} isReversed={i % 2 === 0}>
         <Image slot="media" src={image.src} alt={image.alt} width={image.width} height={image.height} />
       </Switchback>
     ))}
@@ -111,8 +121,8 @@ import tickerData from '../data/trust-bar-ticker.json';
       ))}
     </TabList>
     <TabPanelGroup isUniformHeight noPadding>
-      {tabbedContentData.items.map(({ heading, list, text, ctas, codeBlock, isSelected }) => (
-        <TabbedContentPanel isHidden={!isSelected} heading={heading} list={list} text={text} ctas={ctas} codeBlock={codeBlock} />
+      {tabbedContentData.items.map(({ title, icon, isSelected, ...panel }) => (
+        <TabbedContentPanel {...panel} isHidden={!isSelected} />
       ))}
     </TabPanelGroup>
   </TabbedContent>
@@ -146,7 +156,7 @@ HeadingBlock props: `heading`, `headingLevel` (1-4, default 2), `text`, `eyebrow
 Keep content in JSON files. Key shapes:
 
 - **Hero:** `{ heading, text, ctas: [{ id, text, href, variant? }] }`
-- **Card item:** `{ eyebrow, heading, text (HTML ok), cta: { id, href, text }, image?: { src, alt, width, height } }`
+- **Card item:** `{ eyebrow, headline, paragraph (HTML ok), link: { id, href, text }, image?: { src, alt, width, height }, isCardClickable? }`
 - **Switchback item:** `{ eyebrow, heading, text, list: string[], cta: { id, href, text }, mediaPattern: 1|2|3, image: { src, alt, width, height } }`
 - **TabbedContent item:** `{ title, icon?, isSelected, heading, text?, list?: string[], ctas?, codeBlock?: { heading?, icon?, lang, code } }`
 - **TrustBarTicker:** `{ stats: [{ iconSrc, text }], logos: [{ src, alt, width, height }] }`