Skip to main content

The following components are baked into the Markdown compilation context, so there is no need to import them from Markdown files. Simply add the components inline to use them.

Linked Markdown Code Blocks


```
[view the intro](docs/introduction)
```

view the intro

Use a backslash to escape linking:


```yml
description: "this is \[an escaped link](docs.getdbt.com)"
```

description: "this is [an escaped link](docs.getdbt.com)"

Changelog

<Changelog>
    <p>This functionality has changed in dbt v0.16.0</p>
</Changelog>
▶Changelog

CloudCore

<CloudCore>
    <div>
        <p>The first div contains Cloud info</p>
    </div>
    <div>
        <p>The second div contains Core info</p>
    </div>
</CloudCore>

The first div contains Cloud info

Collapsible

<Collapsible header="The header info">
    <div>
        <p>Shows and hides children elements</p>
    </div>
</Collapsible>

The header info +

Click to expand

FAQList

<FAQList />

(Not shown)

FAQ

<FAQ path='Troubleshooting/sql-errors' alt_header="a header" />
an overriden header

File

<File name="~/.dbt/profiles.yml">

```yml
password: hunter2
```


</File>
~/.dbt/profiles.yml
password: hunter2

Lightbox

<Lightbox src="/img/dbt-logo.svg" title="The dbt logo" />
The dbt logoThe dbt logo

Markdown Links

Refer to the Links section of the Content Style Guide to read about how you can use links in the dbt product documentation.

LoomVideo

<LoomVideo id="09919ddb02e44015878c9e93e15fe792" />

Tabs


<Tabs
  defaultValue="default"
  values={[
    { label: 'Default', value: 'default', },
    { label: 'Snowflake', value: 'snowflake', },
  ]
}>
<TabItem value="default">

```sql
select id from customers
```

</TabItem>
<TabItem value="snowflake">

```sql
select "ID" from customers
```

</TabItem>
</Tabs>

select id from customers

YoutubeVideo

<YoutubeVideo id="5yyGT1k2xzY" />