keystone-design-bootstrap 1.0.3

package/src/design_system/sections/blog-cards.tsx

@@ -0,0 +1,848 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { ArrowUpRight } from "@untitledui/icons";
+import { Avatar, BadgeGroup, Badge, Button, PhotoWithFallback } from '../elements';
+import { cx } from '../../utils/cx';
+import { getAvatarUrl } from '../../utils/photo-helpers';
+import type { BlogPost } from '../../types/api/blog-post';
+
+// Helper to get first author from blog post
+const getFirstAuthor = (post: BlogPost) => {
+    return Array.isArray(post.blog_post_authors) && post.blog_post_authors.length > 0 
+        ? post.blog_post_authors[0] 
+        : null;
+};
+
+// Helper to format published date
+const formatPublishedDate = (publishedAt?: string) => {
+    return publishedAt 
+        ? new Date(publishedAt).toLocaleDateString('en-US', { day: 'numeric', month: 'short', year: 'numeric' })
+        : 'Recent';
+};
+
+// Helper to clean excerpt markdown
+const cleanExcerpt = (excerpt?: string) => {
+    return excerpt?.replace(/[#*\[\]()]/g, '').trim() || '';
+};
+
+// Helper to get first tag from blog post
+const getFirstTag = (post: BlogPost) => {
+    return Array.isArray(post.blog_post_tags) && post.blog_post_tags.length > 0 
+        ? post.blog_post_tags[0] 
+        : null;
+};
+
+// Helper to extract all blog post data for rendering
+const getBlogPostData = (article: BlogPost) => {
+    const author = getFirstAuthor(article);
+    const authorName = author?.name || 'Author';
+    const authorHref = author?.slug ? `/blog/author/${author.slug}` : '/blog';
+    const authorAvatarUrl = getAvatarUrl(author?.photo_attachments, author?.id, authorName);
+    const tag = getFirstTag(article);
+    const tagName = tag?.name || 'Blog';
+    const tagHref = tag?.slug ? `/blog/tag/${tag.slug}` : '/blog';
+    const href = `/blog/${article.slug}`;
+    const title = article.title || 'Untitled Post';
+    const publishedAt = formatPublishedDate(article.published_at);
+    const summary = cleanExcerpt(article.excerpt_markdown);
+    
+    return {
+        author,
+        authorName,
+        authorHref,
+        authorAvatarUrl,
+        tag,
+        tagName,
+        tagHref,
+        href,
+        title,
+        publishedAt,
+        summary,
+    };
+};
+
+export const BlogCardVertical = ({ article, imageClassName }: { article: BlogPost; imageClassName?: string }) => {
+    const { authorName, authorHref, authorAvatarUrl, href, title, summary, publishedAt } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col gap-4">
+            <a href={href} className="overflow-hidden rounded-2xl" tabIndex={-1}>
+                <PhotoWithFallback
+                    item={article}
+                    fallbackId={article.id}
+                    alt={title}
+                    className={cx("aspect-[1.5] w-full object-cover transition duration-100 ease-linear hover:scale-105", imageClassName)}
+                />
+            </a>
+
+            <div className="flex flex-col gap-5">
+                <div className="flex flex-col gap-2">
+                    <span className="text-sm font-semibold text-brand-secondary">Blog</span>
+                    <div className="flex flex-col gap-1">
+                        <a
+                            href={href}
+                            className="group/title flex justify-between gap-x-4 rounded-md text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                            {title}
+                            <ArrowUpRight
+                                className="mt-0.5 size-6 shrink-0 text-fg-quaternary transition duration-100 ease-linear group-hover/title:text-fg-quaternary_hover"
+                                aria-hidden="true"
+                            />
+                        </a>
+
+                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
+                    </div>
+                </div>
+
+                <div className="flex gap-2">
+                    <a href={authorHref} tabIndex={-1} className="flex">
+                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
+                    </a>
+
+                    <div>
+                        <a
+                            href={authorHref}
+                            className="block rounded-xs text-sm font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                            {authorName}
+                        </a>
+                        <time className="block text-sm text-tertiary">{publishedAt}</time>
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export const BlogCardVerticalBadge = ({
+    article,
+    badgeTheme = "light",
+    imageClassName,
+}: {
+    article: BlogPost;
+    badgeTheme?: ComponentProps<typeof BadgeGroup>["theme"];
+    imageClassName?: string;
+}) => {
+    const { authorName, authorHref, authorAvatarUrl, href, title, summary, publishedAt } = getBlogPostData(article);
+    
+    return (
+    <article className="flex flex-col gap-4">
+        <a href={href} className="overflow-hidden rounded-xl" tabIndex={-1}>
+            <PhotoWithFallback
+                item={article}
+                fallbackId={article.id}
+                alt={title}
+                className={cx("aspect-[1.5] w-full object-cover", imageClassName)}
+            />
+        </a>
+
+        <div className="flex flex-col gap-5">
+            <div className="flex flex-col items-start gap-3">
+                <BadgeGroup addonText="Blog" size="md" theme={badgeTheme} color="brand" className="pr-3" iconTrailing={null}>
+                    5 min read
+                </BadgeGroup>
+                <div className="flex flex-col gap-1">
+                    <a
+                        href={href}
+                        className="flex justify-between gap-x-4 rounded-md text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                    >
+                        {title}
+                        <ArrowUpRight className="mt-0.5 size-6 shrink-0 text-fg-quaternary" aria-hidden="true" />
+                    </a>
+                    <p className="line-clamp-2 text-md text-tertiary md:line-clamp-none">{summary}</p>
+                </div>
+            </div>
+
+            <div className="flex gap-2">
+                <a href={authorHref} tabIndex={-1} className="flex">
+                    <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
+                </a>
+
+                <div>
+                    <a
+                        href={authorHref}
+                        className="block rounded-xs text-sm font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                    >
+                        {authorName}
+                    </a>
+                    <time className="block text-sm text-tertiary">{publishedAt}</time>
+                </div>
+            </div>
+        </div>
+    </article>
+    );
+};
+
+export const BlogCardVerticalCompact = ({
+    article,
+    imageClassName,
+    titleClassName,
+    className,
+}: {
+    article: BlogPost;
+    imageClassName?: string;
+    titleClassName?: string;
+    className?: string;
+}) => {
+    const { authorName, href, title, summary, publishedAt } = getBlogPostData(article);
+    
+    return (
+    <article className={cx("flex flex-col gap-4", className)}>
+        <a href={href} className="overflow-hidden rounded-2xl" tabIndex={-1}>
+            <PhotoWithFallback
+                item={article}
+                fallbackId={article.id}
+                alt={title}
+                className={cx("aspect-[1.5] w-full object-cover", imageClassName)}
+            />
+        </a>
+
+        <div className="flex flex-col gap-6">
+            <div className="flex flex-col items-start gap-2">
+                <p className="text-sm font-semibold text-brand-secondary">
+                    {authorName} • <time>{publishedAt}</time>
+                </p>
+                <div className="flex w-full flex-col gap-1">
+                    <a
+                        href={href}
+                        className={cx(
+                            "flex justify-between gap-x-4 rounded-md text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2",
+                            titleClassName,
+                        )}
+                    >
+                        {title}
+                        <ArrowUpRight className="mt-0.5 size-6 shrink-0 text-fg-quaternary" aria-hidden="true" />
+                    </a>
+                    <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
+                </div>
+            </div>
+        </div>
+    </article>
+    );
+};
+
+export const BlogCardVerticalMinimal = ({ article, imageClassName, className }: { article: BlogPost; imageClassName?: string; className?: string }) => {
+    const { authorName, authorHref, href, title, summary, publishedAt } = getBlogPostData(article);
+    
+    return (
+    <article className={cx("flex flex-col gap-4", className)}>
+        <div className="relative">
+            <a href={href} className="w-full" tabIndex={-1}>
+                <PhotoWithFallback
+                    item={article}
+                    fallbackId={article.id}
+                    alt={title}
+                    className={cx("aspect-[1.5] w-full object-cover", imageClassName)}
+                />
+            </a>
+            <div className="absolute inset-x-0 bottom-0 overflow-hidden bg-linear-to-b from-transparent to-black/40">
+                <div className="relative flex items-start justify-between bg-alpha-white/30 p-4 backdrop-blur-md before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-alpha-white/30 md:p-5">
+                    <div>
+                        <a
+                            href={authorHref}
+                            className="block rounded-xs text-sm font-semibold text-white outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                            {authorName}
+                        </a>
+                        <time className="block text-sm text-white">{publishedAt}</time>
+                    </div>
+                    <a
+                        href={href}
+                        className="rounded-xs text-sm font-semibold text-white outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                    >
+                        Blog
+                    </a>
+                </div>
+            </div>
+        </div>
+
+        <div className="flex flex-col items-start gap-5">
+            <div className="flex flex-col gap-1">
+                <a
+                    href={href}
+                    className="flex justify-between gap-x-4 rounded-md text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                >
+                    {title}
+                </a>
+                <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
+            </div>
+
+            <Button href={href} color="link-color" size="lg" iconTrailing={ArrowUpRight}>
+                Read post
+            </Button>
+        </div>
+    </article>
+    );
+};
+
+export const BlogCardHorizontal = ({ article, imageClassName }: { article: BlogPost; imageClassName?: string }) => {
+    const { authorName, authorHref, authorAvatarUrl, tagName, tagHref, href, title, publishedAt, summary } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col gap-4 xl:flex-row xl:items-start">
+            <a href={href} className="shrink-0 overflow-hidden rounded-2xl" tabIndex={-1}>
+                <PhotoWithFallback
+                    item={article}
+                    fallbackId={article.id}
+                    alt={title}
+                    className={cx("aspect-[1.5] w-full object-cover xl:w-80", imageClassName)}
+                />
+            </a>
+
+            <div className="flex flex-col gap-5">
+                <div className="flex flex-col gap-2">
+                    <span className="text-sm font-semibold text-brand-secondary">{tagName}</span>
+
+                    <div className="flex flex-col gap-1">
+                        <a
+                            href={href}
+                            className="flex justify-between gap-x-4 rounded-md text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                            {title}
+                        </a>
+
+                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
+                    </div>
+                </div>
+
+                <div className="flex gap-2">
+                    <a href={authorHref} tabIndex={-1} className="flex">
+                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
+                    </a>
+
+                    <div>
+                        <a
+                            href={authorHref}
+                            className="block rounded-xs text-sm font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                            {authorName}
+                        </a>
+                        <time className="block text-sm text-tertiary">{publishedAt}</time>
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export const BlogCardHorizontalBadge = ({ article }: { article: BlogPost }) => {
+    const { authorName, authorHref, authorAvatarUrl, tagName, href, title, publishedAt, summary } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col gap-5 lg:flex-row lg:items-start">
+            <a href={href} className="shrink-0 overflow-hidden" tabIndex={-1}>
+                <PhotoWithFallback
+                    item={article}
+                    fallbackId={article.id}
+                    alt={title}
+                    className="h-60 w-full object-cover lg:h-50 lg:w-91.5"
+                />
+            </a>
+
+            <div className="flex flex-col gap-6">
+                <div className="flex flex-col gap-2">
+                    <BadgeGroup addonText={tagName} size="md" theme="light" color="brand" className="pr-3" iconTrailing={null}>
+                        Blog
+                    </BadgeGroup>
+                    <div className="flex flex-col gap-2">
+                        <a
+                            href={href}
+                            className="rounded-xs text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                            {title}
+                        </a>
+
+                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
+                    </div>
+                </div>
+
+                <div className="flex gap-2">
+                    <a href={authorHref} tabIndex={-1} className="flex">
+                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
+                    </a>
+
+                    <div>
+                        <a
+                            href={authorHref}
+                            className="block rounded-xs text-sm font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                            {authorName}
+                        </a>
+                        <time className="block text-sm text-tertiary">{publishedAt}</time>
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export const BlogCardHorizontalCompact = ({ article, imageClassName }: { article: BlogPost; imageClassName?: string }) => {
+    const { authorName, authorHref, href, title, publishedAt, summary } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col gap-4 xl:flex-row xl:items-start">
+            <a href={href} className="shrink-0 overflow-hidden rounded-2xl" tabIndex={-1}>
+                <PhotoWithFallback
+                    item={article}
+                    fallbackId={article.id}
+                    alt={title}
+                    className={cx("aspect-[1.5] w-full object-cover xl:w-91.5", imageClassName)}
+                />
+            </a>
+
+            <div className="flex flex-col gap-6">
+                <div className="flex flex-col gap-2">
+                    <p className="text-sm font-semibold text-brand-secondary">
+                        <a href={authorHref} className="rounded-xs outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2">
+                            {authorName}
+                        </a>{" "}
+                        • <time>{publishedAt}</time>
+                    </p>
+                    <div className="flex flex-col gap-1">
+                        <a
+                            href={href}
+                            className="rounded-xs text-lg font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                            {title}
+                        </a>
+
+                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export const BlogCardHorizontalMinimal = ({ article }: { article: BlogPost }) => {
+    const { authorName, authorHref, tagName, tagHref, href, title, publishedAt, summary } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col gap-5 lg:flex-row lg:items-start">
+            <div className="relative shrink-0">
+                <a href={href} className="w-full" tabIndex={-1}>
+                    <PhotoWithFallback
+                        item={article}
+                        fallbackId={article.id}
+                        alt={title}
+                        className="h-60 w-full object-cover lg:h-50 lg:w-80"
+                    />
+                </a>
+                <div className="absolute inset-x-0 bottom-0 overflow-hidden bg-linear-to-b from-transparent to-black/40">
+                    <div className="relative flex items-start justify-between bg-alpha-white/30 p-4 backdrop-blur-md before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-alpha-white/30">
+                        <div>
+                            <a
+                                href={authorHref}
+                                className="block rounded-xs text-sm font-semibold text-white outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                            >
+                                {authorName}
+                            </a>
+                            <time className="block text-sm text-white">{publishedAt}</time>
+                        </div>
+                        <a
+                            href={tagHref}
+                            className="rounded-xs text-sm font-semibold text-white outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2"
+                        >
+                            {tagName}
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <div className="flex flex-col items-start gap-6">
+                <div className="flex flex-col gap-2">
+                    <a
+                        href={href}
+                        className="block rounded-xs text-xl font-semibold text-primary outline-focus-ring focus-visible:outline-2 focus-visible:outline-offset-2 md:text-lg"
+                    >
+                        {title}
+                    </a>
+                    <p className="line-clamp-2 text-md text-tertiary lg:line-clamp-3">{summary}</p>
+                </div>
+
+                <Button href={href} color="link-color" size="lg" iconTrailing={ArrowUpRight}>
+                    Read post
+                </Button>
+            </div>
+        </article>
+    );
+};
+
+export const BlogCardFullWidthVertical = ({ article }: { article: BlogPost }) => {
+    const { authorName, authorHref, authorAvatarUrl, tagName, tagHref, href, title, publishedAt, summary } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset">
+            <a href={href} tabIndex={-1}>
+                <PhotoWithFallback
+                    item={article}
+                    fallbackId={article.id}
+                    alt={title}
+                    className="h-50 w-full object-cover md:h-60"
+                />
+            </a>
+
+            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
+                <div className="flex flex-col gap-2">
+                    <Button color="link-color" href={tagHref}>
+                        {tagName}
+                    </Button>
+                    <div className="flex flex-col gap-2">
+                        <Button
+                            color="link-gray"
+                            href={href}
+                            className="flex justify-between gap-4 text-xl font-semibold text-primary hover:text-brand-secondary md:text-display-xs"
+                            iconTrailing={<ArrowUpRight className="size-6 shrink-0" aria-hidden="true" />}
+                        >
+                            {title}
+                        </Button>
+                        <p className="line-clamp-2 text-md text-tertiary md:line-clamp-3">{summary}</p>
+                    </div>
+                </div>
+
+                <div className="flex gap-2">
+                    <a href={authorHref} tabIndex={-1} className="flex">
+                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
+                    </a>
+
+                    <div>
+                        <p className="text-sm font-semibold">
+                            <Button color="link-color" href={authorHref} className="text-primary">
+                                {authorName}
+                            </Button>
+                        </p>
+                        <time className="block text-sm text-tertiary">{publishedAt}</time>
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export const BlogCardFullWidthVerticalAlt = ({ article }: { article: BlogPost }) => {
+    const { authorName, authorHref, authorAvatarUrl, tagName, tagHref, href, title, publishedAt, summary } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset">
+            <a href={href} tabIndex={-1}>
+                <PhotoWithFallback
+                    item={article}
+                    fallbackId={article.id}
+                    alt={title}
+                    className="h-60 w-full object-cover"
+                />
+            </a>
+
+            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
+                <div className="flex flex-col gap-4">
+                    <BadgeGroup addonText={tagName} size="md" theme="light" color="brand" className="pr-3" iconTrailing={null}>
+                        Blog
+                    </BadgeGroup>
+                    <div className="flex flex-col gap-2">
+                        <Button
+                            color="link-gray"
+                            href={href}
+                            className="flex justify-between gap-4 text-xl font-semibold text-primary hover:text-brand-secondary md:text-display-xs"
+                            iconTrailing={<ArrowUpRight className="size-6 shrink-0" aria-hidden="true" />}
+                        >
+                            {title}
+                        </Button>
+                        <p className="line-clamp-2 text-md text-tertiary md:line-clamp-3">{summary}</p>
+                    </div>
+                </div>
+
+                <div className="flex gap-2">
+                    <a href={authorHref} tabIndex={-1} className="flex">
+                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
+                    </a>
+
+                    <div>
+                        <p className="text-sm font-semibold">
+                            <Button color="link-color" href={authorHref} className="text-primary">
+                                {authorName}
+                            </Button>
+                        </p>
+                        <time className="block text-sm text-tertiary">{publishedAt}</time>
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export const BlogCardFullWidthVerticalCompact = ({ article }: { article: BlogPost }) => {
+    const { authorName, authorHref, href, title, publishedAt, summary } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset">
+            <a href={href} tabIndex={-1}>
+                <PhotoWithFallback
+                    item={article}
+                    fallbackId={article.id}
+                    alt={title}
+                    className="h-60 w-full object-cover"
+                />
+            </a>
+
+            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
+                <div className="flex flex-col gap-2">
+                    <p className="text-sm font-semibold text-brand-secondary">
+                        <Button href={authorHref} color="link-color">
+                            {authorName}
+                        </Button>{" "}
+                        • <time>{publishedAt}</time>
+                    </p>
+                    <div className="flex flex-col gap-2">
+                        <Button
+                            color="link-gray"
+                            href={href}
+                            className="flex justify-between gap-4 text-xl font-semibold text-primary hover:text-brand-secondary md:text-display-xs"
+                            iconTrailing={<ArrowUpRight className="size-6 shrink-0" aria-hidden="true" />}
+                        >
+                            {title}
+                        </Button>
+                        <p className="line-clamp-2 text-md text-tertiary md:line-clamp-3">{summary}</p>
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export const BlogCardFullWidthVerticalMinimal = ({ article }: { article: BlogPost }) => {
+    const { authorName, authorHref, tagName, tagHref, href, title, publishedAt, summary } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset">
+            <div className="relative shrink-0">
+                <a href={href} className="w-full" tabIndex={-1}>
+                    <PhotoWithFallback
+                        item={article}
+                        fallbackId={article.id}
+                        alt={title}
+                        className="h-60 w-full object-cover md:h-70"
+                    />
+                </a>
+                <div className="absolute inset-x-0 bottom-0 overflow-hidden bg-linear-to-b from-transparent to-black/40">
+                    <div className="relative flex items-start justify-between bg-alpha-white/30 p-4 backdrop-blur-md before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-alpha-white/30 md:p-6">
+                        <div>
+                            <p className="text-sm font-semibold">
+                                <Button href={authorHref} color="link-gray" className="text-white">
+                                    {authorName}
+                                </Button>
+                            </p>
+                            <time className="block text-sm text-white">{publishedAt}</time>
+                        </div>
+                        <p className="text-sm font-semibold">
+                            <Button href={tagHref} color="link-gray" className="text-white">
+                                {tagName}
+                            </Button>
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+        <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
+            <div className="flex flex-col gap-2">
+                <div className="flex flex-col gap-2">
+                    <Button
+                        color="link-gray"
+                        href={href}
+                        className="flex justify-between gap-4 text-xl font-semibold text-primary hover:text-brand-secondary md:text-display-xs"
+                        iconTrailing={<ArrowUpRight className="size-6 shrink-0" aria-hidden="true" />}
+                    >
+                        {title}
+                    </Button>
+                    <p className="line-clamp-2 text-md text-tertiary md:line-clamp-3">{summary}</p>
+                </div>
+            </div>
+
+            <Button href={href} color="link-color" size="lg" iconTrailing={ArrowUpRight}>
+                Read post
+            </Button>
+        </div>
+    </article>
+    );
+};
+
+export const BlogCardFullWidthHorizontal = ({ article }: { article: BlogPost }) => {
+    const { authorName, authorHref, authorAvatarUrl, tagName, tagHref, href, title, publishedAt, summary } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset md:flex-row md:items-start">
+            <a href={href} className="shrink-0" tabIndex={-1}>
+                <PhotoWithFallback
+                    item={article}
+                    fallbackId={article.id}
+                    alt={title}
+                    className="h-60 w-full object-cover md:h-60 md:w-80"
+                />
+            </a>
+
+            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
+                <div className="flex flex-col gap-2">
+                    <Button href={tagHref} color="link-color">
+                        {tagName}
+                    </Button>
+                    <div className="flex flex-col gap-2">
+                        <Button href={href} color="link-gray" size="xl" className="text-xl font-semibold text-primary md:text-lg">
+                            {title}
+                        </Button>
+
+                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
+                    </div>
+                </div>
+
+                <div className="flex gap-2">
+                    <a href={authorHref} tabIndex={-1} className="flex">
+                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
+                    </a>
+
+                    <div>
+                        <p className="text-sm font-semibold">
+                            <Button href={authorHref} color="link-gray" className="text-primary">
+                                {authorName}
+                            </Button>
+                        </p>
+                        <time className="block text-sm text-tertiary">{publishedAt}</time>
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export const BlogCardFullWidthHorizontalAlt = ({ article }: { article: BlogPost }) => {
+    const { authorName, authorHref, authorAvatarUrl, tagName, href, title, publishedAt, summary } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset md:flex-row md:items-start">
+            <a href={href} className="shrink-0" tabIndex={-1}>
+                <PhotoWithFallback
+                    item={article}
+                    fallbackId={article.id}
+                    alt={title}
+                    className="h-60 w-full object-cover md:h-60.5 md:w-80"
+                />
+            </a>
+
+            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
+                <div className="flex flex-col gap-4">
+                    <BadgeGroup addonText={tagName} size="md" theme="light" color="brand" className="pr-3" iconTrailing={null}>
+                        Blog
+                    </BadgeGroup>
+                    <div className="flex flex-col gap-2">
+                        <Button href={href} color="link-gray" size="xl" className="text-xl font-semibold text-primary md:text-lg">
+                            {title}
+                        </Button>
+
+                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
+                    </div>
+                </div>
+
+                <div className="flex gap-2">
+                    <a href={authorHref} tabIndex={-1} className="flex">
+                        <Avatar focusable alt={authorName} src={authorAvatarUrl} size="md" />
+                    </a>
+
+                    <div>
+                        <p className="text-sm font-semibold">
+                            <Button href={authorHref} color="link-gray" className="text-primary">
+                                {authorName}
+                            </Button>
+                        </p>
+                        <time className="block text-sm text-tertiary">{publishedAt}</time>
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export const BlogCardFullWidthHorizontalCompact = ({ article }: { article: BlogPost }) => {
+    const { authorName, authorHref, href, title, publishedAt, summary } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset md:flex-row md:items-start">
+            <a href={href} className="shrink-0" tabIndex={-1}>
+                <PhotoWithFallback
+                    item={article}
+                    fallbackId={article.id}
+                    alt={title}
+                    className="h-60 w-full object-cover md:h-60 md:w-80"
+                />
+            </a>
+
+            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
+                <div className="flex flex-col gap-2">
+                    <p className="text-sm font-semibold text-brand-secondary">
+                        <Button href={authorHref} color="link-color">
+                            {authorName}
+                        </Button>{" "}
+                        • <time>{publishedAt}</time>
+                    </p>
+                    <div className="flex flex-col gap-2">
+                        <Button href={href} color="link-gray" size="xl" className="text-xl font-semibold text-primary md:text-lg">
+                            {title}
+                        </Button>
+
+                        <p className="line-clamp-2 text-md text-tertiary">{summary}</p>
+                    </div>
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export const BlogCardFullWidthHorizontalMinimal = ({ article }: { article: BlogPost }) => {
+    const { authorName, authorHref, tagName, tagHref, href, title, publishedAt, summary } = getBlogPostData(article);
+    
+    return (
+        <article className="flex flex-col overflow-hidden rounded-2xl ring-1 ring-secondary ring-inset md:flex-row md:items-start">
+            <div className="relative shrink-0">
+                <a href={href} className="w-full" tabIndex={-1}>
+                    <PhotoWithFallback
+                        item={article}
+                        fallbackId={article.id}
+                        alt={title}
+                        className="h-60 w-full object-cover md:h-60 md:w-80"
+                    />
+                </a>
+                <div className="absolute inset-x-0 bottom-0 overflow-hidden bg-linear-to-b from-transparent to-black/40">
+                    <div className="relative flex items-start justify-between bg-alpha-white/30 p-4 backdrop-blur-md before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-alpha-white/30 md:p-6">
+                        <div>
+                            <p className="text-sm font-semibold">
+                                <Button href={authorHref} color="link-gray" className="text-white">
+                                    {authorName}
+                                </Button>
+                            </p>
+                            <time className="block text-sm text-white">{publishedAt}</time>
+                        </div>
+                        <p className="text-sm font-semibold">
+                            <Button href={tagHref} color="link-gray" className="text-white">
+                                {tagName}
+                            </Button>
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <div className="flex flex-col gap-6 p-5 pb-6 md:p-6">
+                <div className="flex flex-col gap-2">
+                    <div className="flex flex-col gap-2">
+                        <Button href={href} color="link-gray" size="xl" className="text-xl font-semibold text-primary md:text-lg">
+                            {title}
+                        </Button>
+
+                        <p className="line-clamp-2 text-md text-tertiary md:line-clamp-3">{summary}</p>
+                    </div>
+                </div>
+
+                <Button href={href} color="link-color" size="lg" iconTrailing={ArrowUpRight}>
+                    Read post
+                </Button>
+            </div>
+        </article>
+    );
+};