MyST Markdown

Dropdowns, Tabs & Cards

Dropdowns can be used to toggle content and show it only when a user clicks on the header panel. These use the standard HTML <details> element, meaning they also will work without Javascript. The dropdown can have a title, as the directive argument, and the open option can be used to initialise the dropdown in the open state.

Open dropdown to see the syntax!
```{dropdown} Dropdown Title

Dropdown content


Cards provide an easy way for you to content into a standard “header”, “body”, “footer” structure that has a similar alignment and visual style. It is useful for creating galleries or high-visibility collections of links and information.

Cards have four main sections, and uses special characters to separate certain sections:

  • A card title: The argument given to the directive.
  • A card header: Any content that precedes a line with ^^^.
  • A card footer: Any content that comes after a line with +++.
  • A card body: Any content that comes in between ^^^ and +++.

Here is an example card (note the use of ^^^ and +++ to separate the header, body, and footer):

```{card} Card Title
Card content


Card Title

Card content


You can also add a link argument to the card, which will allow you to make the entire card clickable.

Clickable Card

The entire card can be clicked to navigate to


Grids allow you to structure arbitrary chunks of content in a grid-like system. You can also control things like the width of columns, the “gutters” between columns, etc.

To generate a grid, use the ```{grid} wrapper directive along with ```{grid-item-card} directives inside. For example:

Text content ✏️

Structure books with text files and Jupyter Notebooks with minimal configuration.

MyST Markdown ✨

Write MyST Markdown to create enriched documents with publication-quality features.

Executable content 🔁

Execute notebook cells, store results, and insert outputs across pages.


You can also produce tabbed content. This allows you to display a variety of tabbed content blocks that users can click on.

```{tab-item} Tab 1
:sync: tab1
Tab one
```{tab-item} Tab 2
:sync: tab2
Tab two


Tab 1
Tab 2

Tab one

If you have multiple tabs with the same name, they will be synced!

Tab 1
Tab 2

Synced content for tab 1

#tab-item reference

Arguments (required: 1, string)

The tab-item requires a single argument that is the title as a string.


No options for the tab-item are required

sync (optional, string)
A key that is used to sync the selected tab across multiple tab-sets.
selected (flag, no-value)
a flag indicating whether the tab should be selected by default.