mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify-development[bot]
ad11bc265d
* Fix Vale style warnings: passive voice and punctuation - Convert passive voice to active voice in multiple component docs - Fix quotation mark punctuation in navigation.mdx - Update heading text to use correct casing Style-only changes that don't affect content meaning. Generated-By: mintlify-agent * Apply suggestion from @ethanpalm --------- Co-authored-by: mintlify-development[bot] <109878554+mintlify-development[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
65 lines
1.8 KiB
Plaintext
65 lines
1.8 KiB
Plaintext
---
|
|
title: "Examples"
|
|
description: "Display code blocks in the right sidebar on desktop devices"
|
|
keywords: ["RequestExample", "ResponseExample", "code examples", "request-response"]
|
|
---
|
|
|
|
The `<RequestExample>` and `<ResponseExample>` components display code blocks in the right sidebar to create a two-column layout that keeps examples visible while users scroll through your content. Use these components for API documentation, but they work on all pages.
|
|
|
|
Common use cases:
|
|
|
|
- API endpoint documentation with request and response examples
|
|
- Configuration examples alongside explanatory text
|
|
- Code samples that users reference while following instructions
|
|
- Before and after examples in tutorials
|
|
|
|
On mobile devices, `<RequestExample>` and `<ResponseExample>` components display as regular code blocks and can be scrolled past.
|
|
|
|
<RequestExample>
|
|
|
|
```bash Request
|
|
curl --request POST \
|
|
--url https://dog-api.kinduff.com/api/facts
|
|
```
|
|
|
|
</RequestExample>
|
|
|
|
<ResponseExample>
|
|
|
|
```json Response
|
|
{ "status": "success" }
|
|
```
|
|
|
|
</ResponseExample>
|
|
|
|
## RequestExample
|
|
|
|
Use `<RequestExample>` to pin code examples in the right sidebar. This component works similarly to the [CodeGroup](/components/code-groups) component, but displays the code in the sidebar instead of inline.
|
|
|
|
You can include multiple code blocks inside a single `<RequestExample>`. Each code block must have a title attribute.
|
|
|
|
````mdx RequestExample
|
|
<RequestExample>
|
|
|
|
```bash Request
|
|
curl --request POST \
|
|
--url https://dog-api.kinduff.com/api/facts
|
|
```
|
|
|
|
</RequestExample>
|
|
````
|
|
|
|
## ResponseExample
|
|
|
|
The `<ResponseExample>` component pins code examples in the right sidebar beneath any `<RequestExample>` content on the same page.
|
|
|
|
````mdx ResponseExample
|
|
<ResponseExample>
|
|
|
|
```json Response
|
|
{ "status": "success" }
|
|
```
|
|
|
|
</ResponseExample>
|
|
````
|