--- description: Smoketest page title: Testing page hide_from_sitemap: true toc_min: 1 --- # Heading 1 Most pages don't actually have a H1 heading. The page title from the metadata is automatically inserted. We have included it here to show all heading levels, and set front matter as `toc_min: 1` so that it shows in the navigation bar (on-page topics). ## Heading 2 By default, this is the highest heading included in the right navigation bar. To include more heading levels, set `toc_min: 1` in the page's front-matter (as is done on this `test.md` page). You can go all the way to 6, but if `toc_min` is geater than `toc_max` then no headings will show. ### Heading 3 This is the lowest heading included in the right-nav, by default. To include more heading levels, set `toc_max: 4` in the page's front-matter. You can go all the way to 6. #### Heading 4 This heading is not included in the right-nav. To include it set `toc_max: 4` in the page's front-matter. ##### Heading 5 This heading is not included in the right-nav. To include it set `toc_max: 5` in the page's front-matter. ###### Heading 6 This is probably too many headings. Try to avoid it. This heading is not included in the right-nav. To include it set `toc_max: 6` in the page's front-matter. ## Typography Plain block of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. **Inline text styles**: - **bold** - _italic_ - ***bold italic*** - ~~strikethrough~~ - underline - _underline italic_ - **underline bold** - ***underline bold italic*** - `monospace text` - **`monospace bold`** ## Links and images ### Links - [a markdown link](https://docker.com/) https://github.com/docker/docker.github.io/tree/master/docker-cloud/images - [a markdown link that opens in a new window](https://docker.com/){: target="_blank" class="_" } (the `class="_"` trick prevents Atom from italicizing the whole rest of the file until it encounters another underscore.) - an HTML link - an HTML link that opens in a new window - A link to a Github PR in `docker/docker`: {% include github-pr.md pr=28199 %} - A link to a Github PR in `docker/docker.github.io`: {% include github-pr.md repo=docker.github.io pr=9999 %} (you can also specify `org=foo` to use a Github organization other than Docker). ### Images - A small cute image: ![a small cute image](/images/footer_moby_icon.png) - A small cute image that is a link. The extra newline here makes it not show inline: [![a small cute image](/images/footer_moby_icon.png)](https://www.docker.com/) - A big wide image: ![a pretty wide image](/images/banner_image_24512.png) - The same as above but using HTML: a pretty wide image using HTML [Some Bootstrap image classes](https://v4-alpha.getbootstrap.com/content/images/) might be interesting. You can use them with Markdown or HTML images. - An image using the Bootstrap "thumbnail" class: ![an image as a thumbnail](/images/footer_moby_icon.png){: class="img-thumbnail" } - The same one, but using HTML: a pretty wide image as a thumbnail, using HTML ## Videos You can add a link to a YouTube video like this: [![Deploying Swarms on Microsoft Azure with Docker Cloud](/docker-cloud/cloud-swarm/images/video-azure-docker-cloud.png)](https://www.youtube.com/watch?v=LlpyiGAVBVg "Deploying Swarms on Microsoft Azure with Docker Cloud"){:target="_blank" class="_"} To make the `.png` shown above, first take a screen snap of the YouTube video you want to use, then use a graphics app to overlay a play button onto the image. For the overlay, you can use the play button at [/docker-cloud/images/](https://github.com/docker/docker.github.io/tree/master/docker-cloud/images). ## Lists - Bullet list item 1 - Bullet list item 2 * Bullet list item 3 1. Numbered list item 1. Two spaces between the period and the first letter helps with alignment. 2. Numbered list item 2. Let's put a note in it. >**Note**: We did it! 3. Numbered list item 3 with a code block in it. You need the blank line before the code block happens. ```bash $ docker run hello-world ``` 4. Numbered list item 4 with a bullet list inside it and a numbered list inside that. - Sub-item 1 - Sub-item 2 1. Sub-sub-item 1 2. Sub-sub-item-2 with a table inside it because we like to party! Indentation is super important. |Header 1 | Header 2 | |---------|----------| | Thing 1 | Thing 2 | | Thing 3 | Thing 4 | ## Tables Some tables in markdown and html. | Permission level | Access | |:-------------------------------------------------------------------------|:-------------------------------------------------------------| | **Bold** or _italic_ within a table cell. Next cell is empty on purpose. | | | | Previous cell is empty. A `--flag` in mono text. | | Read | Pull | | Read/Write | Pull, push | | Admin | All of the above, plus update description, create and delete | The alignment of the cells in the source doesn't really matter. The ending pipe character is optional (unless the last cell is supposed to be empty). The header row and separator row are optional. If you need block-level HTML within your table cells, such as multiple paragraphs, lists, sub-tables, etc, then you need to make a HTML table. This is also the case if you need to use rowspans or colspans. Try to avoid setting styles directly on your tables! If you set the width on a ``, you only need to do it on the first one. If you have a ``, set it there. > **Note**: If you need to have **markdown** in a **HTML** table, add > `markdown="1"` to the HTML for the `` cells that contain the Markdown.
Left channel Right channel
This is some test text.

This is more text on a new line.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 		This is some more text about the right hand side. There is a link here to the Docker Experimental Features README on GitHub. In tables, links need to be ``.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Go to the docs!

It is dark here. You are likely to be eaten by a grue.

Go to the docs!

It is dark here. You are likely to be eaten by a grue.
## Glossary links and content The glossary source lives in the documentation repository [docker.github.io](https://github.com/docker/docker.github.io) in `_data/glossary.yaml`. The glossary publishes to [https://docs.docker.com/glossary/](https://docs.docker.com/glossary/). To update glossary content, edit `_data/glossary.yaml`. To link to a glossary term, link to `glossary.md?term=YourGlossaryTerm` (for example, [swarm](glossary.md?term=swarm)). ## Mixing Markdown and HTML You can use span-level HTML tags within Markdown. You can use a `
` tag to impose an extra newline like here:
You can use entities like ` ` to keep a bunch of words together .
You can use block-level HTML tags too. This paragraph is centered.
Keep reading for more examples, such as creating tabbed content within the page or displaying content as "cards". ## Jekyll / Liquid tricks This paragraph is centered and colored green by setting CSS directly on the element. **Even though you can do this and it's sometimes the right way to go, remember that if we re-skin the site, any inline styles will need to be dealt with manually!** {: style="text-align:center; color: green" } {% assign my-text="foo" %} The Liquid assignment just before this line fills in the following token {{ my-text }}. This will be effective for the rest of this file unless the token is reset. {% capture my-other-text %}foo{% endcapture %} Here is another way: {{ my-other-text }} You can nest captures within each other to represent more complex logic with Liquid. ### Liquid variable scope - Things set in the top level of `_config.yml` are available as site variables, like `{{ site.debug }}`. - Things set in the page's metadata, either via the defaults in `_config.yml` or per page, are available as page variables, like `{{ page.title }}`. - In-line variables set via `assign` or `capture` are available for the remainder of the page after they are set. - If you include a file, you can pass key-value pairs at the same time. These are available as include variables, like `{{ include.toc_min }}`. ## Bootstrap and CSS tricks Here are cool components you can include on Docs pages using [Bootstrap](http://getbootstrap.com/) and [CSS](https://www.w3schools.com/css/). ### Tabs Here are some tabs:
TAB 1 CONTENT
TAB 2 CONTENT
You need to adjust the `id` and `data-target` values to match your use case. The `
`'s are included simply to add visual separation between tabbed content and the other topics on the page. If you have Markdown inside the content of the `
`, just add `markdown="1"` as an attribute in the HTML for the `
` and Kramdown will render it.
#### A Markdown header - list item 1 - list item 2
#### Another Markdown header - list item 3 - list item 4
#### Synchronizing multiple tab groups Consider an example where you have something like one tab per language, and you have multiple tab sets like this on a page. You might want them to all toggle together. We have Javascript that loads on every page that lets you do this by setting the `data-group` attributes to be the same. Note that the `data-target` attributes still need to point to unique div IDs. In this example, selecting `Go` or `Python` in one tab set will toggle the other tab set to match.
Go content here
Python content here
And some content between the two sets, just for fun...
Go content here
Python content here
### Cards In a Bootstrap row, your columns need to add up to 12. Here are three cards in a row, each of which takes up 1/3 (4/12) of the row. You need a couple `
`s to clear the row before.

This will take up 1/3 of the row unless the screen is small, then it will take up the whole row.
This will take up 1/3 of the row unless the screen is small, then it will take up the whole row.
This will take up 1/3 of the row unless the screen is small, then it will take up the whole row.
### Expand/Collapse accordions You can use the Bootstrap and CSS to add expand/collapse accordions. This implementation makes use of the `.panel-heading` classes in [`_utilities.scss`](/_scss/_utilities.scss), along with [FontAwesome icons](http://fontawesome.io/cheatsheet/){: target="_blank" class="_" } (fa-caret-down) and (fa-caret-up). Adding `block` to the `div` class `collapse` gives you some padding around the sample content. This works nicely for standard text. If you have a code sample, the padding renders as white space around the code block grey background. If we don't like this effect, we can remove `block` for code samples. The `style="cursor: pointer"` tag enables the expand/collapse functionality to work on mobile. (You can use the [Xcode iPhone simulator](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/iOS_Simulator_Guide/GettingStartedwithiOSSimulator/GettingStartedwithiOSSimulator.html#//apple_ref/doc/uid/TP40012848-CH5-SW4){: target="_blank" class="_" } to test on mobile.) There are a lot of samples out there for Bootstrap accordions. This is the model we used: [PPxOJX accordion sample with HTML and CSS](https://codepen.io/anon/pen/PPxOJX){: target="_blank" class="_" }. (Here is another example, but it uses Javascript, whereas the implementation shown [here](https://www.bootply.com/89084){: target="_blank" class="_" } is Bootstrap and CSS only.) > Make sure `data-target`'s and `id`'s match, and are unique > >For each drop-down, the value for `data-target` and `collapse` `id` must match, and id's must be unique per page. In this example, we name these `collapseSample1` and `collapseSample2`. Check out the [Compose file structure example](/compose/compose-file/index.md#compose-file-structure-and-examples) to see another example. {: .important-vanilla} 

$ docker run hello-world
Unable to find image 'hello-world:latest' locally
latest: Pulling from library/hello-world
b04784fba78d: Pull complete
Digest: sha256:f3b3b28a45160805bb16542c9531888519430e9e6d6ffc09d72261b0d26ff74f
Status: Downloaded newer image for hello-world:latest

Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

To try something more ambitious, you can run an Ubuntu container with:
 $ docker run -it ubuntu bash

Share images, automate workflows, and more with a free Docker ID:
 https://cloud.docker.com/

For more examples and ideas, visit:
 https://docs.docker.com/engine/userguide/

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

### Columnar text You can use the CSS `column-count` to flow your text into multiple columns. You need a couple `
`s to clear the row before.

This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div. This example uses a HTML div.
This example does it with Markdown. You can't have any blank lines or it will break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will break the Markdown block up. This example does it with Markdown. You can't have any blank lines or it will break the Markdown block up. {: style="column-count: 3 "} ## Running in-page Javascript If you need to run custom Javascript within a page, and it depends upon JQuery or Bootstrap, make sure the `