Follow us on TwitterFork us on GitHub
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
:open:

Dropdown content
```

#Cards

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
Header
^^^
Card content
+++
Footer
```

Header

Card Title

Card content

Footer

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

#Grids

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.

#Tabs

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

````{tab-set}
```{tab-item} Tab 1
Tab one
```
```{tab-item} Tab 2
Tab two
```
````

Creates:

Tab 1
Tab 2

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

Tab 1
Tab 2