Vibes logo

Blog Post Card

Blog Post Card is used to display a blog post in a card preview.

  • Full keyboard navigation
  • Hover animation
  • When no image is provided, the card will display a typographic background with the title.

Installation

Run the following command

npx vibes@latest add blog-post-card

Usage

import { BlogPostCard } from '@/vibes/soul/primitives/blog-post-card';function Usage() {  return (    <BlogPostCard      title: 'Vestibulum eleifend placerat ligula and even more text for a long title'      author="Ryan Smith"      content="'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget velit hendrerit erat imperdiet tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is some more text to test out here."      date="2022-01-01"      href="#"      image: {{        src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo1YzIwNTljMi04NzcwLTRiM2ItYmIzMy02ZTk0ODNkY2M5MDk=/mini-bar-bag.jpeg',        alt: 'Vestibulum eleifend placerat ligula',      }},      href="/blog/how-to-create-a-blog-post-card"    />  );}

API Reference

BlogPostCardProps

PropTypeDefault
className
string
title*
string
author
string | null
content*
string
date*
string
image
{ src: string; alt: string; } | null
href*
string

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --blog-post-card-focus: var(--primary);  --blog-post-card-image-background: var(--contrast-100);  --blog-post-card-empty-text: color-mix(in oklab, var(--foreground) 15%, transparent);  --blog-post-card-title-text: var(--foreground);  --blog-post-card-content-text: var(--contrast-400);  --blog-post-card-author-date-text: var(--foreground);  --blog-post-card-font-family: var(--font-family-body);  --blog-post-card-summary-text: var(--contrast-400);}