mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Ethan Palm
48 lines
1.5 KiB
Plaintext
48 lines
1.5 KiB
Plaintext
---
|
|
title: "Examples"
|
|
description: "Display code blocks in the right sidebar on desktop devices"
|
|
icon: 'between-horizontal-start'
|
|
---
|
|
|
|
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. These components are designed 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
|
|
|
|
Use `<RequestExample>` to pins 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>
|
|
````
|