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


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
MyST Tools
MyST Markdown Tools
Documentation