diff --git a/_includes/content/beta.md b/_includes/content/beta.md
new file mode 100644
index 0000000000..1b427cf779
--- /dev/null
+++ b/_includes/content/beta.md
@@ -0,0 +1,4 @@
+
+This {{type}} is in beta, which means that it is in active development. Some functionality may change before it becomes generally available.
diff --git a/_includes/content/deprecated.md b/_includes/content/deprecated.md
new file mode 100644
index 0000000000..de071e9a1e
--- /dev/null
+++ b/_includes/content/deprecated.md
@@ -0,0 +1,5 @@
+
+
+**This information is no longer maintained by Segment, and is considered deprecated.** The information on this page may be out of date, and we recommend using guides maintained by the tool or partner organization.
diff --git a/images/Server.svg b/images/Server.svg
new file mode 100644
index 0000000000..f9b18be33e
--- /dev/null
+++ b/images/Server.svg
@@ -0,0 +1,8 @@
+
diff --git a/images/database.svg b/images/database.svg
new file mode 100644
index 0000000000..a8d7da11d5
--- /dev/null
+++ b/images/database.svg
@@ -0,0 +1,10 @@
+
diff --git a/images/filter-organization.svg b/images/filter-organization.svg
new file mode 100644
index 0000000000..6e144b8c7f
--- /dev/null
+++ b/images/filter-organization.svg
@@ -0,0 +1,8 @@
+
diff --git a/images/icon-s-tech-support.svg b/images/icon-s-tech-support.svg
new file mode 100644
index 0000000000..021d0972cd
--- /dev/null
+++ b/images/icon-s-tech-support.svg
@@ -0,0 +1,14 @@
+
+
\ No newline at end of file
diff --git a/images/segment-diagram.png b/images/segment-diagram.png
new file mode 100644
index 0000000000..b351d6126a
Binary files /dev/null and b/images/segment-diagram.png differ
diff --git a/images/segment-diagram2x.png b/images/segment-diagram2x.png
new file mode 100644
index 0000000000..e6557843ad
Binary files /dev/null and b/images/segment-diagram2x.png differ
diff --git a/test.md b/test.md
new file mode 100644
index 0000000000..c4de76b26a
--- /dev/null
+++ b/test.md
@@ -0,0 +1,806 @@
+---
+description: Smoketest page
+title: Testing page
+hide_from_sitemap: true
+toc_min: 1
+---
+
+Welcome to the 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
+
+Our pages use the H1 heading for the Title of the page, as set in the `title:` frontmatter. It's included in this page just so you can see and test the formatting. :)
+
+ 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 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/)
+https://github.com/docker/docker.github.io/tree/master/docker-cloud/images
+- [a markdown link that opens in a new window](https://segment.com/){: target="_blank" 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
+
+### Images
+
+- A small cute image: 
+
+- A small cute image that is a link. The extra newline here makes it not show
+ inline:
+
+ [](https://www.segment.com/)
+
+ - A big wide image: 
+
+- The same as above but 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: {: class="img-thumbnail" }
+
+- The same one, but using HTML:
+
+## Videos
+
+You can add a link to a YouTube video like this:
+
+[Drop Events using Destination Filters](https://www.youtube.com/watch?v=47dhAF1Hoco "Drop Events using Destination Filters"){:target="_blank" class="_"}
+
+
+## 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.
+
+
+## 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".
+
+
+## Code blocks
+
+You can tell Rouge how to style your code block with a "cue". If you leave off the cue, it tries to guess and usually gets it wrong. These are just a few of the available cues.
+
+### 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
+
+Warning: Syntax highlighting breaks easily for JSON if the code you present is
+not a valid JSON document. Try running your snippet through [this
+linter](http://jsonlint.com/) to make sure it's valid, and remember: there is no
+syntax for comments in 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
+
+```md
+# Hello
+```
+
+### ini
+
+```ini
+[supervisord]
+nodaemon=true
+
+[program:sshd]
+command=/usr/sbin/sshd -D
+```
+
+### Dockerfile
+
+To enable syntax highlighting for Dockerfiles, use the `conf` lexer, for now.
+In the future, native Dockerfile support is coming to Rouge.
+
+```conf
+#
+# 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
+```
+
+
+## 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 }}`.
+
+### Image formatting
+
+This image was originally created on a white background and converted to a transparent background (or so it seems). In night-mode, the text still shows traces of the white and looks garbled. To fix this, we apply a white background inline with a class defined in _scss/_night-mode.css (and incorporated into style.css): `img.white-bg { background-color: white; }`.
+
+{: .white-bg}
+
+
+
+---
+
+
+
+
+
+
+
+TODO
+
+
+Things we're not using:
+- Include syntax links to github prs.
+- Auto generated reference page
+- `id` liquid template, for `custom-target-id`
+
+
+## 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?term=YourGlossaryTerm` (for
+example, [swarm](glossary.md?term=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 }}.
+
+
+
+## Admonitions (notes)
+
+Current styles for admonitions in
+[`_scss/_notes.scss`](https://github.com/docker/docker.github.io/blob/master/_scss/_notes.scss)
+support these broad categories of admonitions:
+
+- Notes (no Liquid tag required) (deprecated)
+- Important, which use the `{: .important}` tag
+- Warning , which use the `{: .warning}` tag
+
+The new styles include prepended icons, color sidebars, and bold color titles
+for multi-paragraph notes, but no auto-prepended text. These are defined in a
+way that does not impact admonitions formatted with the original styles, so
+notes in your published documents are not adversely affected.
+
+Examples are shown in the following sections.
+
+### Note (Deprecated)
+
+Notes are deprecated and should not longer be used. Use important or warning instead.
+
+A standard note is formatted like this:
+
+```
+> Handling transient errors
+>
+> 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.
+```
+
+It renders like this with a colored sidebar and icon:
+
+
+
+Notes were previously formatted like this:
+
+```
+> **Note**: This is a note using the old note style.
+```
+
+These will still render as a note with a colored sidebar to the left but no icon will be added.
+
+### Important
+
+Add the `important` class to your blockquotes if you want to tell users to be careful about something:
+
+```
+> Pssst, wanna know something?
+>
+> You include a small description here telling users to be on the lookout
+{: .important}
+```
+
+It renders like this with a colored sidebar and icon:
+
+
+
+### Warning
+
+Use the `warning` class to let people know this is dangerous or they should pay close attention to this part of the road before moving on:
+
+```
+> Ouch, don't do that!
+>
+> Sticking your finger in an electrical outlet can result in an electric shock.
+>
+> You can also add more paragraphs here if your explanation is super complex.
+{: .warning}
+```
+
+It will render like this with a colored sidebar and icon:
+
+
+
+
+## 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:
+
+
+
+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`](/_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 hello-world example
+
+
+
+$ 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://hub.docker.com/
+
+For more examples and ideas, visit:
+ https://docs.docker.com/engine/userguide/
+
+
+
+
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 `
+
+[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: {: class="img-thumbnail" }
+
+- The same one, but using HTML: 
+
+## Videos
+
+You can add a link to a YouTube video like this:
+
+[Drop Events using Destination Filters](https://www.youtube.com/watch?v=47dhAF1Hoco "Drop Events using Destination Filters"){:target="_blank" class="_"}
+
+
+## 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 `