Layout components in MyST¶

The MyST forms of the specimens on Layout components, each rendered live by this page’s own Markdown parser.

Grids¶

Grids

`````{grid} 1 2 2 2
:gutter: 2

````{grid-item-card} Read
{octicon}`book` Read the specification first.
````

````{grid-item-card} Write
{octicon}`pencil` Then write the requirement.
````

````{grid-item}
A plain item, with no card around it.
````
`````

Read

Read the specification first.

Write

Then write the requirement.

A plain item, with no card around it.

Cards¶

Cards

````{card} Layout components
:link: authoring:design
:link-type: ref
:shadow: md

The whole card links to the top of this page.

+++

A footer, after the line of three plus signs.
````

Layout components

The whole card links to the top of this page.

A footer, after the line of three plus signs.

Layout components

Dropdowns¶

Dropdowns

```{dropdown} Before you begin
:open:
:color: info
:icon: info

Check that the project builds.
```

```{dropdown} Closed until the reader opens it
Further detail.
```

Tabs¶

Tabs

`````{tab-set}
:sync-group: ex-design-os

````{tab-item} Linux
:sync: linux

Install with `apt`.
````

````{tab-item} Windows
:sync: windows
:selected:

Install with `winget`.
````
`````

Linux

Install with apt.

Windows

Install with winget.

Buttons¶

Buttons

```{button-link} https://sphinx-design.readthedocs.io
:color: primary

The sphinx-design documentation
```

```{button-ref} authoring:design
:ref-type: ref
:color: secondary
:outline:

Back to the top of this page
```

The sphinx-design documentation

Back to the top of this page

Plain blocks with design classes¶

Plain blocks with design classes

```{div} sd-text-center sd-border-1 sd-p-2
A centred paragraph in a bordered block.
```

A centred paragraph in a bordered block.