_components.md

Components

Below are the various components (and their markup) used in devdocs articles.

• Callouts
• Code Blocks
• Images
• Menu & Page Anchors
• Postman Buttons

---

Callouts

Markup:

<div class="HubBlock--callout">
<div class="CalloutBlock--{{callout_type}}">
<div class="HubBlock-content">
    
<!-- theme: {{callout_type}} -->

### {{title}}
> {{body}}

</div>
</div>
</div>

Example:

<div class="HubBlock--callout">
<div class="CalloutBlock--info">
<div class="HubBlock-content">
    
<!-- theme: {{callout_type}} -->

### Pro-Tip:
> Copy and paste the components into your favorite text expander (like PhraseExpress or PhraseExpander), or add to your favorite code editor's snippets.

</div>
</div>
</div>

Result:

Pro-Tip:

Copy and paste the components into your favorite text expander (like PhraseExpress or PhraseExpander), or add to your favorite code editor's snippets.

---

Code Blocks

Markup:

<!--
title: "{{title}}"
subtitle: "{{subtitle}}"
lineNumbers: true
-->

```{{code_lang}}
{code}}{{new-line}}```

Example

\```json
{
    "fruits": [
        "apples",
        "oranges",
        "bananas"
    ]
}
\```

Result:

{
    "fruits": [
        "apples",
        "oranges",
        "bananas"
    ]
}

---

Images

Markdown:

<!--
    title: {{title}}
    data: {{src}}
-->

#### {{title}}
![{{alt tag}}]({{src}} "{{title}}")

Example:

<!--
    title: {{title}}
    data: {{src}}
-->

#### Dev Tools
![Dev Tools](/assets/img/devtools.png "Dev Tools")

Result:

Dev Tools

---

Menu

Markdown

# Webhooks
<div class="otp" id="no-index">

### On this Page
	
* [Webhook Endpoints](#webhook-events_endpoints)
* [Webhook Response Struture](#webhook-events_response-structure)

</div>

Page Anchors

There must a space between the a tag and the menu title otherwise it will not work.

<a id="webhook-events_endpoints"></a>

<a id="markdown-webhook-endpoints" name="webhook-endpoints"></a>
## Webhook Endpoints

<a id="webhook-events_response-structure"></a>

<a id="markdown-webhook-response-struture" name="webhook-response-struture"></a>
## Webhook Response Struture

---

Try in Postman Buttons

See Creating a Run in Postman Button for instructions on creating the button and generating the markdown.

Example

To follow along, we have created a Postman Collection.

Give the button a relavent title. You can also use the button above as an example of what to include in a Postman button,