Dropdowns, Tabs & Cards
Dropdowns¶
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.
:::{dropdown} Dropdown Title :open: Dropdown content :::
Use "Admonition Dropdowns" for style!
You can also hide the body of your admonition blocks so that users must click a button to reveal their content. This is helpful if you’d like to include some text that isn’t immediately visible to the user.
To turn an admonition into a dropdown, add the option :class: dropdown to them. See Admonition Dropdown for more information.
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. For example, a card with a header, title, body, and footer:
```{card} Card title :header: The _Header_ :footer: Footer Card content ```
You can also add a link argument to the card, which will allow you to make the entire card clickable.
The entire card can be clicked to navigate to myst-tools.org.
Compatibility with Sphinx design
In the Sphinx design project card headers and footers take a special syntax:
- 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 +++.
This syntax is supported in mystjs, for example:
:::{card} Card Title
Header
^^^
Card content
+++
Footer
:::Note that, card headers and footers are optional. If you don’t include ^^^ or +++ in your card, they will not show up.
card reference¶
- Arguments (optional, markdown)
The
cardcan take a single argument that is the title as a string.- Options
No options for the
cardare required- header (optional, markdown)
- Styled content at the top of the card
- footer (optional, markdown)
- Styled content at the bottom of the card
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 ```{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 :sync: tab1 Tab one ::: :::{tab-item} Tab 2 :sync: tab2 Tab two ::: ::::
If you have multiple tabs with the same name, they will be synced!
Synced content for tab 1
Synced content for tab 2
tab-item reference¶
- Arguments (required:
1, string) The
tab-itemrequires a single argument that is the title as a string.Note: thetab-itemtitle is not currently not parsedThe current implementation does not parse the tab title properly, and markup in this field will not be parsed.
- Options
No options for the
tab-itemare 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.
