linkcard

Link to another piece of content using our card design.

{{< linkcard to="CONTENT_LOCATION_HERE" >}}

Use angle bracket delimiters ({{< ... >}}) with this shortcode. Otherwise, Hugo’s Markdown processing of the shortcode’s content adds extraneous markup.

Options

  • to: Mandatory. An absolute or relative path to the target page, or a URL (beginning with http) to an external page.

  • columns: Optional. Sets the width of the card to allow for multiple columns. Must be either 2 or 3. Default 1.

  • title: Mandatory for external pages; optional for internal pages. Text to display at the top of the card. Overrides the default of linktitle for internal pages.

  • description: Mandatory for external pages; optional for internal pages. Text to display in the body of the card. Overrides the default of description for internal pages.

  • listChildren: Optional, available for internal pages only. Lists the child pages of the given section, including sections. Default false.

  • subpages: Optional, available for internal pages only. Lists the number of child pages of the given section at the bottom of the card. Default false.

  • abc: Optional, alphabetizes the resulting pages rather than using the Hugo default internal sort (weight > date > title).

Examples

<!-- Absolute link: -->
{{< linkcard to="/products/backups" >}}

<!-- Absolute link with other options: -->
{{< linkcard to="/products/snapshots/how-to" title="Snapshot How-Tos" subpages="true" >}}

<!-- Relative link: -->
{{< linkcard to="./notice" >}}

<!-- External link: -->
{{< linkcard to="http://example.com" title="Example.com" description="This is an example." >}}

Renders to:

Enable backups to automatically create system-level disk images of Droplets on a weekly schedule with no configuration required.
How to accomplish specific tasks in detail, like creation/deletion, configuration, and management.
8 articles
Highlight content to draw attention to it. Use sparingly.
This is an example description.
example.com

Columns

{{< linkcard to="/products/droplets" columns="2" >}}
{{< linkcard to="/products/app-platform" columns="2" >}}

{{< linkcard to="/release-notes" columns="3" >}}
{{< linkcard to="regional-availability" columns="3" >}}
{{< linkcard to="/platform/accounts" columns="3" >}}

Renders to:

DigitalOcean Droplets are Linux-based virtual machines (VMs). Each Droplet you create is a new server you can use. Choose from a variety of Droplet plans to get right resources (like CPU, RAM, and storage) for your workload.
App Platform is a platform as a service (PaaS) offering that lets you publish code directly to DigitalOcean servers without worrying about the underlying infrastructure, runtimes, or dependencies.

Release notes track incremental improvements and major releases for the DigitalOcean cloud platform.
Availability of DigitalOcean products by datacenter and region.
Manage your team membership and your name, sign-in method, and email subscriptions with your personal DigitalOcean account.

List Children

{{< linkcard to="/products/droplets/how-to/add-ssh-keys" listChildren="true" >}}

Renders to:

Use OpenSSH to create new SSH keys on MacOS, Linux, or Windows Subsystem for Linux.
Use PuTTY to create SSH keys on Windows systems without Bash.
Add an SSH public key to an existing Droplet to be able to log in using that keypair.