Skip to main content
Unlisted page
This page is unlisted. Search engines will not index it, and only users having a direct link can access it.
Last updated on

Div (:::div)

The :::div directive wraps content in a <div> element with a specified CSS class name. This is useful for applying custom styling to a block of content in Docusaurus builds. CSS rules targeting the class can be added to src/css/customDiv.css.

In non-Docusaurus builds (MSMD, DBIQ), the directive is transparent: children are rendered as-is without any wrapping element.

Syntax​

Markdown
:::div[db-class]

Content goes here. Supports **bold**, _italic_, code blocks, and other Markdown.

:::

The text in square brackets [db-class] becomes the className attribute of the rendered <div>. The label is required — an error will be logged if omitted.

Available custom divs​

The following db-class values have styling defined in src/css/customDiv.css.

Download button​

:::div[download-button] styles a Markdown link as a download button with a download icon, making file downloads stand out from regular links. When the link points to a file asset in the repo (such as a file under /documents/), the browser saves it to disk.

Example:

Markdown
:::div[download-button]

[Download the Excel add-in file](/documents/databricks-excel-manifest-aws-gcp.xml)

:::

Output:

Download the Excel add-in file

Steps​

:::div[steps] renders a sequence of H3 headings as styled steps with numbered icons and a vertical connector rail. Use it for sequential procedures where visual distinction from a regular numbered list helps readability.

  • Write each step as a plain H3 heading (### Step title) directly inside the block, followed by that step's content. Steps are headings, not list items. Numbering is a pure CSS counter on the H3s, so each heading gets the next number and its own circle.
  • The step titles stay real H3 headings, so Docusaurus lists them in the right-hand table of contents by their plain titles. There is no automatic Step N: prefix — the on-page numbered circle conveys the step number.
  • Precede the block with an H2 heading that names the overall procedure (for example, ## Configure private connectivity). This gives the H3 step titles a parent section on the page and groups their table of contents entries under a single scope.
  • When a step contains another container directive (such as :::note or :::tabs), give the wrapper more colons than any directive nested inside it (for example, :::::div[steps] when a step contains a ::: container) so the wrapper encloses the inner directive.
  • In MSMD/DBIQ builds the :::div is transparent, so the steps fall back to plain H3 headings with their content.

Example:

Markdown
## Set up a cluster

:::div[steps]

### Create a cluster

Navigate to the **Compute** page and click **Create Cluster**.

### Configure the cluster

Select a Databricks Runtime version and node type.

### Start the cluster

Click **Create Cluster** to start provisioning.

:::

Output:

Set up a cluster​

Create a cluster​

Navigate to the Compute page and click Create Cluster.

Configure the cluster​

Select a Databricks Runtime version and node type.

Start the cluster​

Click Create Cluster to start provisioning.

On this page