Use the Header Card

This component is to be used in the body of a blog post. It displays information about the post, based on what is provided in the frontmatter.

To see this in action, select any of the posts in the Demo Blog.

The entire sample file for March can be found here:

View Code

---
aside: false

# Core Content Fields
title: "April"
subtitle: "Spring Cleaning and Fresh Air"
summary: "April brings the irresistible urge to throw open windows, clear out clutter, and breathe new life into our living spaces. Discover the therapeutic joy of spring cleaning and the energy that comes with fresh beginnings."

# Publication Fields
date: 2025-04-10
author: maya
status: published
featured: false

# Organization Fields
category: Spring
tags:
  - Spring Cleaning
  - Fresh Air
  - Organization
  - Renewal
  - Energy

# Featured Image
featured_image:
  image: "/demo-blog/april-light.jpg"
  image_dark: "/demo-blog/april-dark.jpg"
  alt: "A branch with cherry blossoms"
  alt_dark: "A path at night with cherry blossoms"
  description: "A branch with cherry blossoms - Credits to Redd Francisco on Unsplash"
  description_dark: "A path at night with cherry blossoms - Credits to ayumi kubo on Unsplash"

# Content Options
reading_time: 5

# Built in Social Media Sharing Fields
head:
  - - meta
    - property: og:type
      content: blog
  - - meta
    - property: og:locale
      content: en_CA
  - - meta
    - property: og:title
      content: April - Spring Cleaning and Fresh Air
  - - meta
    - property: og:url
      content: https://vitepress-valence.cynber.dev/demo-blog/april
  - - meta
    - property: og:description
      content: April brings the irresistible urge to spring clean and breathe new life into our spaces.
  - - meta
    - property: og:image
      content: https://vitepress-valence.cynber.dev/demo-blog/april-dark.jpg
  - - meta
    - property: article:section
      content: Seasonal
---

<VpvArticleHeader 
    returnLink="/blog-demo"
    returnText="Back to Seasonal Blog"
/>

April arrives with an energy that's impossible to ignore. The urge to throw open every window in the house becomes overwhelming as warm breezes carry the scent of blooming flowers and fresh possibilities. Winter's staleness must go, replaced by the crisp vitality of spring air flowing through every room.

This is the month when spring cleaning transforms from chore to ritual. There's something deeply satisfying about clearing out the accumulated debris of winter months – sorting through closets, washing windows until they sparkle, and reorganizing spaces that have grown cluttered during the indoor months.

Each room becomes a canvas for renewal. Furniture gets rearranged to welcome more light, heavy curtains are replaced with lighter fabrics, and surfaces are cleared to create breathing room. The physical act of cleaning becomes a metaphor for mental clarity, each swept corner and organized drawer creating space for new growth and fresh perspectives.

## Read other Spring articles

<VpvArticleList
    format="vertical"
    sortOrder="ascending"
    filterCategories="Spring"
    maxCards="2"
    :excludeURLs="[
        '/demo-blog/april'
    ]"
    articlesDataKey="demoBlogData"
  />

Article Setup

If you haven't done so already, please see the Article Setup page for instructions on how to perform the initial setup.

Before you use this component, you will need to create a new post and add the appropriate frontmatter.

Usage

You can simply add <VpvArticleHeader /> to the body of your blog post.

If you something doesn't look right, check your frontmatter! You can compare it with the example above.

Optional Functionality

returnLink & returnText

These props allow you to specify the URL and text to display on the 'Back' button.

• default returnLink is /
• default returnText is Back Home

dateFormat

This prop allows you to specify the format of the date. It defaults to long.

You can set it to the following values:

• dateFormat="long" (default, example: "October 30, 2025")
• dateFormat="short" (example: "Oct 30, 2025")
• dateFormat="iso" (example: "2025-10-30")
• A custom format string, such as :dateFormat="'yyyy-MM-dd HH:mm'" (example: "2025-10-30 17:00")

Banner Image Customizations

These props allow you to customize the banner image.

• featImageWidth: The width of the image, in pixels. (default: 100%)
• featImageHeight: The height of the image, in pixels. (default: auto)
• featImageAspectRatio: The aspect ratio of the image. (default: 16/9)
• featImageMaxWidth: The maximum width of the image, in pixels. (default: 800px)
• enableFeatImageZoom: Whether to enable zooming on the image. (default: false)

hide* Props

These props allow you to hide certain elements from the header card, while still keeping the information available in the frontmatter for other components.

• default hideTitle is false
• default hideSubtitle is false
• default hideDate is false
• default hideReadingTime is false
• default hideAuthor is false
• default hideCategory is false
• default hideTags is false
• default hideFeatImage is false
• default hideFeatImageDescription is false

authorsDataKey

If you overrided the default export keys, you can use the following prop to select the correct data. Note that most users will not need to use this prop:

• authorsDataKey: The key of the authors data to use. (ex. demoAuthors)