- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
-
-
-
-```
\ No newline at end of file
diff --git a/contribute/checklist.md b/contribute/checklist.md
new file mode 100644
index 000000000000..d8a4acb7f26f
--- /dev/null
+++ b/contribute/checklist.md
@@ -0,0 +1,55 @@
+---
+title: Writing checklist
+description: A helpful writing checklist when creating documentation
+keywords: checklist, documentation, style guide, contribute
+---
+
+Use this checklist to communicate in a way that is clear, helpful, and consistent with the rest of Docker Docs.
+
+##### Used active voice
+
+Active voice is specific and removes ambiguity.
+
+In active voice, the subject of the sentence (the customer or the system) does the action.
+
+Sentences that use active voice are easier to read. Active voice makes it clear who has done what and to whom. Plus, active voice keeps sentences direct and more concise.
+
+Helping verbs such as is, was, or would may indicate that you're writing in passive voice. And, if you can add the phrase 'by zombies' after the verb, you're writing in the passive voice.
+
+|Correct| Incorrect|
+|:--|:--|
+|Increase productivity with Docker Desktop.| Productivity can be increased (by zombies) with Docker Desktop.|
+|If you remove items from a grid, charts automatically refresh to display the change. | If items are removed (by zombies) from a grid, charts automatically refresh to display the change.|
+
+##### Written clear sentences that get to the point
+
+Write short, concise sentences. Punchy sentences are faster to read and easier to understand.
+
+##### Used subheadings and bulleted lists to break up the page
+
+This helps ‘scanners’ find the information they need quickly and easily.
+
+For more information, see the [formtatting](style/formatting.md#headings-and-subheadings) page, or see the [components](components/lists.md) for examples.
+
+##### Started the title of your page with a verb
+
+For example, 'Install Docker Desktop'.
+
+##### Checked that the left-hand table of contents title in docs.docker.com, matches the title displayed on the page
+
+##### Checked for broken links and images
+
+Use relative links to link to other pages or images within the docker.github.io repository.
+
+For more information, see the [formatting](style/formatting.md#links) page, or see the [components](components/links.md) for examples.
+
+##### Checked that any redirects you may have added, work
+
+For information on how to add redirects, see [Source file conventions](file-conventions.md#frontmatter).
+
+##### Used bold on any UI elements you refer to in your content
+
+##### Completed a final spelling, punctuation, and grammar check
+
+For more in-depth information on our Style Guide, explore the [Grammar](style/grammar.md) or [Formatting](style/formatting.md) guides.
+
diff --git a/contribute/components/accordions.md b/contribute/components/accordions.md
new file mode 100644
index 000000000000..d9dc34a8b198
--- /dev/null
+++ b/contribute/components/accordions.md
@@ -0,0 +1,135 @@
+---
+description: components and formatting examples used in Docker's docs
+title: Accordions
+toc_max: 3
+---
+
+## Example
+
+ (fa-caret-down) and
+ (fa-caret-up).
+
+
+
+ Docker hello-world example
+
+
+
+
+$ docker run hello-world
+Unable to find image 'hello-world:latest' locally
+latest: Pulling from library/hello-world
+2db29710123e: Pull complete
+Digest: sha256:cc15c5b292d8525effc0f89cb299f1804f3a725c8d05e158653a563f15e4f685
+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.
+ (amd64)
+3. The Docker daemon created a new container from that image which runs the
+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://hub.docker.com/
+
+For more examples and ideas, visit:
+ https://docs.docker.com/get-started/
+
+
+
+
+
Another Sample
+
+
+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.
+
+
+
+## HTML
+
+```
+
+
+ Docker hello-world example
+
+
+
+
+$ docker run hello-world
+Unable to find image 'hello-world:latest' locally
+latest: Pulling from library/hello-world
+2db29710123e: Pull complete
+Digest: sha256:cc15c5b292d8525effc0f89cb299f1804f3a725c8d05e158653a563f15e4f685
+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.
+ (amd64)
+3. The Docker daemon created a new container from that image which runs the
+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://hub.docker.com/
+
+For more examples and ideas, visit:
+ https://docs.docker.com/get-started/
+
+
+
+
+
Another Sample
+
+
+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.
+
+
+```
+
+This implementation makes use of the `.panel-heading` classes in
+`_utilities.scss.md`,
+along with [FontAwesome icons](http://fontawesome.io/cheatsheet/){: target="_blank" rel="noopener" class="_" }
+
+> Note
+>
+>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`.
+
+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.
+
+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" rel="noopener" class="_" } to test on mobile.)
\ No newline at end of file
diff --git a/contribute/components/badges.md b/contribute/components/badges.md
new file mode 100644
index 000000000000..153b68ca4463
--- /dev/null
+++ b/contribute/components/badges.md
@@ -0,0 +1,28 @@
+---
+description: components and formatting examples used in Docker's docs
+title: Badges
+toc_max: 3
+---
+### Examples
+
+badges
+yellow badges
+red badges
+
+You can make a badge a link.
+
+Badge with link
+
+### HTML
+
+
+```html
+badges.
+
+yellow badges
+
+red badges
+
+Test
+```
+
diff --git a/contribute/components/call-outs.md b/contribute/components/call-outs.md
new file mode 100644
index 000000000000..4210a2ad739b
--- /dev/null
+++ b/contribute/components/call-outs.md
@@ -0,0 +1,72 @@
+---
+description: components and formatting examples used in Docker's docs
+title: Call outs
+toc_max: 3
+---
+
+We support these broad categories of call outs:
+
+- Notes (no Liquid tag required)
+- Important, which use the `{: .important}` tag
+- Warning , which use the `{: .warning}` tag
+
+## Examples
+
+ > **Note**
+ >
+ > Note the way the `get_hit_count` function is written. This basic retry
+ > loop lets us attempt our request multiple times if the redis service is
+ > not available. This is useful at startup while the application comes
+ > online, but also makes our application more resilient if the Redis
+ > service needs to be restarted anytime during the app's lifetime. In a
+ > cluster, this also helps handling momentary connection drops between
+ > nodes.
+
+> **Important**
+>
+> Treat access tokens like your password and keep them secret. Store your
+> tokens securely (for example, in a credential manager).
+{: .important}
+
+
+> **Warning**
+>
+> Removing Volumes
+>
+> By default, named volumes in your compose file are NOT removed when running
+> `docker-compose down`. If you want to remove the volumes, you will need to add
+> the `--volumes` flag.
+>
+> The Docker Dashboard does _not_ remove volumes when you delete the app stack.
+{: .warning}
+
+## HTML
+
+```html
+> **Note**
+ >
+ > Note the way the `get_hit_count` function is written. This basic retry
+ > loop lets us attempt our request multiple times if the redis service is
+ > not available. This is useful at startup while the application comes
+ > online, but also makes our application more resilient if the Redis
+ > service needs to be restarted anytime during the app's lifetime. In a
+ > cluster, this also helps handling momentary connection drops between
+ > nodes.
+
+> **Important**
+>
+> Treat access tokens like your password and keep them secret. Store your
+> tokens securely (for example, in a credential manager).
+{: .important}
+
+> **Warning**
+>
+> Removing Volumes
+>
+> By default, named volumes in your compose file are NOT removed when running
+> `docker-compose down`. If you want to remove the volumes, you will need to add
+> the `--volumes` flag.
+>
+> The Docker Dashboard does _not_ remove volumes when you delete the app stack.
+{: .warning}
+```
\ No newline at end of file
diff --git a/contribute/components/cards.md b/contribute/components/cards.md
new file mode 100644
index 000000000000..464f8466676b
--- /dev/null
+++ b/contribute/components/cards.md
@@ -0,0 +1,31 @@
+---
+description: components and formatting examples used in Docker's docs
+title: Cards
+toc_max: 3
+---
+## Example
+
+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.
+
+
+
This takes up 1/3 of the row unless the screen is small,
+then it takes up the whole row.
+
This takes up 1/3 of the row unless the screen is small,
+then it takes up the whole row.
+
This takes up 1/3 of the row unless the screen is small,
+then it takes up the whole row.
+
+
+## HTML
+
+```html
+
+
This takes up 1/3 of the row unless the screen is small,
+then it takes up the whole row.
+
This takes up 1/3 of the row unless the screen is small,
+then it takes up the whole row.
+
This takes up 1/3 of the row unless the screen is small,
+then it takes up the whole row.
+
+```
diff --git a/contribute/components/code-blocks.md b/contribute/components/code-blocks.md
new file mode 100644
index 000000000000..8e32e3eaefc7
--- /dev/null
+++ b/contribute/components/code-blocks.md
@@ -0,0 +1,165 @@
+---
+description: components and formatting examples used in Docker's docs
+title: Code blocks
+toc_max: 3
+---
+
+# Code blocks
+
+Rouge provides lots of different code block "hints". If you leave off the hint,
+it tries to guess and sometimes gets it wrong. These are just a few hints that
+we use often.
+
+#### Raw, no highlighting
+
+The raw markup is needed to keep Liquid from interpreting the things with double
+braces as templating language.
+
+{% raw %}
+```none
+none with raw
+$ some command with {{double braces}}
+$ some other command
+```
+{% endraw %}
+
+#### Raw, Bash
+
+{% raw %}
+```bash
+bash with raw
+$ some command with {{double braces}}
+$ some other command
+```
+{% endraw %}
+
+#### Bash
+
+```bash
+$ echo "deb https://packages.docker.com/1.12/apt/repo ubuntu-trusty main" | sudo tee /etc/apt/sources.list.d/docker.list
+```
+
+#### Go
+
+```go
+incoming := map[string]interface{}{
+ "asdf": 1,
+ "qwer": []interface{}{},
+ "zxcv": []interface{}{
+ map[string]interface{}{},
+ true,
+ int(1e9),
+ "tyui",
+ },
+}
+```
+
+#### PowerShell
+
+```powershell
+Install-Module DockerMsftProvider -Force
+Install-Package Docker -ProviderName DockerMsftProvider -Force
+[System.Environment]::SetEnvironmentVariable("DOCKER_FIPS", "1", "Machine")
+Expand-Archive docker-18.09.1.zip -DestinationPath $Env:ProgramFiles -Force
+```
+
+#### Python
+
+```python
+return html.format(name=os.getenv('NAME', "world"), hostname=socket.gethostname(), visits=visits)
+```
+
+#### Ruby
+
+```ruby
+docker_service 'default' do
+ action [:create, :start]
+end
+```
+
+#### JSON
+
+```json
+"server": {
+ "http_addr": ":4443",
+ "tls_key_file": "./fixtures/notary-server.key",
+ "tls_cert_file": "./fixtures/notary-server.crt"
+}
+```
+
+#### HTML
+
+```html
+
+
+
+Welcome to nginx!
+
+
+```
+
+#### Markdown
+
+```markdown
+# Hello
+```
+
+#### ini
+
+```ini
+[supervisord]
+nodaemon=true
+
+[program:sshd]
+command=/usr/sbin/sshd -D
+```
+
+#### Dockerfile
+
+```dockerfile
+# syntax=docker/dockerfile:1
+
+#
+# example Dockerfile for https://docs.docker.com/examples/postgresql_service/
+#
+
+FROM ubuntu
+
+RUN apt-key adv --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys B97B0AFCAA1A47F044F244A07FCC7D46ACCC4CF8
+
+RUN echo "deb http://apt.postgresql.org/pub/repos/apt/ precise-pgdg main" > /etc/apt/sources.list.d/pgdg.list
+
+RUN apt-get update && apt-get install -y python-software-properties software-properties-common postgresql-9.3 postgresql-client-9.3 postgresql-contrib-9.3
+
+# Note: The official Debian and Ubuntu images automatically ``apt-get clean``
+# after each ``apt-get``
+
+USER postgres
+
+RUN /etc/init.d/postgresql start &&\
+ psql --command "CREATE USER docker WITH SUPERUSER PASSWORD 'docker';" &&\
+ createdb -O docker docker
+
+RUN echo "host all all 0.0.0.0/0 md5" >> /etc/postgresql/9.3/main/pg_hba.conf
+
+RUN echo "listen_addresses='*'" >> /etc/postgresql/9.3/main/postgresql.conf
+
+EXPOSE 5432
+
+VOLUME ["/etc/postgresql", "/var/log/postgresql", "/var/lib/postgresql"]
+
+CMD ["/usr/lib/postgresql/9.3/bin/postgres", "-D", "/var/lib/postgresql/9.3/main", "-c", "config_file=/etc/postgresql/9.3/main/postgresql.conf"]
+```
+
+#### YAML
+
+```yaml
+authorizedkeys:
+ image: dockercloud/authorizedkeys
+ deployment_strategy: every_node
+ autodestroy: always
+ environment:
+ - AUTHORIZED_KEYS=ssh-rsa AAAAB3Nsomelongsshkeystringhereu9UzQbVKy9o00NqXa5jkmZ9Yd0BJBjFmb3WwUR8sJWZVTPFL
+ volumes:
+ /root:/user:rw
+```
diff --git a/contribute/components/images.md b/contribute/components/images.md
new file mode 100644
index 000000000000..817a0aa9eb48
--- /dev/null
+++ b/contribute/components/images.md
@@ -0,0 +1,35 @@
+---
+description: components and formatting examples used in Docker's docs
+title: Images
+toc_max: 3
+---
+
+## Example
+
+- A small image: 
+
+- A small image that is a link. The extra newline here makes it not show inline:
+
+ [](https://www.docker.com/)
+
+- Set the size of an image: {:width="750px"}
+
+- A big wide image: 
+
+- The same as above but using HTML:
+
+## HTML and Markdown
+
+```html
+- A small image: 
+
+- A small image that is a link. The extra newline here makes it not show inline:
+
+ [](https://www.docker.com/)
+
+- Set the size of an image: {:width="750px"}
+
+- A big wide image: 
+
+- The same as above but using HTML:
+```
\ No newline at end of file
diff --git a/contribute/components/links.md b/contribute/components/links.md
new file mode 100644
index 000000000000..7fc916696c4d
--- /dev/null
+++ b/contribute/components/links.md
@@ -0,0 +1,38 @@
+---
+description: components and formatting examples used in Docker's docs
+title: Links
+toc_max: 3
+---
+## Examples
+
+It is best practice if [a link opens in a new window](https://docker.com/){: target="_blank" rel="noopener" class="_" }
+
+#### Links to auto-generated content
+
+An example of a link to an auto-generated reference page that we pull in during docs builds:
+[/engine/reference/builder/#env](/engine/reference/builder/#env).
+
+ - If you can't find a reference page in the `docker.github.io`
+ GitHub repository, but see it out on `docs.docker.com`, you can
+ surmise that it's probably auto-generated from the codebase.
+ (FYI, to view the Markdown source for the file, just click
+ **Edit this page** on `docs.docker.com`. But don't use that URL in your docs.)
+
+ - Go to the file in a web browser, grab everything after the domain name
+ from the URL, and use that as the link in your docs file.
+
+ - Keep in mind that this link doesn't resolve until you merge the PR and
+ your docs are published on [docs.docker.com](/).
+
+## HTML
+
+```html
+
+It is best practice if [a link opens in a new window](https://docker.com/){: target="_blank" rel="noopener" class="_" }
+
+You can also have [a markdown link to a custom target ID](#formatting-examples)
+
+An example of a link to an auto-generated reference page that we pull in during docs builds:
+[/engine/reference/builder/#env](/engine/reference/builder/#env).
+
+```
\ No newline at end of file
diff --git a/contribute/components/lists.md b/contribute/components/lists.md
new file mode 100644
index 000000000000..7d2f84a567df
--- /dev/null
+++ b/contribute/components/lists.md
@@ -0,0 +1,75 @@
+---
+description: components and formatting examples used in Docker's docs
+title: Lists
+toc_max: 3
+---
+
+## Examples
+
+- 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 |
+
+## Markdown
+
+```html
+- 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.
+ Indentation is super important.
+
+ |Header 1 | Header 2 |
+ |---------|----------|
+ | Thing 1 | Thing 2 |
+ | Thing 3 | Thing 4 |
+```
\ No newline at end of file
diff --git a/contribute/components/tables.md b/contribute/components/tables.md
new file mode 100644
index 000000000000..5109ea5d8d47
--- /dev/null
+++ b/contribute/components/tables.md
@@ -0,0 +1,31 @@
+---
+description: components and formatting examples used in Docker's docs
+title: Tables
+toc_max: 3
+---
+
+## Example
+
+| 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 |
+
+## Markdown
+
+```
+| 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.
\ No newline at end of file
diff --git a/contribute/components/tabs.md b/contribute/components/tabs.md
new file mode 100644
index 000000000000..a660e9595395
--- /dev/null
+++ b/contribute/components/tabs.md
@@ -0,0 +1,107 @@
+---
+description: components and formatting examples used in Docker's docs
+title: Tabs
+toc_max: 3
+---
+
+## Examples
+
+
+
+##### 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. In the following example, selecting `Go` or `Python` in one tab set toggles the
+other tab set to match. We have Javascript that loads on every page that lets you
+do this by setting the `data-group` attributes to be the same. The
+`data-target` attributes still need to point to unique div IDs.
+
+
+```
\ No newline at end of file
diff --git a/contribute/components/tooltips.md b/contribute/components/tooltips.md
new file mode 100644
index 000000000000..d1a7aecfb490
--- /dev/null
+++ b/contribute/components/tooltips.md
@@ -0,0 +1,39 @@
+---
+description: components and formatting examples used in Docker's docs
+title: Tooltips
+toc_max: 3
+---
+Tooltips are not visible on mobile devices or touchscreens, so don't rely on them as the
+only way to communicate important info.
+
+## Examples
+
+
+
+
+
+
+
+
+
+This is a paragraph that has a tooltip. We position it to the left so it doesn't align with the middle top of the paragraph (that looks weird).
+{:data-toggle="tooltip" data-placement="left" title="Markdown tooltip example"}
+
+Test
+
+## HTML
+
+```html
+
+
+
+
+
+
+
+
+This is a paragraph that has a tooltip. We position it to the left so it doesn't align with the middle top of the paragraph (that looks weird).
+{:data-toggle="tooltip" data-placement="left" title="Markdown tooltip example"}
+
+Test
+```
diff --git a/contribute/components/videos.md b/contribute/components/videos.md
new file mode 100644
index 000000000000..3628869b479f
--- /dev/null
+++ b/contribute/components/videos.md
@@ -0,0 +1,14 @@
+---
+description: components and formatting examples used in Docker's docs
+title: Videos
+toc_max: 3
+---
+
+To embed a YouTube video on a docs page, open the video on YouTube, click
+**Share** > **Embed** and then copy the code displayed.
+
+For example, the video embedded on the Get Started page has the following code:
+
+```html
+
+```
diff --git a/contribute/contribute-guide.md b/contribute/contribute-guide.md
new file mode 100644
index 000000000000..4d7cf8dcf099
--- /dev/null
+++ b/contribute/contribute-guide.md
@@ -0,0 +1,124 @@
+---
+title: Contributing guidelines
+description: Guidelines for contributing to Docker's docs
+keywords: contribute, guide, style guide
+---
+
+The live docs are published from the `master` branch. Therefore, you must create pull requests against the `master` branch for all content updates. This includes:
+
+- Conceptual and task-based information
+- Restructuring / rewriting
+- Doc bug fixing
+- Fixing typos, broken links, and any grammar errors
+
+There are two ways to contribute a pull request to the docs repository:
+
+1. You can click **Edit this page** option in the right column of every page on [https://docs.docker.com/](https://docs.docker.com/).
+
+ This opens the GitHub editor, which means you don't need to know a lot about Git, or even about Markdown. When you save, Git prompts you to create a fork if you don't already have one, and to create a branch in your fork and submit the pull request.
+
+2. Fork the [docs GitHub repository](https://github.com/docker/docker.github.io). Suggest changes or add new content on your local branch, and submit a pull request (PR) to the `master` branch.
+
+ This is the manual, more advanced version of clicking 'Edit this page' on a published docs page. Initiating a docs changes in a PR from your own branch gives you more flexibility, as you can submit changes to multiple pages or files under a single pull request, and even create new topics.
+
+ For a demo of the components, tags, Markdown syntax, styles, etc we use at [https://docs.docker.com/](https://docs.docker.com/), see the Usefule components section.
+
+### Important files
+
+Here’s a list of some of the important files:
+
+- `/_data/toc.yaml` defines the left-hand navigation for the docs
+- `/js/docs.js` defines most of the docs-specific JS such as the table of contents (ToC) generation and menu syncing
+- `/css/style.scss` defines the docs-specific style rules
+- `/_layouts/docs.html` is the HTML template file, which defines the header and footer, and includes all the JS/CSS that serves the docs content
+
+### Files not edited here
+
+Some files and directories are maintained in the upstream repositories. You can find a list of such files in `_config_production.yml`. Pull requests against these files will be rejected.
+
+## Pull request guidelines
+
+Help us review your PRs more quickly by following these guidelines.
+
+- Try not to touch a large number of files in a single PR if possible.
+- Don't change whitespace or line wrapping in parts of a file you are not editing for other reasons. Make sure your text editor is not configured to
+ automatically reformat the whole file when saving.
+- We highly recommend that you build the docs locally and verify your changes before submitting a PR. See the section [Build and preview the docs locally](#build-and-preview-the-docs-locally).
+- A Netlify test runs for each PR that is against the `master` branch, and deploys the result of your PR to a staging site. The URL will be available at in the **Conversation** tab. Check the staging site to verify how your changes look and fix issues, if necessary.
+
+## Collaborate on a pull request
+
+Unless the PR author specifically disables it, you can push commits into another
+contributor's PR. You can do it from the command line by adding and fetching
+their remote, checking out their branch, and adding commits to it. Even easier,
+you can add commits from the Github web UI, by clicking the pencil icon for a
+given file in the **Files** view.
+
+If a PR consists of multiple small addendum commits on top of a more significant
+one, the commit will usually be "squash-merged", so that only one commit is
+merged into the `master` branch. In some scenarios where a squash and merge isn't appropriate, all commits are kept separate when merging.
+
+## Per-PR staging on GitHub
+
+A Netlify test runs for each PR created against the `master` branch and deploys the result of your PR to a staging site. When the site builds successfully, you will see a comment in the **Conversation** tab in the PR stating **Deploy Preview for docsdocker ready!**. Click the **Browse the preview** URL and check the staging site to verify how your changes look and fix issues, if necessary. Reviewers also check the staged site before merging the PR to protect the integrity of the docs site.
+
+## Build and preview the docs locally
+
+On your local machine, clone the docs repository:
+
+```bash
+git clone --recursive https://github.com/docker/docker.github.io.git
+cd docker.github.io
+```
+
+Then, build and run the documentation using [Docker Compose](https://docs.docker.com/compose/)
+
+```bash
+docker compose up -d --build
+```
+
+> You need Docker Compose to build and run the docs locally. Docker Compose is included with [Docker Desktop](https://docs.docker.com/desktop/).
+> If you don't have Docker Desktop installed, follow the [instructions](https://docs.docker.com/compose/install/) to install Docker Compose.
+
+When the container is built and running, visit [http://localhost:4000](http://localhost:4000) in your web browser to view the docs.
+
+To rebuild the docs after you made changes, run the `docker compose up` command
+again. This rebuilds the docs, and updates the container with your changes:
+
+```bash
+docker compose up -d --build
+```
+
+To stop the staging container, use the `docker compose down` command:
+
+```bash
+docker compose down
+```
+
+### Build the docs with deployment features enabled
+
+The default configuration for local builds of the documentation disables some
+features to allow for a shorter build-time. The following options differ between
+local builds, and builds that are deployed to [docs.docker.com](https://docs.docker.com/):
+
+- search auto-completion, and generation of `js/metadata.json`
+- Google Analytics
+- page ratings
+- `sitemap.xml` generation
+- minification of stylesheets (`css/style.css`)
+- adjusting "edit this page" links for content in other repositories
+
+If you want to contribute in these areas, you can perform a "production" build
+locally. To preview the documentation with deployment features enabled, set the `JEKYLL_ENV` environment variable when building the documentation:
+
+```bash
+JEKYLL_ENV=production docker compose up --build
+```
+
+When the container is built and running, visit [http://localhost:4000](http://localhost:4000) in your web browser to view the docs.
+
+To rebuild the docs after you make changes, repeat the steps above.
+
+## Copyright and license
+
+Copyright 2013-2022 Docker, inc, released under the Apache 2.0 license.
\ No newline at end of file
diff --git a/contribute/file-conventions.md b/contribute/file-conventions.md
new file mode 100644
index 000000000000..e0d9c7d6fe99
--- /dev/null
+++ b/contribute/file-conventions.md
@@ -0,0 +1,63 @@
+---
+title: Source file conventions
+description: How new .md files should be formatted
+keywords: source file, contribute, style guide
+---
+
+## File name
+
+When you create a new .md file for new content, make sure:
+- File names are as short as possible
+- Try to keep the file name to one word or two words
+- Use a dash to separate words. For example:
+ - `add-seats.md` and `remove-seats.md`.
+ - `multiplatform-images` preferred to `multi-platform-images`.
+
+## Frontmatter
+
+The front-matter of a given page is in a section at the top of the Markdown
+file that starts and ends with three hyphens. It includes YAML content. The
+following keys are supported. The title, description, and keywords are required.
+
+| Key | Required | Description |
+|------------------------|-----------|-----------------------------------------|
+| title | yes | The page title. This is added to the HTML output as a `
` level header. |
+| description | yes | A sentence that describes the page contents. This is added to the HTML metadata. It’s not rendered on the page. |
+| keywords | yes | A comma-separated list of keywords. These are added to the HTML metadata. |
+| redirect_from | no | A YAML list of pages which should redirect to the current page. At build time, each page listed here is created as an HTML stub containing a 302 redirect to this page. |
+| notoc | no | Either `true` or `false`. If `true`, no in-page TOC is generated for the HTML output of this page. Defaults to `false`. Appropriate for some landing pages that have no in-page headings.|
+| toc_min | no | Ignored if `notoc` is set to `true`. The minimum heading level included in the in-page TOC. Defaults to `2`, to show `
` headings as the minimum. |
+| toc_max | no | Ignored if `notoc` is set to `false`. The maximum heading level included in the in-page TOC. Defaults to `3`, to show `
` headings. Set to the same as `toc_min` to only show `toc_min` level of headings. |
+| skip_read_time | no | Set to `true` to disable the 'Estimated reading time' banner for this page. |
+| sitemap | no | Exclude the page from indexing by search engines. When set to `false`, the page is excluded from `sitemap.xml`, and a `` header is added to the page. |
+
+Here's an example of a valid (but contrived) page metadata. The order of
+the metadata elements in the front-matter isn't important.
+
+```liquid
+---
+description: Instructions for installing Docker Engine on Ubuntu
+keywords: requirements, apt, installation, ubuntu, install, uninstall, upgrade, update
+title: Install Docker Engine on Ubuntu
+redirect_from:
+- /ee/docker-ee/ubuntu/
+- /engine/installation/linux/docker-ce/ubuntu/
+- /engine/installation/linux/docker-ee/ubuntu/
+- /engine/installation/linux/ubuntu/
+- /engine/installation/linux/ubuntulinux/
+- /engine/installation/ubuntulinux/
+- /install/linux/docker-ce/ubuntu/
+- /install/linux/docker-ee/ubuntu/
+- /install/linux/ubuntu/
+- /installation/ubuntulinux/
+toc_max: 4
+---
+```
+
+## Body
+
+The body of the page (with the exception of keywords) starts after the frontmatter
+
+### Text length
+
+Splitting long lines (preferably up to 80 characters) can make it easier to provide feedback on small chunks of text.
diff --git a/contribute/overview.md b/contribute/overview.md
new file mode 100644
index 000000000000..d595afa41e66
--- /dev/null
+++ b/contribute/overview.md
@@ -0,0 +1,80 @@
+---
+title: Contribute to Docker's docs
+toc_max: 1
+redirect_from:
+- /CONTRIBUTING/
+---
+
+We deeply value documentation contributions from the Docker community. We'd like to make it as easy
+as possible for you to work in this repository. The following sections guide you through the process of contributing to Docker documentation.
+
+
+
+### Additional resources
+
+We also provide:
+
+- A section of useful components you can add to your documentation. For components and controls we are using [Bootstrap](https://getbootstrap.com)
+- Information on Docker's [tone and voice](style/voice-tone.md).
+- A [writing checklist](checklist.md) to help you when you're contributing to Docker's documenation.
\ No newline at end of file
diff --git a/contribute/style/formatting.md b/contribute/style/formatting.md
new file mode 100644
index 000000000000..f2f03eca8672
--- /dev/null
+++ b/contribute/style/formatting.md
@@ -0,0 +1,136 @@
+---
+title: Formatting guide
+description: Formatting guidelines for technical documentation
+keywords: formatting, style guide, contribute
+toc_max: 2
+---
+
+## Headings and subheadings
+
+Readers pay fractionally more attention to headings, bulleted lists and links, so it's important to ensure the first two to three words in those items "front load" information as much as possible.
+
+### Best practice:
+
+- Headings and subheadings should let the reader know what they will find on the page.
+- They should describe succinctly and accurately what the content is about.
+- Headings should be short (no more than eight words), to the point and written in plain, active language.
+- You should avoid puns, teasers and cultural references.
+- Skip leading articles (a, the, etc.)
+
+## Page title
+
+Page titles should be action orientated. For example:
+ - _Enable SCIM_
+ - _Install Docker Desktop_
+
+### Best practice:
+
+- Make sure the title of your page and the TOC entry matches
+- If you want to use a ‘:’ in a page title in the table of contents (_toc.yaml), you must wrap the entire title in “” to avoid breaking the build.
+
+## Images
+
+Images, including screenshots, can help a reader better understand a concept. However, they should be used sparingly as they tend to go out-of-date quickly.
+
+### Best practice:
+- When you take screenshots:
+ - Don’t use lorem ipsum text. Try to replicate how the feature would be used in a real-world scenario, and use realistic text.
+ - Capture only the relevant UI. Don’t include unnecessary white space or areas of the UI that don’t help illustrate the point.
+ - Keep it small. If you don’t need to show the full width of the screen, don’t.
+ - Review how the image renders on the page. Make sure the image isn’t blurry or overwhelming.
+ - Be consistent. Coordinate screenshots with the other screenshots already on a documentation page for a consistent reading experience.
+ - To keep the Git repository light, compress the images (losslessly). Be sure to compress the images before adding them to the repository. Compressing images after adding them to the repository actually worsens the impact on the Git repo (however, it still optimizes the bandwidth during browsing).
+ - Don't forget to remove images from the repo that are no longer used.
+
+For information on how to add images to your content, see [Useful component and formatting examples](../components/images.md).
+
+## Links
+
+Be careful not to create too many links, especially within body copy. Excess links can be distracting or send readers away from the current page.
+
+When people follow links, they can often lose their train of thought and fail to return to the original page, despite not having absorbed all the information it contains.
+
+The best links offer readers another way to scan information.
+
+### Best practice:
+
+- Use plain language that does not mislead or promise too much.
+- Be short and descriptive (around five words is best).
+- Allow people to predict (with a fair degree of confidence) what they will get if they click mirror the heading text on the destination page in links whenever possible.
+- Front-load user-and-action-oriented terms at the beginning of the link (Download our app).
+- Avoid generic calls to action (such as click here, find out more).
+- Do not include any end punctuation when you hyperlink text (for example, periods, question marks, or exclamation points).
+- Do not make link text italics or bold, unless it would be so as normal body copy.
+- Make sure your link opens in a new tab so it doesn't interrupt the user-flow.
+
+For information on how to add links to your content, see [Useful component and formatting examples](../components/links.md).
+
+## Code and code samples
+
+Format the following as code: docker commands, instructions and filenames (package names).
+
+To apply inline code style, wrap the text in a single backtick (`).
+
+For information on how to add codeblocks to your content, see [Useful component and formatting examples](../components/code-blocks.md).
+
+## Callouts
+
+Use callouts to emphasize selected information in a page.
+
+### Best practice:
+
+- Format the word Warning, Important, or Note in bold. Do not bold the content within the callout.
+- It's good practice to avoid placing a lot of text callouts on one page. They can create a cluttered appearance if used to excess, and you'll diminish their impact.
+
+| Text callout | Use case scenario | Color or callout box |
+| --- | --- | --- |
+| Warning | Use a Warning tag to signal to the reader where actions may cause damage to hardware or software loss of data. | Red |
+| | ✅ Example: Warning: When you use the docker login command, your credentials are stored in your home directory in .docker/config.json. The password is base64-encoded in this file. | |
+| Important | Use an Important tag to signal to the reader where actions may cause issues of a lower magnitude. | Yellow |
+| | ✅ Example: Update to the Docker Desktop terms | |
+| Note | Use the Note tag for information that may not apply to all readers, or if the information is tangential to a topic. | Blue |
+| | ✅ Example: Deleting a repository deletes all the images it contains and its build settings. This action cannot be undone.|
+
+For information on how to add call outs to your content, see [Useful component and formatting examples](../components/call-outs.md).
+
+## Navigation
+
+When documenting how to navigate through the Docker Desktop or Docker Hub UI:
+
+- Always use location, then action. For example:
+ _From the **Visibility** dropdown list (location), select Public (action)._
+- Be brief and specific. For example:
+ Do: _Select **Save**._
+ Do not: _Select **Save** for the changes to take effect._
+- If a step must include a reason, start the step with it. This helps the user scan more quickly.
+ Do: _To view the changes, in the merge request, select the link._
+ Do not: _Select the link in the merge request to view the changes_
+
+## Optional steps
+
+If a step is optional, start the step with the word Optional followed by a period.
+
+For example:
+
+_1. Optional. Enter a description for the job._
+
+## Placeholder text
+
+You might want to provide a command or configuration that uses specific values.
+
+In these cases, use < and > to call out where a reader must replace text with their own value. For example:
+
+`docker extension install `
+
+## Tables
+
+Tables should be used to describe complex information in a straightforward manner.
+
+Note that in many cases, an unordered list is sufficient to describe a list of items with a single, simple description per item. But, if you have data that’s best described by a matrix, tables are the best choice.
+
+### Best practice:
+
+- Use sentence case for table headings.
+- To keep tables accessible and scannable, tables should not have any empty cells. If there is no otherwise meaningful value for a cell, consider entering N/A for ‘not applicable’ or None.
+
+For information on how to add tables to your content, see [Useful component and formatting examples](../components/tables.md).
diff --git a/contribute/style/grammar.md b/contribute/style/grammar.md
new file mode 100644
index 000000000000..289b767ff342
--- /dev/null
+++ b/contribute/style/grammar.md
@@ -0,0 +1,159 @@
+---
+title: Grammar and style
+description: Grammar and style guidelines for technical documentation
+keywords: grammar, style, contribute
+toc_max: 2
+---
+
+## Acronyms and initialisms
+
+An acronym is an abbreviation you would speak as a word, for example, ROM (for read only memory). Other examples include radar and scuba, which started out as acronyms but are now considered words in their own right.
+
+An initialism is a type of acronym that comprises a group of initial letters used as an abbreviation for a name or expression. If you were using the acronym in a spoken conversation, you would enunciate each letter: H-T-M-L for Hypertext Markup Language.
+
+### Best practice:
+
+- Spell out lesser-known acronyms or initialisms on first use, then follow with the acronym or initialism in parentheses. After this, throughout the rest of your page or document, use the acronym or initialism alone.
+> ‘You can use single sign-on (SSO) to sign in to Notion. You may need to ask your administrator to enable SSO.’
+- Where the acronym or initialism is more commonly used than the full phrase, for example, URL, HTML, you do not need to follow this spell-it-out rule.
+- Use all caps for acronyms of file types (a JPEG file).
+- Don't use apostrophes for plural acronyms. ✅URLs ❌URL’S
+- Avoid using an acronym for the first time in a title or heading. If the first use of the acronym is in a title or heading, introduce the acronym (in parentheses, following the spelled-out term) in the first body text that follows.
+
+## Bolds and italics
+
+Unless you're referring to Ul text or user-defined text, you should not add emphasis to text. Clear, front-loaded wording makes the subject of a sentence clear.
+
+### Best practice:
+
+- Don't use bold to refer to a feature name.
+- Use italics sparingly, as this type of formatting can be difficult to read in digital experiences.
+Notable exceptions are titles of articles, blog posts, or specifcation documents.
+
+## Capitalization
+
+Use sentence case for just about everything. Sentence case means capitalizing only the first word, as you would in a standard sentence.
+
+The following content elements should use sentence case:
+
+- Titles of webinars and events
+- Headings and subheadings in all content types
+- Calls to action
+- Headers in boxed text
+- Column and row headers in tables
+- Links
+- Sentences (of course)
+- Anything in the Ul including navigation labels, buttons, headings
+
+### Best practice
+
+- As a general rule, it's best to avoid the use of ALL CAPITALS in most content types. They are more difficult to scan and take up more space. While all caps can convey emphasis, they can also give the impression of shouting.
+- If a company name is all lowercase or all uppercase letters, follow their style, even at the beginning of sentences: DISH and bluecrux. When in doubt, check the company's website.
+- Use title case for Docker solutions : Docker Extensions, Docker Hub.
+- Capitalize a job title if it immediately precedes a name (Chief Executive Officer Scott Johnston).
+- Do not capitalize a job title that follows a name or is a generic reference (Scott Johnston, chief executive officer of Docker).
+- Capitalize department names when you refer to the name of a department, but use lower case if you are talking about the field of work and not the actual department.
+- When referring to specific user interface text, like a button label or menu item, use the same capitalization that’s displayed in the user interface.
+
+## Contractions
+
+A contraction results from letters being left out from the original word or phrase, such as you're for you are or it's for it is.
+
+Following our conversational approach, it's acceptable to use contractions in almost all content types. Just don't get carried away. Too many contractions in a sentence can make it difficult to read.
+
+### Best practice:
+
+- Stay consistent - don't switch between contractions and their spelled-out equivalents in body copy or Ul text.
+- Avoid negative contractions (can't, don't, wouldn't, and shouldn't) whenever possible. Try to rewrite your sentence to align with our helpful approach that puts the focus on solutions, not problems.
+- Never contract a noun with is, does, has, or was as this can make it look like the noun is possessive. Your container is ready. Your container’s ready.
+
+## Dates
+
+You should use the U.S. format of month day, year format for dates: June 26, 2021.
+
+When possible, use the month's full name (October 1, 2022). If there are space constraints, use 3-letter abbreviations followed by a period (Oct. 1. 2022).
+
+## Decimals and fractions
+
+In all UI content and technical documentation, use decimals instead of fractions.
+
+### Best practice:
+
+- Always carry decimals to at least the hundredth place (33.76).
+
+- In tables, align decimals on the decimal point.
+
+- Add a zero before the decimal point for decimal fractions less than one (0.5 cm).
+
+## Lists
+
+Lists are a great way to break down complex ideas and make them easier to read and scan.
+
+### Best practice:
+
+- Bulleted lists should contain relatively few words or short phrases. For most content types, limit the number of items in a list to five.
+- Don’t add commas (,) or semicolons (;) to the ends of list items.
+- Some content types may use bulleted lists that contain 10 items, but it's preferable to break longer lists into several lists, each with its own subheading or introduction.
+- Never create a bulleted list with only one bullet, and never use a dash to indicate a bulleted list.
+- If your list items are fragments, capitalize the list items for ease of scanning but do not use terminal punctuation.
+Example:
+
+ I went to the shops to buy:
+
+ - Milk
+ - Flour
+ - Eggs
+- Make sure all your list items are parallel. This means you should structure each list item in the same way. They should all be fragments, or they should all be complete sentences. If you start one list item with a verb, then start every list item with a verb.
+- Every item in your list should start with a capital letter unless they’re parameters or commands.
+- Nested sequential lists are labelled with lowercase letters. For example:
+ 1. Top level
+ 2. Top level
+ 1. Child step
+ 2. Child step
+
+
+## Numbers
+
+When you work with numbers in content, the best practices include:
+
+- Spell out the numbers one to nine, except in units of measure such as 4 MB.
+- Represent numbers with two or more digits as numerals (10, 625, 773,925).
+- Recast a sentence, rather than begin it with a number (unless it's a year).
+- When you cite numbers in an example, write them out as they appear in any accompanying screenshots.
+- Write numbers out as they appear on the platform when you cite them in an example.
+- To refer to large numbers in abstract (such as thousands, millions, and billions), use a combination of words and numbers. Do not abbreviate numeric signifiers.
+- Avoid using commas in numbers because they can represent decimals in different cultures. For numbers that are five digits or more, use a space to separate.
+
+
+ | Correct | Incorrect |
+ | --- | --- |
+ | 1000 | 1,000 |
+ | 14 586 | 14,586 |
+ | 1 390 680 | 1,390,680 |
+
+### Versions
+
+When writing version numbers for release notes, follow the example below:
+
+Version 4.8.2
+
+## Punctuation
+
+### Colons and semicolons
+
+- Use colons to: introduce a list inline in a sentence; introduce a bulleted or numbered list; and provide an explanation.
+- Do not use semicolons. Use two sentences instead.
+
+### Commas
+
+- Use the serial or Oxford comma - a comma before the coordinating conjunction (and, or) in a list of three or more things.
+- If a series contains more than three items or the items are long, consider a bulleted list to improve readability.
+
+### Dashes and hyphens
+
+- Use the em dash (-) sparingly when you want the reader to pause, to create parenthetical statements, or to emphasize specific words or phrases. Always put a space on either side of the em dash.
+- Use an en dash (-) to indicate spans of numbers, dates, or time.
+- Use a hyphen to join two or more words to form compound adjectives that precede a noun. The purpose of joining words to form a compound adjective is to differentiate the meaning from the adjectives used separately (for example, ‘up-to-date documentation’ ‘lump-sum payment’, and ‘well-stocked cupboard’. You can also use a hyphen to:
+ - Avoid awkward doubling of vowels. For example ‘semi-independence*’,* or ‘re-elect’.
+ - Prevent misreading of certain words. For example ‘Re-collect’ means to collect again; without a hyphen the word recollect has a different meaning.
+
diff --git a/contribute/style/recommended-words.md b/contribute/style/recommended-words.md
new file mode 100644
index 000000000000..81580d6f2810
--- /dev/null
+++ b/contribute/style/recommended-words.md
@@ -0,0 +1,107 @@
+---
+title: Recommended word list
+description: Recommended word list for Technical documentation
+keywords: recommended word list, style guide, contribute
+---
+
+To help ensure consistency across our documentation, the Technical Writing team recommends these wording choices.
+
+#### above
+Try to avoid using `above` when referring to an example or table in a documentation page. If required, use `previous` instead.
+
+For example:
+
+_In the previous example, the dog had fleas._
+
+#### below
+Try to avoid `below` when referring to an example or table in a documentation page. If required, use `following` instead.
+
+For example:
+
+_In the following example, the dog had fleas._
+
+#### checkbox
+
+Use one word for `checkbox`. Do not use `check box`.
+
+You select (not check or enable) and clear (not deselect or disable) checkboxes.
+
+#### click
+
+Do not use `click`. Instead, use `select` with buttons, links, menu items, and lists.
+
+Select applies to more devices, while click is more specific to a mouse.
+
+#### currently
+
+Do not use `currently` when talking about the product or its features. The documentation describes the product as it is today.
+
+#### deselect
+
+Don’t use `deselect`. Instead, use `clear`.
+
+#### earlier
+
+Use `earlier` when talking about version numbers.
+
+Use:
+
+_In Docker Desktop 4.1 and earlier._
+
+Instead of:
+
+_In Docker Desktop 4.1 and lower._
+
+#### execute
+
+Avoid where possible. Use `run` instead.
+
+#### later
+Use `later` when talking about version numbers.
+
+Use:
+
+_In GitLab 14.1 and later._
+
+Instead of:
+
+_In GitLab 14.1 and higher…_ or _In GitLab 14.1 and above…_
+
+#### register
+Use `register` instead of sign up when talking about creating an account.
+
+#### respectively
+Avoid `respectively` and be more precise instead.
+
+#### scroll
+
+Avoid. Use a verb phrase such as _move through_ or _navigate to_ instead, if the context is clear.
+
+#### sign in
+Use `sign in` instead of `sign on` or `log on` or `log in`. If the user interface has different words, use those.
+
+
+#### sign up
+Use `register` or `create account` instead of `sign up` when talking about creating an account.
+
+#### toggle
+
+You turn on or turn off a toggle. For example:
+
+_Turn on the dark mode toggle._
+
+#### upgrade
+Use `upgrade` for when describing a higher subscription tier
+
+#### we
+
+Try to avoid `we` and focus instead on how the user can accomplish something in Docker.
+
+Use:
+
+_Use widgets when you have work you want to organize._
+
+Instead of:
+
+_We created a feature for you to add widgets.
+One exception: You can use we recommend instead of it is recommended or GitLab recommends._
diff --git a/contribute/style/terminology.md b/contribute/style/terminology.md
new file mode 100644
index 000000000000..a83cddf81d59
--- /dev/null
+++ b/contribute/style/terminology.md
@@ -0,0 +1,60 @@
+---
+title: Docker terminology
+description: Docker specific terminology and definitions
+keywords: terminology, style guide, contribute
+---
+
+#### `compose.yaml`
+
+The current designation for the Compose file, as it is a file, format as code.
+
+#### Compose plugin
+
+The compose app as an add-on (for Docker CLI) that can be enabled/disabled.
+
+#### Digest
+
+The long number that’s automatically created every time you push an image. You can pull an image by Digest or by Tag.
+
+#### Docker Compose
+
+Use when we talk about the application, or all the functionality associated with the application.
+
+#### `docker compose`
+
+Use code formatting) for referring to the commands in text and command usage examples/code samples.
+
+#### Docker Compose CLI
+
+Use when referring to family of Compose commands as offered from the Docker CLI.
+
+#### Multi-platform
+
+(broad meaning) Mac vs Linux vs Microsoft but also pair of platform architecture such as in Linux/amd64 and Linux/arm64; (narrow meaning) windows/linux/mac.
+
+#### Multi-architecture / multi-arch
+
+To use when referring specifically to CPU architecture or something that is hardware-architecture-based. Avoid using it as meaning the same as multi-platform.
+
+#### Member
+
+A user of Docker Hub that is a part of an organization
+
+#### Namespace
+
+Organization or User name. Every image needs a namespace to live under.
+
+#### Node
+
+A node is a physical or virtual machine running an instance of the Docker Engine in swarm mode.
+Manager nodes perform swarm management and orchestration duties. By default manager nodes are also worker nodes.
+Worker nodes execute tasks.
+
+#### Registry
+
+Online storage for Docker images.
+
+#### Repository
+
+Lets users share container images with their team, customers, or Docker community.
+
diff --git a/contribute/style/voice-tone.md b/contribute/style/voice-tone.md
new file mode 100644
index 000000000000..ddccbfffb2f8
--- /dev/null
+++ b/contribute/style/voice-tone.md
@@ -0,0 +1,49 @@
+---
+title: Voice and tone
+description: Docker's voice and tone
+keywords: style guide, voice, tone, content standards
+---
+
+# Voice
+
+At Docker, we've been the customer. We're developers developing for developers. We speak with experience and knowledge and without arrogance or ego. We want to inform and empower people without being confusing or pushy.
+
+We're not afraid to use a bit of cheeky humor to lighten the conversation (and because we don't take ourselves too seriously) but we're always respectful. We communicate with clarity, empathy, and wit; everything we say should inform and encourage.
+
+We align our tone of voice and content with our virtues. The most important principles we follow when we write are the 4Cs:
+
+1. **Correct**
+2. **Concise**
+3. **Complete**
+4. **Clear**
+
+We ensure the information is accurate, succinct, thorough, and easy to understand. We keep sentences as simple as possible, but include enough detail for the user to complete the intended task.
+
+All of this means that when we write documentation and UI copy:
+
+1. **We are honest.** We give you all the facts and we don't use misdirection or make ambiguous statements. We don't always have all the answers, but we're doing our best to make life better for developers and we'll tell you how it's going.
+2. **We are concise.** We understand the industry of complex and detailed messaging our users live in because we come from the same world. Docker doesn't bulk up our communication with fluffy words or complex metaphors. We're clear and to the point.
+3. **We are relaxed.** Our demeanor is casual but not lazy, smart but not arrogant, and focused but not cold. Our voice should be welcoming and warm.
+4. **We are inclusive.** Developers are developers no matter how much code they've written. Every person is as much a part of our community as the next. We are accepting of all developers from all industries and experience levels.
+
+# Tone
+
+Docker's tone is usually informal, but we believe it's always more important to be clear over comical. We're relaxed, but we're not inappropriate or unprofessional.
+
+## Friendly tone
+
+Use a tone that's natural, friendly, and respectful without being overly colloquial or full of jargons. Write to inform and empower developers without being confusing or pushy. It’s OK to use contractions as long as the sentence doesn’t become too slangy or informal.
+
+**Avoid overdoing the politeness.** It is good to be friendly and polite, but using ‘please’ in technical documentation or UI copy might be overdoing the politeness.
+
+## Positive language
+
+Use a positive language. Instead of highlighting the limitations and what the users cannot do, emphasize on the positive outcomes.
+
+For example, **instead of**:
+
+“*Features such as Single Sign-on (SSO), Image Access Management, Registry Access Management are not available in Docker Team subscription.”*
+
+**Use**:
+
+“*Features such as Single Sign-on (SSO), Image Access Management, Registry Access Management are available in Docker Business subscription*.”
diff --git a/images/check.svg b/images/check.svg
new file mode 100644
index 000000000000..5c6c6f18f238
--- /dev/null
+++ b/images/check.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/images/contribute.svg b/images/contribute.svg
new file mode 100644
index 000000000000..e42d1209bed4
--- /dev/null
+++ b/images/contribute.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/images/formatting.svg b/images/formatting.svg
new file mode 100644
index 000000000000..6e3e5a54d61f
--- /dev/null
+++ b/images/formatting.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/images/grammar.svg b/images/grammar.svg
new file mode 100644
index 000000000000..175f690a8d31
--- /dev/null
+++ b/images/grammar.svg
@@ -0,0 +1,12 @@
+
+
+
\ No newline at end of file
diff --git a/images/new-page.svg b/images/new-page.svg
new file mode 100644
index 000000000000..2c25bb38ad91
--- /dev/null
+++ b/images/new-page.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/images/terminology.svg b/images/terminology.svg
new file mode 100644
index 000000000000..114a0503a069
--- /dev/null
+++ b/images/terminology.svg
@@ -0,0 +1,16 @@
+
+
+
diff --git a/test.md b/test.md
deleted file mode 100644
index dbda9d3f08e0..000000000000
--- a/test.md
+++ /dev/null
@@ -1,867 +0,0 @@
----
-description: Smoketest page
-title: Testing page
-sitemap: false
-toc_min: 1
----
-
-Welcome to the Docker documentation test page!
-
-This is a demo of components, tags, styles, tools, and strategies we use for the
-docs. We explain the code behind the published page and demo the effects. So, if
-you want to see, for example, how admonitions and notes are coded in markdown,
-read the section on [Admonitions (notes)](test.md#admonitions-notes) on the web
-published page and study the pre-processed `test.md` to see how they are
-implemented. The Docker documentation team uses this page as "note to self"
-reminders. Since we invite docs suggestions and contributions from the
-community, we've always made the test page generally available.
-
-If you want to understand how something in the docs is coded, use this page is
-as a resource.
-
-If, in the course of making docs updates and suggestions, you develop a new
-strategy or component for the docs, feel free to add a demo and explanation to
-this test page and submit a PR for it so we can review and discuss it.
-
-Cool? Let's dive in!
-
-# 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
-greater than `toc_max` then no headings are shown.
-
-### 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/)
-- [a markdown link that opens in a new window](https://docker.com/){: target="_blank" rel="noopener" class="_" }
- (the `class="_"` trick prevents Atom from italicizing the whole rest of the file until it encounters another underscore.)
-
-- [a markdown link to a custom target ID](#custom-target-id)
-
-- 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 specify `org=foo` to use a Github organization other than Docker
-
-- A link to an auto-generated reference page that we pull in during docs builds:
-[/engine/reference/builder/#env](/engine/reference/builder/#env).
-
- - If you can't find a reference page in the `docker.github.io`
- GitHub repository, but see it out on `docs.docker.com`, you can
- surmise that it's probably auto-generated from the codebase.
- (FYI, to view the Markdown source for the file, just click
- **Edit this page** on `docs.docker.com`. But don't use that URL in your docs.)
-
- - Go to the file in a web browser, grab everything after the domain name
- from the URL, and use that as the link in your docs file.
-
- - Keep in mind that this link doesn't resolve until you merge the PR and
- your docs are published on [docs.docker.com](/).
-
-{: id="custom-target-id"}
-
-#### Using a custom target ID
-
-This topic has a custom target ID above its heading that can be used to link to
-it, in addition to, or instead of, the default concatenated heading style. The
-format of this ID is `{: id="custom-target-id"}`.
-
-You can use custom targets to link to headings or even paragraphs. You link to
-it as you would any other link, using `#custom-target-id` as the ultimate
-target.
-
-An example of a custom target ID in the documentation is the topic on
-[Compose file version 2 topic on CPU and other resources](compose/compose-file/compose-file-v2.md#cpu-and-other-resources).
-It has a long heading that breaks the normal Markdown linking mechanism,
-so we added a custom ID above the target heading.
-
-### Images
-
-- A small cute image: 
-
-- A small cute image that is a link. The extra newline here makes it not show
- inline:
-
- [](https://www.docker.com/)
-
-- A big wide image: 
-
-- The same as above but using HTML:
-
-[Some Bootstrap image classes](https://getbootstrap.com/docs/3.4/css/#images){: target="_blank" rel="noopener" class="_" }
-might be interesting. You can use them with Markdown or HTML images.
-
-- An image using the Bootstrap "thumbnail" class: {: class="img-thumbnail" }
-
-- The same one, but using HTML:
-
-## Videos
-
-To embed a YouTube video on a docs page, open the video on YouTube, click
-**Share** > **Embed** and then copy the code displayed.
-
-For example, the video embedded on the Get Started page has the following code:
-
-```html
-
-```
-
-You can also add a link to a YouTube video like this:
-
-[Docker 101: Introduction to Docker](https://www.youtube.com/watch?v=V9IJj4MzZBc "Docker 101: Introduction to Docker"){:target="_blank" rel="noopener" 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="span"` 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.
-
-
-## 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/](/glossary/).
-
-To update glossary content, edit `_data/glossary.yaml`.
-
-To link to a glossary term, link to `glossary.md#YourGlossaryTerm` (for
-example, [swarm](glossary.md#swarm)).
-
-## Site-wide variables
-
-Look in the top-level `_config.yml` for site-wide variables, such as
-`site.docker_ce_version`. To use them, use Liquid like:
-
-```liquid
-{% raw %}{{ site.docker_ce_version }}{% endraw %}
-```
-
-The current value of `site.docker_ce_version` is
-{{ site.docker_ce_version }}.
-
-## 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
-
-### Assignment
-
-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 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 is 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](https://getbootstrap.com) and [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).
-
-### Tabs
-
-Here are some tabs:
-
-
-
-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 `
-
-#### 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. The
-`data-target` attributes still need to point to unique div IDs.
-
-In this example, selecting `Go` or `Python` in one tab set toggles the
-other tab set to match.
-
-
-
-### 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 takes up 1/3 of the row unless the screen is small,
-then it takes up the whole row.
-
This takes up 1/3 of the row unless the screen is small,
-then it takes up the whole row.
-
This takes up 1/3 of the row unless the screen is small,
-then it takes 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`](https://github.com/docker/docker.github.io/blob/master/_scss/_utilities.scsss),
-along with [FontAwesome icons](http://fontawesome.io/cheatsheet/){: target="_blank" rel="noopener" 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" rel="noopener" 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" rel="noopener" class="_" }. (Here is
-another example, but it uses Javascript, whereas the implementation shown
-[here](https://www.bootply.com/89084){: target="_blank" rel="noopener" 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/compose-file-v3.md#compose-file-structure-and-examples)
-to see another example.
-{: .important-vanilla}
-
-
-
- Docker hello-world example
-
-
-
-$ docker run hello-world
-Unable to find image 'hello-world:latest' locally
-latest: Pulling from library/hello-world
-2db29710123e: Pull complete
-Digest: sha256:cc15c5b292d8525effc0f89cb299f1804f3a725c8d05e158653a563f15e4f685
-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.
- (amd64)
-3. The Docker daemon created a new container from that image which runs the
-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://hub.docker.com/
-
-For more examples and ideas, visit:
- https://docs.docker.com/get-started/
-
-
-
Another Sample
-
-
-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 breaks the Markdown block up.
-This example does it with Markdown. You can't have any blank lines or it breaks the Markdown block up.
-This example does it with Markdown. You can't have any blank lines or it breaks the Markdown block up.
-This example does it with Markdown. You can't have any blank lines or it breaks the Markdown block up.
-This example does it with Markdown. You can't have any blank lines or it breaks the Markdown block up.
-This example does it with Markdown. You can't have any blank lines or it breaks the Markdown block up.
-This example does it with Markdown. You can't have any blank lines or it breaks the Markdown block up.
-{: style="column-count: 3 "}
-
-### Badges
-
-You can have badges. You can also have
-yellow badges or
-red badges.
-
-#### Badges as links
-
-You can make a badge a link. Wrap the `` with an `` (not the other way
-around) so that the text on the badge is still white.
-
-```html
-Test
-```
-
-Test
-
-
-You can also put tooltips on badges (as the example above shows). Keep reading for tooltips.
-
-### Tooltips
-
-To add a tooltip to any element, set `data-toggle="tooltip"` and set a `title`.
-Hovering over the element with the mouse pointer will make it visible. Tooltips
-are not visible on mobile devices or touchscreens, so don't rely on them as the
-only way to communicate important info.
-
-```html
-Test
-```
-
-Test
-
-You can optionally set the `data-placement` attribute to `top`, `bottom`,
-`middle`, `center`, `left`, or `right`. Only set it if not setting it causes
-layout issues.
-
-You don't have to use HTML. You can also set these attributes using Markdown.
-
-```markdown
-This is a paragraph that has a tooltip. We position it to the left so it doesn't align with the middle top of the paragraph (that looks weird).
-{:data-toggle="tooltip" data-placement="left" title="Markdown tooltip example"}
-```
-
-This is a paragraph that has a tooltip. We position it to the left so it doesn't align with the middle top of the paragraph (that looks weird).
-{:data-toggle="tooltip" data-placement="left" title="Markdown tooltip example"}
-
-## Running in-page Javascript
-
-If you need to run custom Javascript within a page, and it depends upon JQuery
-or Bootstrap, make sure the `