nuxt-x-marketing
BlogCard
Single blog post preview card with cover image, category badge, date, reading time, excerpt, author, and optional CTA button.
BlogCard
A single post preview card. Links to /blog/[slug] automatically. Shows cover image, category badge, formatted date, reading time, excerpt, and author avatar.
Components
<XMarkBlogCard />
A single post preview. Links to /blog/[slug] automatically. Shows cover image, category badge, formatted date, reading time, excerpt, and author avatar.
<XMarkBlogCard
:post="{
title: 'Getting Started with Nuxt 4',
slug: 'getting-started-nuxt-4',
description: 'A practical walkthrough of the new Nuxt 4 directory structure.',
date: '2025-03-01',
readingTime: 5,
category: 'Tutorials',
img: { src: '/blog/nuxt4.jpg' },
author: { name: 'Jane Doe', avatar: '/avatars/jane.jpg' },
}"
:has-category="true"
:has-author="true"
:has-excerpt="true"
:button="{ label: 'Read More' }"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
post | Object | Example post | Post object { title, slug, img?, description?, date?, readingTime?, category?, author?, tags? } |
hasCategory | Boolean | true | Show category badge |
hasAuthor | Boolean | true | Show author avatar and name |
hasExcerpt | Boolean | true | Show post description |
button | Object | null | Full-width CTA button { label, color?, variant?, icon? } |
AI Context
category: Blog
package: "@xenterprises/nuxt-x-marketing"
components:
- XMarkBlogCard
use-when: >
Rendering a single blog post preview tile. Typically composed inside
XMarkBlogList, but can also be used standalone in featured post sections.
typical-page-section: /blog index page grid, featured posts section on homepage.