example.qmd

---
title: Examples of features and styling
order: 3
---

Below is an example page that shows the theme's features and styling.
You can edit this page to test changes to the theme. For guidelines on
contributing to the theme, see the
[contributing guide](guide/contributing.qmd).

## Introduction

This is the test page! With a [link](https://duckduckgo.com/)!
And an emoji :grin:

[A primary button](nonexisting-link){.btn .btn-primary} [A secondary
button](nonexisting-link){.btn .btn-secondary}

A reference to [another header](index.qmd#another) in the same document.

Random text: The shoes had been there for as long as anyone could
remember. In fact, it was difficult for anyone to come up with a date
they had first appeared. It had seemed they'd always been there and yet
they seemed so out of place. Why nobody had removed them was a question
that had been asked time and again, but while they all thought it,
nobody had ever found the energy to actually do it. So, the shoes
remained on the steps, out of place in one sense, but perfectly normal
in another.

Here's a table:

| Name | Age |
|------|-----|
| John | 23  |
| Jane | 24  |

A list:

1. first
2. second
3. third

A callout block:

::: callout-tip
### Header within callout block

Some text.
:::

## Another

![This is a
caption](/_extensions/dp-next-theme/logos/sdca.png){width="200"}

Here's some `inline code` in a sentence.

A code block:

``` python
def hello_world():
    print("Hello, world!")
```

## Simple mermaid diagram

::: column-page
```{mermaid}
%%| fig-cap: "Simple mermaid diagram"
flowchart TB
    user(["User<br>[person]"])
    subgraph python
        package["Functions<br>[Python]"]
    end
    output[("Filesystem")]

    user --> python:::system
    sprout --> output:::external

    classDef system fill:none
    classDef external fill:lightgrey
```
:::