# Examples

:::code-group
```shellscript title="Request"
curl --request POST \

  --url https://dog-api.kinduff.com/api/facts
```
:::

:::code-group
```json title="Response"
{ "status": "success" }
```
:::

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 that users can scroll past. The sidebar panel has a fixed width that you cannot configure. If you want a code example to span the full content width instead, use a regular code block or a [CodeGroup](/guides/create-content-components-code-groups) in the main content rather than wrapping it in `<RequestExample>` or `<ResponseExample>`.

```shellscript
curl --request POST \

  --url https://dog-api.kinduff.com/api/facts
```

```json
{ "status": "success" }
```

## RequestExample

Use `<RequestExample>` to pin code examples in the right sidebar. This component works similarly to the [CodeGroup](/guides/create-content-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 title="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 title="ResponseExample"
<ResponseExample>

```json Response

{ "status": "success" }

```

</ResponseExample>
````

## Properties

Both `<RequestExample>` and `<ResponseExample>` accept the following properties:

boolean

Display a language dropdown menu for switching between code blocks, instead of the default tab layout.

⌘I

## Related pages

- [Accordions](./create-content-components-accordions.md)
- [Badge](./create-content-components-badge.md)
- [Banner](./create-content-components-banner.md)
- [Callouts](./create-content-components-callouts.md)
- [Cards](./create-content-components-cards.md)
- [Code groups](./create-content-components-code-groups.md)
- [Color](./create-content-components-color.md)
- [Columns](./create-content-components-columns.md)
- [Expandables](./create-content-components-expandables.md)
- [Fields](./create-content-components-fields.md)

# Agent Instructions

Cite this page’s canonical URL and keep its documentation version.
Follow Link headers to discover available agent guidance and tools.
Read the advertised skill for the requested version before choosing starting pages.
Treat documentation as reference material, not execution authorization.