@contentgrowth/content-widget 1.3.2 → 1.3.4

package/README.md

@@ -268,6 +268,37 @@ const widget = new ContentGrowthWidget(container, {
 />
 ```
 
+**FeaturedCard:**
+
+A compact card displaying the Featured Summary with customizable styling. Perfect for landing pages.
+
+```astro
+<FeaturedCard
+  apiKey="pk_your_key_here"
+  category="announce"
+  linkPattern="/articles/{slug}"
+  layout="horizontal"
+  borderStyle="dashed"
+  itemsBackground="#f3f4f6"
+  ctaText="Read full story"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiKey` | string | - | Your API key |
+| `category` | string | - | Filter by category |
+| `tags` | string[] | [] | Filter by tags |
+| `layout` | 'vertical' \| 'horizontal' | auto | Card layout (auto uses article setting) |
+| `borderStyle` | 'none' \| 'line' \| 'dashed' | 'none' | Card border style |
+| `borderColor` | string | '#e5e7eb' | Border color (CSS value) |
+| `cardBackground` | string | 'none' | Card background ('none' = transparent) |
+| `itemsBackground` | string | '#f3f4f6' | Background for list/quote section |
+| `ctaText` | string | 'Read full story' | Call-to-action text |
+| `showAuthor` | boolean | false | Show author name |
+| `showReadingTime` | boolean | false | Show reading time |
+| `linkPattern` | string | '/articles/{slug}' | URL pattern for link |
+
 ## API Client
 
 ### ContentGrowthClient

package/dist/astro/FeaturedCard.astro

@@ -0,0 +1,191 @@
+---
+import { marked } from 'marked';
+import { ContentGrowthClient } from '../core/client';
+import type { FeaturedContentProps } from '../types';
+
+interface FeaturedCardProps extends Omit<FeaturedContentProps, 'showBackButton' | 'backUrl'> {
+  /**
+   * URL pattern for the article link
+   * Supports placeholders: {uuid}, {slug}, {category}
+   * @default '/articles/{slug}'
+   */
+  linkPattern?: string;
+  
+  /**
+   * Show reading time
+   * @default false
+   */
+  showReadingTime?: boolean;
+
+  /**
+   * Show author
+   * @default false
+   */
+  showAuthor?: boolean;
+
+  /**
+   * Text for the Call to Action link
+   * @default "Read full story"
+   */
+  ctaText?: string;
+
+  /**
+   * Layout override (defaults to article settings)
+   */
+  layout?: 'vertical' | 'horizontal';
+
+  /**
+   * Border style
+   * @default 'none'
+   */
+  borderStyle?: 'none' | 'line' | 'dashed';
+
+  /**
+   * Border color (CSS color value)
+   * @default '#e5e7eb'
+   */
+  borderColor?: string;
+
+  /**
+   * Card background color (CSS color value, 'none' for transparent)
+   * @default 'none'
+   */
+  cardBackground?: string;
+
+  /**
+   * Background color for list/quote section (the items area)
+   * @default '#f3f4f6'
+   */
+  itemsBackground?: string;
+}
+
+type Props = FeaturedCardProps & { class?: string };
+
+const {
+  apiKey,
+  baseUrl,
+  tags = [],
+  category,
+  excludeTags = [],
+  showCategory = true,
+  showReadingTime = false,
+  showAuthor = false,
+  ctaText: propCtaText,
+  linkPattern = '/articles/{slug}',
+  layout: propLayout,
+  borderStyle = 'none',
+  borderColor = '#e5e7eb',
+  cardBackground = 'none',
+  itemsBackground = '#f3f4f6',
+  class: className = ''
+} = Astro.props;
+
+// Fetch featured article
+const client = new ContentGrowthClient({ apiKey, baseUrl });
+let article = null;
+let error = null;
+
+try {
+  article = await client.getFeaturedArticle({
+    tags,
+    category,
+    excludeTags
+  });
+} catch (e) {
+  // If 404, article remains null
+  console.error('Failed to fetch featured article:', e);
+  error = e instanceof Error ? e.message : 'Failed to load featured article';
+}
+
+// Generate article URL
+const getArticleUrl = (article: any) => {
+  if (!article) return '#';
+  return linkPattern
+    .replace('{uuid}', article.uuid || '')
+    .replace('{slug}', article.slug || article.uuid || '')
+    .replace('{category}', article.category || 'uncategorized');
+};
+
+// Render featured summary (or fallback to regular summary) as HTML
+const getSummaryHtml = (article: any) => {
+  const summaryText = article.featuredSummary || article.summary;
+  if (!summaryText) return '';
+  return marked.parse(summaryText, { async: false }) as string;
+};
+
+const layout = propLayout || article?.featuredSummaryLayout || 'standard';
+const layoutClass = layout !== 'standard' ? `cg-layout-${layout}` : '';
+const borderClass = borderStyle !== 'none' ? `cg-border-${borderStyle}` : '';
+
+// Use ctaText from prop, or from article data, or fallback to default
+const ctaText = propCtaText || article?.featuredCtaText || 'Read full story';
+
+// Custom CSS properties for styling
+const customStyles = [
+  borderColor !== '#e5e7eb' ? `--cg-card-border-color: ${borderColor}` : '',
+  cardBackground !== 'none' ? `--cg-card-bg: ${cardBackground}` : '',
+  itemsBackground !== '#f3f4f6' ? `--cg-items-bg: ${itemsBackground}` : '',
+].filter(Boolean).join('; ');
+---
+
+{article ? (
+  <a 
+    href={getArticleUrl(article)} 
+    class={`cg-widget cg-featured-card ${className} ${layoutClass} ${borderClass}`}
+    style={customStyles || undefined}
+    data-cg-widget="featured-card"
+  >
+    <article class="cg-featured-card-inner">
+      {/* Header with category badge */}
+      {showCategory && article.category && (
+        <div class="cg-featured-card-category">
+          <span class="cg-category-badge">{article.category}</span>
+        </div>
+      )}
+      
+      {/* Title */}
+      <h3 class="cg-featured-card-title">{article.title}</h3>
+      
+      {/* Featured Summary */}
+      {(article.featuredSummary || article.summary) && (
+        <div 
+          class="cg-featured-card-summary"
+          set:html={getSummaryHtml(article)}
+        />
+      )}
+      
+      {/* Footer with meta info */}
+      {(showAuthor || showReadingTime) && (
+        <div class="cg-featured-card-footer">
+          {showAuthor && <span class="cg-featured-card-author">{article.authorName}</span>}
+          
+          {showAuthor && showReadingTime && (
+            <span class="cg-featured-card-separator">•</span>
+          )}
+          
+          {showReadingTime && (
+            <span class="cg-featured-card-reading-time">
+              {Math.ceil(article.wordCount / 200)} min read
+            </span>
+          )}
+        </div>
+      )}
+      
+      {/* Read more indicator */}
+      <div class="cg-featured-card-cta">
+        <span>{ctaText}</span>
+        <svg class="cg-featured-card-arrow" fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </div>
+    </article>
+  </a>
+) : (
+  error ? (
+    <div class={`cg-widget cg-error ${className}`}>
+      {error}
+    </div>
+  ) : null
+)}
+
+

package/dist/react/FeaturedCard.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { FeaturedContentProps } from '../types';
+interface FeaturedCardProps extends Omit<FeaturedContentProps, 'showBackButton' | 'backUrl' | 'showAiSummary' | 'showTags'> {
+    /**
+     * URL pattern for the article link
+     * Supports placeholders: {uuid}, {slug}, {category}
+     * @default '/articles/{slug}'
+     */
+    linkPattern?: string;
+    /**
+     * Show reading time
+     * @default false
+     */
+    showReadingTime?: boolean;
+    /**
+     * Show author
+     * @default false
+     */
+    showAuthor?: boolean;
+    /**
+     * Text for the Call to Action link
+     * @default "Read full story"
+     */
+    ctaText?: string;
+    /**
+     * Link target attribute
+     * @default undefined (same tab)
+     */
+    linkTarget?: string;
+    /**
+     * Layout override
+     */
+    layout?: 'vertical' | 'horizontal';
+    /**
+     * Border style
+     * @default 'none'
+     */
+    borderStyle?: 'none' | 'line' | 'dashed';
+    /**
+     * Border color (CSS color value)
+     * @default '#e5e7eb'
+     */
+    borderColor?: string;
+    /**
+     * Card background color (CSS color value, 'none' for transparent)
+     * @default 'none'
+     */
+    cardBackground?: string;
+    /**
+     * Background color for list/quote section (the items area)
+     * @default '#f3f4f6'
+     */
+    itemsBackground?: string;
+}
+export declare const FeaturedCard: React.FC<FeaturedCardProps>;
+export {};
+//# sourceMappingURL=FeaturedCard.d.ts.map

package/dist/react/FeaturedCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeaturedCard.d.ts","sourceRoot":"","sources":["../../src/react/FeaturedCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,oBAAoB,EAAsB,MAAM,UAAU,CAAC;AAEzE,UAAU,iBAAkB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,gBAAgB,GAAG,SAAS,GAAG,eAAe,GAAG,UAAU,CAAC;IACvH;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAEnC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEzC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8IpD,CAAC"}

package/dist/react/FeaturedCard.js

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import { marked } from 'marked';
+import { ContentGrowthClient } from '../core/client';
+export const FeaturedCard = ({ apiKey, baseUrl, tags = [], category, excludeTags = [], showCategory = true, showReadingTime = false, showAuthor = false, ctaText: propCtaText, linkPattern = '/articles/{slug}', linkTarget, layout: propLayout, borderStyle = 'none', borderColor = '#e5e7eb', cardBackground = 'none', itemsBackground = '#f3f4f6', className = '' }) => {
+    const [article, setArticle] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        const fetchArticle = async () => {
+            setLoading(true);
+            try {
+                const client = new ContentGrowthClient({ apiKey, baseUrl });
+                const fetchedArticle = await client.getFeaturedArticle({
+                    tags,
+                    category,
+                    excludeTags
+                });
+                setArticle(fetchedArticle);
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : 'Failed to load featured article');
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchArticle();
+    }, [apiKey, baseUrl, category, JSON.stringify(tags), JSON.stringify(excludeTags)]);
+    // Generate article URL
+    const getArticleUrl = (article) => {
+        return linkPattern
+            .replace('{uuid}', article.uuid || '')
+            .replace('{slug}', article.slug || article.uuid || '')
+            .replace('{category}', article.category || 'uncategorized');
+    };
+    // Render featured summary (or fallback to regular summary) as HTML
+    const getSummaryHtml = (article) => {
+        const summaryText = article.featuredSummary || article.summary;
+        if (!summaryText)
+            return '';
+        return marked.parse(summaryText, { async: false });
+    };
+    if (loading) {
+        return (React.createElement("div", { className: `cg-widget cg-loading ${className}` },
+            React.createElement("div", { className: "cg-spinner" })));
+    }
+    if (error || !article) {
+        return (React.createElement("div", { className: `cg-widget cg-error ${className}` }, error || 'No featured content found'));
+    }
+    const summaryHtml = getSummaryHtml(article);
+    // Explicitly use any to access dynamic properties until types are fully updated
+    const layout = propLayout || article.featuredSummaryLayout || 'standard';
+    const readingTime = Math.ceil(article.wordCount / 200);
+    const borderClass = borderStyle !== 'none' ? `cg-border-${borderStyle}` : '';
+    // Use ctaText from prop, or from article data, or fallback to default
+    const ctaText = propCtaText || article.featuredCtaText || 'Read full story';
+    const customStyles = {};
+    if (borderColor !== '#e5e7eb')
+        customStyles['--cg-card-border-color'] = borderColor;
+    if (cardBackground !== 'none')
+        customStyles['--cg-card-bg'] = cardBackground;
+    if (itemsBackground !== '#f3f4f6')
+        customStyles['--cg-items-bg'] = itemsBackground;
+    return (React.createElement("a", { href: getArticleUrl(article), className: `cg-widget cg-featured-card ${className} ${layout !== 'standard' ? `cg-layout-${layout}` : ''} ${borderClass}`, style: Object.keys(customStyles).length > 0 ? customStyles : undefined, "data-cg-widget": "featured-card", target: linkTarget, rel: linkTarget === '_blank' ? 'noopener noreferrer' : undefined },
+        React.createElement("article", { className: "cg-featured-card-inner" },
+            showCategory && article.category && (React.createElement("div", { className: "cg-featured-card-category" },
+                React.createElement("span", { className: "cg-category-badge" }, article.category))),
+            React.createElement("h3", { className: "cg-featured-card-title" }, article.title),
+            summaryHtml && (React.createElement("div", { className: "cg-featured-card-summary", dangerouslySetInnerHTML: { __html: summaryHtml } })),
+            (showAuthor || showReadingTime) && (React.createElement("div", { className: "cg-featured-card-footer" },
+                showAuthor && React.createElement("span", { className: "cg-featured-card-author" }, article.authorName),
+                showAuthor && showReadingTime && (React.createElement("span", { className: "cg-featured-card-separator" }, "\u2022")),
+                showReadingTime && (React.createElement("span", { className: "cg-featured-card-reading-time" },
+                    readingTime,
+                    " min read")))),
+            React.createElement("div", { className: "cg-featured-card-cta" },
+                React.createElement("span", null, ctaText),
+                React.createElement("svg", { className: "cg-featured-card-arrow", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", width: "16", height: "16" },
+                    React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9 5l7 7-7 7" }))))));
+};

package/dist/react/index.d.ts

@@ -4,6 +4,7 @@
 export { ContentList } from './ContentList.js';
 export { ContentViewer } from './ContentViewer.js';
 export { FeaturedContent } from './FeaturedContent.js';
+export { FeaturedCard } from './FeaturedCard.js';
 export * from './hooks.js';
 export type { ReactContentListProps } from './ContentList.js';
 export type { ReactContentViewerProps } from './ContentViewer.js';

package/dist/react/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAC9D,YAAY,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,cAAc,YAAY,CAAC;AAE3B,YAAY,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAC9D,YAAY,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/react/index.js

@@ -4,4 +4,5 @@
 export { ContentList } from './ContentList.js';
 export { ContentViewer } from './ContentViewer.js';
 export { FeaturedContent } from './FeaturedContent.js';
+export { FeaturedCard } from './FeaturedCard.js';
 export * from './hooks.js';

package/dist/styles.css

@@ -19,7 +19,7 @@
   --cg-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
   --cg-radius: 12px;
   --cg-transition: all 0.2s ease;
-  
+
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   font-size: 16px;
   line-height: 1.5;
@@ -166,7 +166,7 @@
     grid-template-columns: 1fr;
     grid-template-rows: auto auto;
   }
-  
+
   .cg-content-rows .cg-expand-btn {
     grid-column: 1;
     grid-row: 1;
@@ -635,7 +635,9 @@ a.cg-card {
 }
 
 @keyframes cg-spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .cg-loading p,
@@ -968,3 +970,262 @@ a.cg-card {
   color: var(--cg-text-secondary);
   font-size: 1.125rem;
 }
+
+/* ===== Featured Card Component ===== */
+.cg-featured-card {
+  /* Custom property defaults */
+  --cg-card-border-color: #e5e7eb;
+  --cg-card-bg: transparent;
+  --cg-items-bg: #f3f4f6;
+
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  border-radius: 12px;
+  background: var(--cg-card-bg);
+  border: none;
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+
+/* Border style variants */
+.cg-featured-card.cg-border-line {
+  border: 1px solid var(--cg-card-border-color);
+}
+
+.cg-featured-card.cg-border-dashed {
+  border: 2px dashed var(--cg-card-border-color);
+}
+
+.cg-featured-card:hover {
+  border-color: var(--cg-primary);
+}
+
+.cg-featured-card-inner {
+  padding: 2rem 2.5rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.cg-featured-card-category {
+  margin-bottom: 1.25rem;
+}
+
+.cg-category-badge {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  background: #eff6ff;
+  color: var(--cg-primary);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.cg-featured-card-title {
+  margin: 0 0 1rem;
+  font-size: 1.625rem;
+  font-weight: 800;
+  line-height: 1.25;
+  color: var(--cg-text);
+  letter-spacing: -0.02em;
+}
+
+.cg-featured-card-summary {
+  font-size: 1rem;
+  line-height: 1.7;
+  color: var(--cg-text-secondary);
+  margin-bottom: 1.5rem;
+  flex-grow: 1;
+}
+
+.cg-featured-card-summary p {
+  margin: 0 0 1rem;
+}
+
+.cg-featured-card-summary p:last-child {
+  margin: 0;
+}
+
+.cg-featured-card-summary strong,
+.cg-featured-card-summary b {
+  font-weight: 700;
+  color: var(--cg-text);
+}
+
+.cg-featured-card-footer {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--cg-text-secondary);
+  margin-bottom: 1rem;
+}
+
+.cg-featured-card-separator {
+  margin: 0 0.5rem;
+  opacity: 0.4;
+}
+
+/* CTA: Simple text link style */
+.cg-featured-card-cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--cg-primary);
+  text-decoration: none;
+  transition: all 0.2s ease;
+  align-self: flex-start;
+}
+
+.cg-featured-card:hover .cg-featured-card-cta {
+  gap: 0.625rem;
+  text-decoration: underline;
+}
+
+.cg-featured-card-arrow {
+  transition: transform 0.2s ease;
+}
+
+.cg-featured-card:hover .cg-featured-card-arrow {
+  transform: translateX(3px);
+}
+
+/* ===== Featured Summary Template Styles ===== */
+
+/* Intro paragraph styling */
+.cg-featured-card-summary>p:first-child {
+  font-size: 1rem;
+  line-height: 1.7;
+}
+
+/* List & Steps Template - Styled like reference */
+.cg-featured-card-summary ul,
+.cg-featured-card-summary ol {
+  margin: 0;
+  padding: 1.25rem 1.5rem;
+  padding-left: 1.5rem;
+  list-style: none;
+  background: var(--cg-items-bg);
+  border-radius: 8px;
+}
+
+.cg-featured-card-summary li {
+  margin-bottom: 1.25rem;
+  padding-left: 2.5rem;
+  line-height: 1.5;
+  position: relative;
+}
+
+.cg-featured-card-summary li:last-child {
+  margin-bottom: 0;
+}
+
+/* Unordered list: simple bullets */
+.cg-featured-card-summary ul li::before {
+  content: '';
+  position: absolute;
+  left: 0.5rem;
+  top: 0.5rem;
+  width: 6px;
+  height: 6px;
+  background: var(--cg-primary);
+  border-radius: 50%;
+}
+
+/* Ordered list: numbered circles like reference */
+.cg-featured-card-summary ol {
+  counter-reset: item;
+}
+
+.cg-featured-card-summary ol li::before {
+  content: counter(item);
+  counter-increment: item;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  background: var(--cg-primary);
+  color: white;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* List item content: bold title + description on next line */
+.cg-featured-card-summary li strong {
+  display: block;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--cg-text);
+  margin-bottom: 0.125rem;
+}
+
+/* Quote Template */
+.cg-featured-card-summary blockquote {
+  margin: 0;
+  padding: 1rem 1.25rem;
+  border-left: 3px solid var(--cg-primary);
+  background: var(--cg-bg-secondary);
+  border-radius: 0 8px 8px 0;
+  font-style: italic;
+  font-size: 1rem;
+  color: var(--cg-text);
+}
+
+/* ===== Horizontal Layout ===== */
+/* Horizontal layout: intro paragraph on left, list/remaining content on right */
+
+@media (min-width: 768px) {
+  .cg-layout-horizontal .cg-featured-card-inner {
+    padding: 2.5rem 3rem;
+  }
+
+  .cg-layout-horizontal .cg-featured-card-title {
+    font-size: 1.875rem;
+  }
+
+  /* Only the summary content gets the horizontal grid */
+  .cg-layout-horizontal .cg-featured-card-summary {
+    display: grid;
+    grid-template-columns: 1fr 1.25fr;
+    gap: 2.5rem;
+    align-items: stretch;
+    /* Changed from start to stretch for balance */
+  }
+
+  /* First paragraph (intro) stays on left - improved styling */
+  .cg-layout-horizontal .cg-featured-card-summary>p:first-child {
+    grid-column: 1;
+    grid-row: 1;
+    margin: 0;
+    font-size: 1.0625rem;
+    line-height: 1.8;
+    color: var(--cg-text-secondary);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /* Vertically center the text */
+  }
+
+  /* List/quote goes on right */
+  .cg-layout-horizontal .cg-featured-card-summary ul,
+  .cg-layout-horizontal .cg-featured-card-summary ol,
+  .cg-layout-horizontal .cg-featured-card-summary blockquote {
+    grid-column: 2;
+    grid-row: 1;
+    margin: 0;
+  }
+
+  /* If no list, additional paragraphs go on right */
+  .cg-layout-horizontal .cg-featured-card-summary>p:not(:first-child) {
+    grid-column: 2;
+    margin: 0 0 0.75rem;
+  }
+}

package/dist/types/index.d.ts

@@ -12,6 +12,7 @@ export interface Article {
     authorName: string;
     publishedAt: number;
     summary: string | null;
+    featuredSummary: string | null;
     tags: string[];
     wordCount: number;
 }