---
doc_id: tXPKdEHKANfY
description: "展示 sphinx-design 的 card、grid、tab、dropdown、badge 和 button 在 MyST 里的写法。是一篇组件演示文档。"
tags: [sphinx, sphinx-design]
---

# sphinx-design 组件

开启 `colon_fence` 后, sphinx-design 的组件都可以用 `:::{...}` 写。嵌套时外层的冒号比内层多一个。

## Grid 和 Card

::::{grid} 1 2 2 3
:gutter: 2

:::{grid-item-card} MyST Markdown
:link: bhNtpbPvxMCO
:link-type: ref

卡片的 `:link:` 也可以用 doc_id, 点击跳到对应文档。
:::

:::{grid-item-card} mermaid 和 SVG
:link: wYJOstZIrweF
:link-type: ref

画图相关的演示。
:::

:::{grid-item-card} Jupyter Notebook
:link: diUoGPNCOIwO
:link-type: ref

Notebook 也是一等公民。
:::
::::

## Tab

::::{tab-set}

:::{tab-item} MyST
```markdown
{ref}`bhNtpbPvxMCO`
```
:::

:::{tab-item} reST
```rst
:ref:`bhNtpbPvxMCO`
```
:::

:::{tab-item} Notebook
在普通的 Markdown cell 里写, 和 MyST 一样 (MyST-NB 会解析它):

```markdown
{ref}`bhNtpbPvxMCO`
```
:::

::::

## Dropdown

:::{dropdown} 点击展开
:icon: info

Dropdown 里可以放任意内容。
:::

## Badge 和 Button

{bdg-primary}`primary` {bdg-success}`success` {bdg-warning}`warning`

```{button-ref} OAFSttVJviBK
:color: primary
:outline:

跳到 reST 文档
```