Cards
The same cards that are used in the BlogPostList can be used elsewhere in your site. There are a few additional options available when you use the components directly.
Likewise, since the cards are being used directly, there are no filtering or sorting options available.
Do initial installation first
Before you follow any of the guides below, you should import and install this project in your VitePress site.
Demo
Horizontal Cards
View code
vue
<HorizontalContainer>
<HorizontalCard
title="Sample Title: This is the first card"
excerpt="This is a sample excerpt for the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Netus efficitur taciti mauris cras, sollicitudin vitae auctor. Molestie tellus augue tristique lobortis urna viverra sodales tempor. Sociosqu mauris leo efficitur maecenas venenatis donec dictum. Velit aptent nulla sapien"
author="John Smith"
image="https://picsum.photos/800/1200"
category="Demo"
url="https://example.com/first-card"
:hideAuthor="false"
:hideDate="false"
:hideImage="false"
:hideCategory="false"
:disableLinks="false"
:isExternal="true"
titleLines="1"
excerptLines="2"
/>
<HorizontalCard
title="Sample Title: This is the second card"
excerpt="This is another sample excerpt for the card. But this card is shorter."
image="https://picsum.photos/900/1200"
:hideCategory="true"
:hideAuthor="true"
/>
<HorizontalCard
title="Sample Title: This is the third card"
excerpt="This is a sample excerpt for the third card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Netus efficitur taciti mauris cras, sollicitudin vitae auctor. Molestie tellus augue tristique lobortis urna viverra sodales tempor. Sociosqu mauris leo efficitur maecenas venenatis donec dictum. Velit aptent nulla sapien"
author="John Smith"
image="https://picsum.photos/700/1200"
url="https://example.com/third-card"
:hideCategory="true"
/>
</HorizontalContainer>Vertical Cards
View code
vue
<VerticalContainer>
<VerticalCard
title="Sample Title: This is the first card"
excerpt="This is a sample excerpt for the card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Netus efficitur taciti mauris cras, sollicitudin vitae auctor. Molestie tellus augue tristique lobortis urna viverra sodales tempor. Sociosqu mauris leo efficitur maecenas venenatis donec dictum. Velit aptent nulla sapien"
author="John Smith"
image="https://picsum.photos/800/1200"
category="Demo"
url="https://example.com/first-card"
:hideAuthor="false"
:hideDate="false"
:hideImage="false"
:hideCategory="false"
:disableLinks="false"
:isExternal="true"
titleLines="1"
excerptLines="2"
/>
<VerticalCard
title="Sample Title: This is the second card"
excerpt="This is another sample excerpt for the card. But this card is shorter."
image="https://picsum.photos/900/1200"
/>
<VerticalCard
title="Sample Title: This is the third card"
excerpt="This is a sample excerpt for the third card. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Netus efficitur taciti mauris cras, sollicitudin vitae auctor. Molestie tellus augue tristique lobortis urna viverra sodales tempor. Sociosqu mauris leo efficitur maecenas venenatis donec dictum. Velit aptent nulla sapien"
author="John Smith"
image="https://picsum.photos/700/1200"
category="Demo"
url="https://example.com/third-card"
/>
</VerticalContainer>Additional Options
isExternal: It will show additional formatting to indicate that the link will take you to an external site.hideDomain: It will hide the domain from the external link formatting (currently this doesn't change anything since no domain is shown).tags: An array of tags for the content (displayed as pills, like the category).hideTags: Hide the tags.
All Options
title: The title of the card.excerpt: A short excerpt of the content.author: The author of the content.date: The date the content was published.image: The URL of an image to display.category: The category of the content.tags: See above.url: The URL or relative path to link to.- The regular options are available, but some are redundant since you can simply not provide the information in the first place. In other cases, you can get rid of random artifacts by setting them to
false:hideAuthor,hideDate,hideImage,hideCategory,hideTagsdisableLinks: Disable the links on the cards, making them unclickable.
hideDomain: See above.isExternal: See above.titleLines: Limit the number of lines for the title.excerptLines: Limit the number of lines for the excerpt.