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)

↑ Docs content model

The :::div directive wraps content in a <div> element with a specified CSS class name, so a block of content can carry custom styling.

When to use​

Use :::div when a block needs a predefined visual treatment that plain Markdown can't express — a download button or a styled step sequence. Only the class names with styling defined in src/css/customDiv.css produce a visible effect.

Technical details​

CSS rules targeting the class can be added to src/css/customDiv.css. In non-Docusaurus builds (MSMD, DBIQ), the directive is transparent: children render as-is without any wrapping element.

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>.

Available custom divs​

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

:::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.

:::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.

Rules​

  • The [db-class] label is required — an error is logged if omitted.
  • Only class names with styling in src/css/customDiv.css render with a visible effect; others produce a plain <div>.
  • For :::div[steps], write steps as H3 headings, not list items, and precede the block with an H2.
  • When nesting other container directives, give the :::div wrapper more colons than any directive inside it.

Style​

  • Reach for a custom div only when a documented class fits; don't introduce styling that isn't defined in customDiv.css.

Template​

Markdown
:::div[download-button]

[Download the file](/documents/example.xml)

:::

Examples​

Download button​

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​

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.

Used in​

Content atoms appear in any page section. The steps div is a natural fit for Procedure; the download-button div appears wherever a page offers a file to download.

On this page