01 / Callout
Docs ↗:::tip{title="Custom title"}Callout content goes here.::: :::infoThis is a general note.:::Custom title
Callout content goes here.
Info
This is a general note.
Callouts, tabs, cards, steps and file trees are written as Markdown directives and resolved by Flame. No JSX and no import lines: the source stays readable in any editor.
Directives in. Static HTML out.01 / Callout
Docs ↗:::tip{title="Custom title"}Callout content goes here.::: :::infoThis is a general note.:::Custom title
Callout content goes here.
Info
This is a general note.
02 / Tabs
Docs ↗::::tabs:::tab{title="Java"}```java:HelloWorld.javaSystem.out.println("Hello");```::::::tab{title="TypeScript"}```typescript:helloWorld.tsconsole.log("Hello");```:::::::System.out.println("Hello");console.log("Hello");03 / Steps
Docs ↗::::steps:::step{title="Clone the repository"}```bashgit clone …/docubook.git```::::::step{title="Install dependencies"}```bashbun install```:::::::git clone …/docubook.gitbun install04 / Card group
Docs ↗::::cards{cols="2"}:::card{title="Heading 1" icon="Heading1"}Card content with columns.::::::card{title="Heading 2" icon="Heading2"}Card content with columns.:::::::05 / Accordion
Docs ↗:::accordion{title="Click to expand"}A simple accordion that can betoggled by clicking the header.:::A simple accordion that can be toggled by clicking the header.
06 / File tree
Docs ↗```filetreemy-app/ src/ App.tsx package.json README.md```App.tsx
package.json
README.md
```js:main.js showLineNumbers {3-4}```mermaid| Column | Column |:tooltip[word]{tip="…"}[Text](https://…)::youtube{videoId="…"}::::accordions:::card{title="…" icon="…"}Less platform. More publishing.