Image Card

About 638 wordsAbout 2 min

2025-10-08

Overview

Use the <ImageCard> component to display image cards on a page.

The Image Card differs from markdown's standard image insertion method by presenting more information related to the image, including title, description, author, link, etc. It is suitable for scenarios such as photography works, design works, promotional posters, and more.

Props

Name:imageRequiredType:string

The image URL. Local images must use an absolute path, i.e., a path starting with /, pointing to the /public directory.

Name:titleOptionalType:string

The image title.

Name:descriptionOptionalType:string

The image description.

Name:authorOptionalType:string

The image author.

Name:hrefOptionalType:string

The link to navigate to when the image title is clicked.

Name:dateOptionalType:string | Date | number

The image creation date.

Name:widthOptionalType:string | number

The image width.

Name:centerOptionalType:boolean

Whether to center the image when its width is less than the screen width.

Examples

Input:

<ImageCard
  image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
  title="Alfanzina Lighthouse, Algarve, Portugal"
  description="The lighthouse in today's photo is located at Cabo de São Vicente in the Algarve region of southern Portugal. The Alfanzina Lighthouse, built in 1919, shines over the sea, helping vessels navigate the treacherous waters around the area. This lighthouse is a famous tourist attraction and also a symbol of the region's deep connection with the ocean. If you're fortunate enough to live near the lighthouse, this weekend is the perfect time to visit."
  href="/"
  author="Andreas Kunz"
  date="2024/08/16"
/>

Output:

Alfanzina Lighthouse, Algarve, Portugal

Andreas Kunz | Aug 16, 2024

The lighthouse in today's photo is located at Cabo de São Vicente in the Algarve region of southern Portugal.The Alfanzina Lighthouse, built in 1919, shines over the sea, helping vessels navigate the treacherous waters around the area. This lighthouse is a famous tourist attraction and also a symbol of the region's deep connection with the ocean. If you're fortunate enough to live near the lighthouse, this weekend is the perfect time to visit.

It can also be placed within a <CardGrid> component.

Input:

<CardGrid>
  <ImageCard
    image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
    title="Alfanzina Lighthouse, Algarve, Portugal"
    description="..."
    href="/"
    author="Andreas Kunz"
    date="2024/08/16"
  />
  <ImageCard
    image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
    title="Alfanzina Lighthouse, Algarve, Portugal"
    description="..."
    href="/"
    author="Andreas Kunz"
    date="2024/08/16"
  />
</CardGrid>

Output:

1d04d-feat: add builtin auto-import-components (#932)on 9/9/26
16c2d-docs: update field containeron 6/8/26
97a5b-docs: fix typoon 3/8/26
38505-docs: update en docs (#708)on 10/9/25

Collection

markdown

code block

code repl

charts

resource embedded

Custom Homepage

Image Card

Overview

Props

Examples

Alfanzina Lighthouse, Algarve, Portugal

Alfanzina Lighthouse, Algarve, Portugal

Alfanzina Lighthouse, Algarve, Portugal

Contributors

Changelog