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.
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 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.
#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
:sync: tab1
Tab one
```
```{tab-item} Tab 2
:sync: tab2
Tab two
```
````Creates:
Tab one
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.- 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.
