v4.5-pre
Powered by

Card

The Card component renders a linked preview for another page or URL. For local pages, Retype can build the card from page metadata. You can also override individual values directly on the Card.

[!card](/blog/2026-03-23-whats-new-in-retype-v440.md)

release
What's New in Retype v4.4

Retype v4.4 is another big release, including two new extensibility features that we have all wanted for a long time. The all new, custom icons deliver unlimited icon options for your project, and advanced include selectors let you share and reuse content and components across pages in powerful new ways.

2026-03-23

Syntax

Use the destination in parentheses for the link target. Add an optional layout shorthand or attribute list inside [!card ...].

[!card](path/to/page.md)
[!card vert](path/to/page.md)
[!card compact](path/to/page.md)
[!card signal](path/to/page.md)
[!card snap](path/to/page.md)
[!card layout="compact"](path/to/page.md)
[!card title="Custom title" text="Custom text"](https://retype.com/)

For local pages, Retype can automatically resolve:

  • title from the page title
  • text from the excerpt or description
  • image from the page image
  • kicker from categories or parent navigation labels
  • footer from date or created

If you override only one field, the remaining fields still fall back to page metadata when available.

The link target always comes from the destination in parentheses. There is no separate link Card attribute.

Use shorthand labels such as vert only when no other Card properties are set. If you combine a layout with custom properties, set it with the layout attribute, such as layout="vert", layout="vertical", layout="compact", layout="signal", or layout="snap".

Layouts

Cards support five layout modes: horizontal, vertical, compact, signal, and snap.

Horizontal (default)

The default layout shows the image beside the content and works well for a single prominent card.

[!card](/blog/2026-03-23-whats-new-in-retype-v440.md)

release
What's New in Retype v4.4

Retype v4.4 is another big release, including two new extensibility features that we have all wanted for a long time. The all new, custom icons deliver unlimited icon options for your project, and advanced include selectors let you share and reuse content and components across pages in powerful new ways.

2026-03-23

Vertical

Use vertical or vert for stacked cards with the image above the content. Consecutive vertical cards form a responsive group automatically.

[!card vert](/blog/2026-03-23-whats-new-in-retype-v440.md)
[!card layout="vertical"](/blog/2026-03-17-whats-new-in-retype-v430.md)

release
What's New in Retype v4.4

Retype v4.4 is another big release, including two new extensibility features that we have all wanted for a long time. The all new, custom icons deliver unlimited icon options for your project, and advanced include selectors let you share and reuse content and components across pages in powerful new ways.

2026-03-23
release
What's New in Retype v4.3

Retype v4.3 packs in notable new features and a solid round of enhancements. Header navigation now supports dropdown sub-menu support, backlinks gain fine-grained include and exclude controls, and date formatting is now fully configurable. See the full Changelog and Feature Log for a detailed list of updates in the v4.3 release.

2026-03-17

Compact

Use compact for a smaller card that flows inline with other compact cards. Compact cards do not render an image, kicker, or footer. When text is overridden, it is rendered as plain text, whereas the default and vert cards will render basic markdown syntax.

[!card compact](/guides/getting-started.md)
[!card layout="compact"](/guides/installation.md)
[!card title="Retype website" text="Visit retype.com." icon=":smile:" layout="compact"](https://retype.com/)

Getting Started

This guide will have you up and running generating your own Retype website in just a few minutes.
Installation

Retype is a command line tool. Installation is super quick and you can be up and running within seconds.
😄 Retype website

Visit retype.com.

Signal

Use signal for a compact navigation-style row. Signal auto-resolves title and text from local page metadata and renders a small icon beside the title.

[!card layout="signal" text="Install Retype in seconds using npm, yarn, or dotnet"](/guides/installation.md)
[!card layout="signal" title="Quick Start" text="Get your first Retype site running in minutes"](/guides/getting-started.md)
[!card layout="signal" title="CLI Reference" text="All commands, flags, and options for the Retype CLI"](/guides/cli.md)
[!card layout="signal" icon="gear" title="Configuration" text="Customize your site with the retype.yml project file"](/configuration/project.md)
[!card layout="signal" text="Enrich your content with tabs, callouts, cards, and more"](/components/components.md)
[!card layout="signal" icon="server" title="Hosting" text="Deploy your site to GitHub Pages, Netlify, Cloudflare, and more"](/hosting/github-pages.md)

Installation

Install Retype in seconds using npm, yarn, or dotnet
Quick Start

Get your first Retype site running in minutes
CLI Reference

All commands, flags, and options for the Retype CLI
Configuration

Customize your site with the retype.yml project file
Components

Enrich your content with tabs, callouts, cards, and more
Hosting

Deploy your site to GitHub Pages, Netlify, Cloudflare, and more

Signal also supports a kicker to add a custom click-thru label:

[!card layout="signal" kicker="Install"](/guides/installation.md)
[!card layout="signal" kicker="Release"](/blog/2026-03-17-whats-new-in-retype-v430.md)
[!card layout="signal" title="Retype website" text="Signal supports title, text, and kicker together." icon="rocket" kicker="Visit"](https://retype.com/)

Installation

Retype is a command line tool. Installation is super quick and you can be up and running within seconds.

Install
What's New in Retype v4.3

Retype v4.3 packs in notable new features and a solid round of enhancements. Header navigation now supports dropdown sub-menu support, backlinks gain fine-grained include and exclude controls, and date formatting is now fully configurable.

Release
Retype website

Signal supports title, text, and kicker together.

Visit

Signal supports title, text, kicker, and icon or image.

Snap

Use snap for a tile-style card with a prominent icon or image above a short title. Snap is well suited for app pickers, integration lists, and icon-based navigation. Consecutive snap cards automatically form a responsive row.

Only title and icon (or image) are rendered. The text, kicker, and footer properties are ignored.

[!card layout="snap" title="Notion" icon="https://cdn.simpleicons.org/notion/111111"](https://www.notion.so/)
[!card layout="snap" title="Evernote" icon="https://cdn.simpleicons.org/evernote/00A82D"](https://evernote.com/)
[!card layout="snap" title="Apple Notes" icon="https://cdn.simpleicons.org/apple/111111"](https://www.apple.com/macos/notes/)

Notion
Evernote
Apple Notes

For local pages, snap auto-resolves the icon from page metadata and falls back to the page image when no icon is set.

[!card layout="snap"](/guides/getting-started.md)
[!card layout="snap"](/blog/2026-03-17-whats-new-in-retype-v430.md)
[!card layout="snap" title="Remote snap card" icon="home"](https://retype.com/)

Getting Started
What's New in Retype v4.3
Remote snap card

Property overrides

You can override any combination of supported Card fields.

Property Description Notes
layout Sets the Card layout. vert / vertical, compact, signal, snap. Default is horizontal.
title Overrides the title. Works with all layouts.
text Overrides the description or excerpt. Horizontal and vertical render formatted text. Compact and signal render plain text. Snap ignores this property.
icon Overrides the icon. Compact, signal, and snap render the icon.
image Overrides the image. Used by horizontal, vertical, and snap. Signal and compact ignore it.
kicker Overrides the kicker above the title. Used by horizontal, vertical, and signal. Compact and snap ignore it.
footer Overrides the footer below the content. Used by horizontal and vertical. Compact, signal, and snap ignore it.

See the layout examples above for layout. The following samples focus on the content properties.

Title and text

Override one field and let the remaining values fall back to the target page.

[!card layout="vert" title="Start with v4.2"](/blog/2026-03-23-whats-new-in-retype-v440.md)
[!card layout="vert" text="Read the `v4.1` release summary."](/blog/2026-03-17-whats-new-in-retype-v430.md)

release
Start with v4.2

Retype v4.4 is another big release, including two new extensibility features that we have all wanted for a long time. The all new, custom icons deliver unlimited icon options for your project, and advanced include selectors let you share and reuse content and components across pages in powerful new ways.

2026-03-23
release
What's New in Retype v4.3

Read the v4.1 release summary.

2026-03-17

These properties let you replace the metadata-style parts of a horizontal or vertical card.

Guides
Blogging

Adding a blog to your Retype website is as quick as adding a new .md file to your project.
Release note
What's New in Retype v4.4

Retype v4.4 is another big release, including two new extensibility features that we have all wanted for a long time. The all new, custom icons deliver unlimited icon options for your project, and advanced include selectors let you share and reuse content and components across pages in powerful new ways.

2026-03-23
release
What's New in Retype v4.4

Retype v4.4 is another big release, including two new extensibility features that we have all wanted for a long time. The all new, custom icons deliver unlimited icon options for your project, and advanced include selectors let you share and reuse content and components across pages in powerful new ways.

Custom footer

Icon

The icon override is rendered by compact, signal, and snap cards.

[!card title="Retype website" text="Visit retype.com" icon="home" layout="compact"](https://retype.com/)
[!card icon=":rocket:" layout="compact"](/guides/getting-started.md)

Retype website

Visit retype.com
🚀 Getting Started

This guide will have you up and running generating your own Retype website in just a few minutes.

Automatic and manual versions of the same vertical card

The first card uses page metadata. The second manually configures the same values to provide a side-by-side comparison.

[!card vert](/blog/2026-03-02-whats-new-in-retype-v410.md)
[!card kicker="Release" footer="2026-03-02" image="/blog/images/2026-03-02-whats-new-in-retype-v410.png" title="What's NEW in Retype v4.1" layout="vert" text="Retype `v4.1` has been primarily a community-driven release shaped by suggestions and feedback from Retype users. A huge thank you to the Retype community for your contributions and ideas that made it into this release."](/blog/2026-03-02-whats-new-in-retype-v410.md)

release
What's New in Retype v4.1

Retype v4.1 has been primarily a community-driven release shaped by suggestions and feedback from Retype users. A huge thank you to the Retype community for your contributions and ideas that made it into this release. This release delivers a completely redesigned search experience, Unicode icon support, and new blog layout options.

2026-03-02
Release
What's NEW in Retype v4.1

Retype v4.1 has been primarily a community-driven release shaped by suggestions and feedback from Retype users. A huge thank you to the Retype community for your contributions and ideas that made it into this release.

2026-03-02

Compact cards with manual values

Compact cards are useful when you want a smaller inline set of links, including cards for external URLs.

[!card compact](/guides/getting-started.md)
[!card title="Install Retype" text="Install the Retype CLI." layout="compact"](/guides/installation.md)
[!card title="Retype website" text="Visit retype.com." icon=":smile:" layout="compact"](https://retype.com/)

Getting Started

This guide will have you up and running generating your own Retype website in just a few minutes.
Install Retype

Install the Retype CLI.
😄 Retype website

Visit retype.com.

List pair cards

You can create an array of cards from list pairs by using a wikilink as the top-level list item and a nested list item for the description.

The link must be a wikilink to a local page in your project. The nested text is always configured manually and is not pulled from the linked page.

- [[Blogging]]
  - Create blog posts and let Retype generate the rss feed and pages automatically.
- [[Installation]]
  - Install the Retype CLI with npm, yarn, or dotnet, and you'll be up and running in minutes.
- [[Community]]
  - Get a free Retype Pro key for use in GitHub Pages projects.

Blogging

Create blog posts and let Retype generate the rss feed and pages automatically.
Installation

Install the Retype CLI with npm, yarn, or dotnet, and you'll be up and running in minutes.
Community

Get a free Retype Pro key for use in GitHub Pages projects.

Template-driven cards

The Retype templating engine can read from content collections, which makes it easy to generate Cards dynamically instead of hardcoding paths.

The following sample demonstrates how to display the latest blog post by passing its filePath to the Card component.

[!card]({{ content.blog.posts[0].filePath }})

release
What's New in Retype v4.4

Retype v4.4 is another big release, including two new extensibility features that we have all wanted for a long time. The all new, custom icons deliver unlimited icon options for your project, and advanced include selectors let you share and reuse content and components across pages in powerful new ways.

2026-03-23

The content.blog.posts array contains all blog posts in your project sorted by date, newest first.

component