> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kamu.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> Common UI elements used in documentation
# Typography
export const Diagram = ({src, alt}) => {
return
{alt}
;
};
export const YouTubeList = ({id}) => {
const src = `https://www.youtube.com/embed/videoseries?list=${id}`;
return ;
};
export const YouTube = ({id, width}) => {
const src = `https://www.youtube.com/embed/${id}`;
return ;
};
export const Schema = ({t, id}) => {
const anchor = id ? id : t.toLowerCase().replace(/\s+/g, "-");
const link = `/odf/schemas#${anchor}`;
return {t};
};
export const Term = ({t, id}) => {
const anchor = id ? id : t.toLowerCase().replace(/\s+/g, "-");
const link = `/general/glossary#${anchor}`;
return {t};
};
This section provides examples of all style elements available to documentation authors and the guidelines on using them.
## Links
We have special types of links to refer readers to:
* definitions of terms in the [Glossary](/general/glossary)
* schemas in the [ODF Schemas Reference](/odf/schemas)
**Input:**
```
import {Term, Schema} from '/components/common.jsx'
Raw data is stored in that
are linked from s.
```
**Result:**
Raw data is stored in that are linked from s.
## Code Blocks
**Input:**
````mdx theme={null} theme={null}
```js
const client = OdfClient::new("odf+https://localhost:8080");
```
````
**Result:**
```js theme={null}
const client = OdfClient::new("odf+https://localhost:8080");
```
## Text Blocks
**Input:**
```markdown theme={null}
Tip block
Note block
Info block
Warning block
Danger block
```
**Result:**
Tip block
Note block
Info block
Warning block
Danger block
## Tables
Input:
```markdown theme={null}
| Name | Description |
| ---- | :---------: |
| Foo | Test |
| Bar | Test |
```
Result:
| Name | Description |
| ---- | :---------: |
| Foo | Test |
| Bar | Test |
## Tabs
**Input:**
```markdown theme={null}
Tab 1 content with plain text
Tab 2 with markdown
- as
- list
Tab 3 content with rich elements
```
**Result:**
Tab 1 content with plain text
Tab 2 with markdown
* as
* list
Tab 3 content with rich elements
## Static Image
**Input:**
```markdown theme={null}
```
Result:
## YouTube Video
**Input:**
```markdown theme={null}
import {YouTube} from '/components/common.jsx'
```
**Result:**
## YouTube Playlist
**Input:**
```markdown theme={null}
import {YouTubeList} from '/components/common.jsx'
```
**Result:**
## Mermaid Diagrams
**Input:**
````mdx theme={null} theme={null}
```mermaid
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
````
**Result:**
```mermaid theme={null}
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long
long time, so long
that the text does
not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
See more examples [here](https://mermaid.js.org/syntax/examples.html).