# Element Showcase — Every Supported Type

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

---

## Paragraphs and Inline Formatting

This is a regular paragraph with **bold text**, *italic text*, and ***bold italic text*** combined. You can also use `inline code` for short snippets. Here's some ~~strikethrough text~~ for good measure.

This second paragraph demonstrates a hard line break — the line below is separated by two trailing spaces.  
This line follows a hard line break.

## Links and Images

Here's a [link to Clayo](https://clayo.com) and a [link with a title](https://clayo.com "Visit Clayo").

![Placeholder image](https://placehold.co/600x300 "A sample image")

## Blockquotes

> This is a blockquote. It can contain **bold**, *italic*, and `code`.
>
> It can also span multiple paragraphs within the quote block.

## Unordered Lists

- First item
- Second item with **bold**
- Third item with nested children
  - Nested item one
  - Nested item two
    - Deeply nested item
- Fourth item

## Ordered Lists

1. Step one — install the package
2. Step two — configure your environment
3. Step three — with nested unordered list
   - Sub-point A
   - Sub-point B
4. Step four — ship it

## Tables

| Feature        | Free Plan | Pro Plan  | Enterprise |
| -------------- | --------- | --------- | ---------- |
| Articles       | 50        | Unlimited | Unlimited  |
| Custom domain  | No        | Yes       | Yes        |
| AI answers     | Basic     | Advanced  | Advanced   |
| Support        | Community | Email     | Dedicated  |

## Code Blocks

Inline code was shown above. Here's a fenced code block with syntax highlighting:

```python
def greet(name: str) -> str:
    """Return a greeting."""
    return f"Hello, {name}! Welcome to Clayo."

if __name__ == "__main__":
    print(greet("World"))
```

```javascript
const fetchDocs = async (subdomain) => {
  const res = await fetch(`/public/${subdomain}/articles`);
  return res.json();
};
```

```bash
npm install @clayo/widget
```

## Horizontal Rules

The line below is a horizontal rule:

---

The line above is a horizontal rule.

## Callouts

:::callout{type="info"}
This is an **info** callout. Use it to surface helpful context or background information for the reader.
:::

:::callout{type="tip"}
This is a **tip** callout. Use it to share best practices or shortcuts that save time.
:::

:::callout{type="warning"}
This is a **warning** callout. Use it when the reader should proceed with caution or be aware of a potential pitfall.
:::

:::callout{type="danger"}
This is a **danger** callout. Use it for destructive actions, breaking changes, or anything that could cause data loss.
:::

## Video Embeds

:::video{src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"}
:::

:::video{src="https://vimeo.com/148751763"}
:::

:::video{src="https://www.loom.com/share/1234567890abcdef"}
:::

## Align

:::align{value="left"}
This text is left-aligned (the default).
:::

:::align{value="center"}
This text is center-aligned.
:::

:::align{value="right"}
This text is right-aligned.
:::

## Tabs

::::tabs
:::tab{label="JavaScript"}
```javascript
import { ClayoWidget } from "@clayo/widget";

ClayoWidget.init({ projectId: "abc123" });
```
:::
:::tab{label="Python"}
```python
from clayo import Client

client = Client(project_id="abc123")
client.search("how do I reset my password?")
```
:::
:::tab{label="cURL"}
```bash
curl -X GET "https://api.clayo.com/public/my-docs/search?q=reset+password"
```
:::
::::

## Accordion

::::accordion
:::item{title="What is Clayo?"}
Clayo is an agent-native help docs platform for teams shipping with AI coding tools. You author docs through your AI coding assistant — no web editor needed.
:::
:::item{title="How does billing work?"}
Clayo is free to use with a **BYOK** (bring your own key) model. You provide your own OpenAI API key for AI-powered features like search answers.
:::
:::item{title="Can I use a custom domain?"}
Yes! You can point your own subdomain (e.g. `docs.yourapp.com`) to your Clayo docs site. Configuration is available in project settings.
:::
::::

## Combining Elements

:::callout{type="tip"}
You can nest **any** standard markdown inside directives — bold, italic, `code`, [links](https://clayo.com), and lists:

1. First nested ordered item
2. Second nested ordered item

- Unordered inside a callout too
:::

::::tabs
:::tab{label="With Callout"}
:::callout{type="info"}
This callout lives inside a tab.
:::
:::
:::tab{label="With Code"}
```json
{
  "nested": true,
  "inside": "tabs"
}
```
:::
::::

---

That covers every supported element type: headings (h1–h6), paragraphs, bold, italic, bold-italic, strikethrough, inline code, hard line breaks, links, images, blockquotes, unordered lists, ordered lists, nested lists, tables, fenced code blocks (with language highlighting), horizontal rules, callouts (info/tip/warning/danger), video embeds (YouTube/Vimeo/Loom), align (left/center/right), tabs, and accordions.