---
title: Page cards
description: Page cards are full-width, clickable navigation rows that link to another page in the docs. Use them to build index-style landing pages where you want...
url: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/2927/syntax/page-card
products:
  - Elastic Docs Builder
---

# Page cards
Page cards are full-width, clickable navigation rows that link to another page in the docs. Use them to build index-style landing pages where you want each destination to be visually prominent and immediately navigable.
<page-card>
  Callout boxes for notes, warnings, tips, and other asides.
</page-card>


## Basic usage

A page card takes a single Markdown link as its argument. The description body is optional.
<tab-set>
  <tab-item title="Output">
    <page-card>
      Syntax-highlighted code with copy button, callouts, and console output support.
    </page-card>
  </tab-item>

  <tab-item title="Markdown">
    ```markdown
    :::{page-card} [Code blocks](code.md)
    Syntax-highlighted code with copy button, callouts, and console output support.
    :::
    ```
  </tab-item>
</tab-set>


## Without a description

<tab-set>
  <tab-item title="Output">
    <page-card>
    </page-card>
  </tab-item>

  <tab-item title="Markdown">
    ```markdown
    :::{page-card} [Tables](tables.md)
    :::
    ```
  </tab-item>
</tab-set>


## Stacking cards

Consecutive page cards stack into a list automatically — no container directive required.
<tab-set>
  <tab-item title="Output">
    <page-card>
      Callout boxes for notes, warnings, tips, and important asides.
    </page-card>

    <page-card>
      Organise related content into selectable tab panels.
    </page-card>

    <page-card>
      Step-by-step instructions with numbered visual progression.
    </page-card>
  </tab-item>

  <tab-item title="Markdown">
    ```markdown
    :::{page-card} [Admonitions](admonitions.md)
    Callout boxes for notes, warnings, tips, and important asides.
    :::

    :::{page-card} [Tabs](tabs.md)
    Organise related content into selectable tab panels.
    :::

    :::{page-card} [Stepper](stepper.md)
    Step-by-step instructions with numbered visual progression.
    :::
    ```
  </tab-item>
</tab-set>


## Link types


### Local links

The most common use — a relative path to another `.md` file in the same documentation set:
```markdown
:::{page-card} [Configuration](./configuration.md)
How to configure contexts and credentials.
:::
```


### Cross-repository links

Page cards support [cross-repository links](/elastic/docs-builder/pull/2927/syntax/links#cross-repository-links) using the `scheme://path` syntax:
```markdown
:::{page-card} [Getting Started](docs-content://get-started/introduction.md)
Learn the basics of the Elastic Stack.
:::
```


### Absolute URLs are not allowed

Page cards are for in-docs navigation only. Absolute `http://` or `https://` URLs are rejected at build time:
```markdown
:::{page-card} [Elastic website](https://elastic.co)  ← build error
:::
```

Use a standard Markdown link or a [button](https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/2927/syntax/buttons) for external destinations.

## Reference


| Part     | Required | Description                                                                                                     |
|----------|----------|-----------------------------------------------------------------------------------------------------------------|
| Argument | Yes      | A Markdown link `[Title](url)` — title becomes the card heading, url must be a local `.md` path or a crosslink. |
| Body     | No       | One or more lines of description text rendered below the title.                                                 |