Staging (#294)

* jekyll redirect from

* Organizations rev (#262)

* Organizations revisions initial commit.

* API doc updates

* Fix absolute link causing build failure.

* Add import to org article, and downstream order changes.

* Bitwarden 101 videos: 1st steps toward proliferating these throughout /help.

* Added 'Create Your Account' article, which references B101 Videos.

* About SSO redirect & promote importing for orgs up the list

* Create Org FAQs & trim Feature FAQs accordingly.

* Image for Org FAQs

* Move 'About the Business Portal' to Orgs category, and re-order accordingly.

* Final edits.

* Dchoi/bootstrap upgrade (#264)

* bootstrap 4 upgrade and cleanup update gulp tasks

* bootstrap package updates

* renaming file convention

* general outline of help outline

* bitwarden help cleanup

* article cleanup

* article general styling complete

* bootstrap help page upgrades

* sidebar updates

* Dchoi/bootstrap upgrade (#267)

* bootstrap 4 upgrade and cleanup update gulp tasks

* bootstrap package updates

* renaming file convention

* general outline of help outline

* bitwarden help cleanup

* article cleanup

* article general styling complete

* bootstrap help page upgrades

* sidebar updates

* toc dynamic and more updates

* fix callout conditions

* sidebar collapse functionality added

* sidebar header toggle functionality

* sidebar article fixes

* Update sidebar.html

Fix sidebar Release Notes link.

* Update releasenotes.md

Remove unnecessary category tag.

* Delete release-notes.md

Remove unnecessary category.

* Update why-choose-bitwarden-for-your-team.md

Test table image differentiation

* Update why-choose-bitwarden-for-your-team.md

Second image differentiation test

* removed links from category breadcrumb and replaced with badges

Co-authored-by: fred_the_tech_writer <69817454+fschillingeriv@users.noreply.github.com>

404.html

@@ -4,13 +4,11 @@ title: Page Not Found
 permalink: /404.html
 ---
 
-<div class="container">
+<h1 class="article-header">
-    <h1 class="page-header">
     <i class="fa fa-frown-o"></i>
-        Page Not Found
+    {{page.title}}
-    </h1>
+</h1>
-    <p>
+<p>
     The page you are looking for is no longer available at this address. It may have moved. Try searching for
     it using the search box above or navigate back to the <a href="/">home page</a> and start over.
-    </p>
+</p>
-</div>

_articles/account/biometrics.md

@@ -91,9 +91,9 @@ When biometrics are configured and your vault is locked, you will have a new but
 
 {% image /biometrics/windows.png Configuring Hello in Windows %}
 
-{%note%}
+{% callout info %}
 If you do not see the option to enable Windows Hello within the Desktop preferences, you may need to install the [Microsoft Visual C++ Redistributable](https://support.microsoft.com/en-us/help/2977003/the-latest-supported-visual-c-downloads).
-{%endnote%}
+{% endcallout %}
 
 {% image /biometrics/hello-unlock.png Prompt to unlock with Windows Hello %}
 

_articles/account/bitwarden-field-guide-two-step-login.md

@@ -79,12 +79,12 @@ Reddit will prompt you for your password, and then present this dialog
 
 {% image two-step/field-guide/reddit-2fa-setup.png %}
 
-{% note %}
+{% callout info %}
 **About Authy and Google Authenticator**<br>
 Both of these applications serve the authenticator function well. However, ONLY Authy has the ability to backup your two-factor authentication pairings.
 This means that if you rely on Google Authenticator and you lose your phone, you may end up locked out of accounts if you do not have recovery codes for each account.
 With Authy, as long as you have your Authy password, you can install Authy on a new device and recover all of your two-step login pairings. [Update May 7, 2020. Google introduced portability of Google Authenticator 2-Step Verification codes across Android devices]
-{% endnote %}
+{% endcallout %}
 
 In this case, we’ll use the Authy application as the authenticator. We open it, add an account, scan the barcode and then Authy presents a 6 digit token.
 
@@ -92,18 +92,18 @@ In this case, we’ll use the Authy application as the authenticator. We open it
 
 With that token, we can complete the two-factor authentication setup for Reddit!
 
-{% warning %}
+{% callout warning %}
 Reddit will now offer an option next to the two-factor authentication setting to ‘Get your backup codes.’ This is a critical step. Should you ever lose the ability to complete two-factor authentication with Authy, you can use one of your backup codes to access Reddit.
-{% endwarning %}
+{% endcallout %}
 
 While two-factor authentication adds an extra layer of protection to our accounts, it also makes it harder to recover should things go awry. Therefore always approach with attention and secure your backup codes in a place you will remember...maybe even in Bitwarden, unless the 2FA is being used to get into Bitwarden itself.
 
 {% image two-step/field-guide/two-step-login-bitwarden-authy-reddit.png %}
 
-{% note %}
+{% callout info %}
 **How Authenticators Work**<br>
 Authy, Google Authenticator, and Bitwarden all operate similarly for authentication using TOTP which stands for Time-based One-Time Password algorithm. At the initiation such as the QR code scan, both the website and the authenticator app share an authentication key. That key is then used to generate time-based tokens which change every several seconds. Without that original authentication key, it is not possible to create the right token at the right time, thereby providing extra protection.
-{% endnote %}
+{% endcallout %}
 
 ### Two-step Login with the Bitwarden Authenticator Application
 

_articles/account/change-your-email.md

@@ -9,9 +9,9 @@ tags: [account, email]
 
 Your email address can only be changed from the [web vault](https://vault.bitwarden.com).
 
-{% warning %}
+{% callout warning %}
 Changing your email address will log you out of all Bitwarden applications.
-{% endwarning %}
+{% endcallout %}
 
 1. Log in to the web vault at <https://vault.bitwarden.com>
 2. Click **Settings** in the top navigation bar
@@ -23,6 +23,6 @@ Changing your email address will log you out of all Bitwarden applications.
 8. Log back in to confirm that you can log in using the new email
 9. Log out and back in to any other Bitwarden applications that you are using. You will eventually be logged out automatically.
 
-{% note %}
+{% callout info %}
 If you have not receive the verification code from Bitwarden after a few minutes, please check your spam folder to see if the message got filtered by mistake. Adding "no-reply@bitwarden.com" to your contacts and whitelist the same domain may help to ensure delivery.
-{% endnote %}
+{% endcallout %}

_articles/account/change-your-master-password.md

@@ -9,9 +9,9 @@ tags: [password, account]
 
 Your master password can only be changed from the [web vault](https://vault.bitwarden.com).
 
-{% warning %}
+{% callout warning %}
 Changing your master password will log you out of all Bitwarden applications.
-{% endwarning %}
+{% endcallout %}
 
 1. Log in to the web vault at <https://vault.bitwarden.com>
 2. Click **Settings** in the top navigation bar
@@ -25,8 +25,8 @@ Changing your master password will log you out of all Bitwarden applications.
 
 During a password change operation you also have the option to rotate (change) your account's encryption key. Rotating the encryption key is a good idea if you believe that your previous master password was compromised or that your Bitwarden vault's data was stolen from one of your devices.
 
-{% warning %}
+{% callout warning %}
 Rotating your account's encryption key is a sensitive operation, which is why it is not a default option. A key rotation involves generating a new, random encryption key for your account and re-encrypting all vault data using this new key.
 
 Because your account's encryption key changes, any old sessions with a Bitwarden application that you may be logged into with your account will still have the old, incorrect encryption key. If you make any changes to your account's vault data with an old encryption key, that data will become corrupted and unrecoverable. After rotating your account's encryption key it is very important that you completely log out and back in to all Bitwarden applications where you are using that account. Logging out and back in will ensure that your account has downloaded its new encryption key. We will attempt to log you out of all Bitwarden applications automatically, but it may not happen immediately.
-{% endwarning %}
+{% endcallout %}

_articles/account/delete-your-account.md

@@ -9,9 +9,9 @@ tags: [account, delete]
 
 Your account can only be deleted from the [web vault](https://vault.bitwarden.com). Deleting your Bitwarden account permanently deletes your account and all data that is associated with it. Bitwarden does not "soft delete" any data.
 
-{% warning %}
+{% callout warning %}
 This action is permanent and cannot be undone.
-{% endwarning %}
+{% endcallout %}
 
 1. Log in to the web vault at <https://vault.bitwarden.com>
 2. Click **Settings** in the top navigation bar

_articles/account/export-your-data.md

@@ -9,11 +9,11 @@ tags: [export, accounts, csv]
 
 Bitwarden allows you to export your vault data at any time.
 
-{% warning %}
+{% callout warning %}
 Exports contain your vault data in an unencrypted format. You should not store or send the exported file over unsecure channels (such as email). Delete it immediately after you are done using it.
-{% endwarning %}
+{% endcallout %}
 
-{% note %}
+{% callout info %}
 The `.json` file format offers a more complete export of your data and should be used for standard backup procedures. Some non-critical information is not included with the export when using the `.csv` file format.
 
 An exported `.json` file can be opened, read, and modified in a simple text editor like Notepad.
@@ -21,7 +21,7 @@ An exported `.json` file can be opened, read, and modified in a simple text edit
 An exported `.csv` file can be opened, read, and modified in spreadsheet programs such as Microsoft Excel (preferred) or a simple text editor like Notepad.
 
 At this time, exports do not include file attachment data.
-{% endnote %}
+{% endcallout %}
 
 ## From the web vault
 
@@ -30,9 +30,9 @@ At this time, exports do not include file attachment data.
 3. Click **Export Vault** under the **Tools** side navigation
 4. Choose your exported file format, type in your master password, and click **Export Vault**. Your browser will either automatically download the exported file or prompt you to save it.
 
-{% note %}
+{% callout info %}
 Exporting your vault will not include items that belong to an organization. Organization admins can export their organization's vault from the web vault under the organization's admin area in the **Tools** section. Then click **Export Vault** under the **Tools** side navigation.
-{% endnote %}
+{% endcallout %}
 
 ## From the mobile app
 

_articles/account/getting-started-android.md

@@ -12,10 +12,10 @@ See the video and presentation below for tips on getting started with Bitwarden
 
 ## Video - Getting Started with Android
 
-<iframe width="800" height="450" src="https://www.youtube.com/embed/qyFeEZMZpEY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe class="embed-responsive" width="800" height="450" src="https://www.youtube.com/embed/qyFeEZMZpEY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Presentation - Getting Started with Android
 
-<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vRa_zqS3RMgD_KR8PKkyeEurq9yUuHfMrnRBnkIarn_T88jgZ7zEoIYLwbpdLc1uCZrxOUAkn_isZqZ/embed?start=false&loop=false&delayms=3000" frameborder="0" width="800" height="498" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
+<iframe class="embed-responsive" src="https://docs.google.com/presentation/d/e/2PACX-1vRa_zqS3RMgD_KR8PKkyeEurq9yUuHfMrnRBnkIarn_T88jgZ7zEoIYLwbpdLc1uCZrxOUAkn_isZqZ/embed?start=false&loop=false&delayms=3000" frameborder="0" width="800" height="498" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
 
 [Download slideshow](https://drive.google.com/open?id=1RvkGbgP4MnJnRhHkmXwmmnVNsYNR_ZvcS65UURexBak){:target="_blank"}

_articles/account/getting-started-ios.md

@@ -12,10 +12,10 @@ See the video and presentation below for tips on getting started with Bitwarden
 
 ## Video - Getting Started with iOS
 
-<iframe width="800" height="450" src="https://www.youtube.com/embed/LrhMmNTmOno" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe class="embed-responsive" width="800" height="450" src="https://www.youtube.com/embed/LrhMmNTmOno" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ## Presentation - Getting Started with iOS
 
-<iframe src="https://docs.google.com/presentation/d/1ODMT96657H61qhYm1y-Evz2gzStM8zGx_ewKRtTX7u8/embed?start=false&loop=false&delayms=3000" frameborder="0" width="800" height="498" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
+<iframe class="embed-responsive" src="https://docs.google.com/presentation/d/1ODMT96657H61qhYm1y-Evz2gzStM8zGx_ewKRtTX7u8/embed?start=false&loop=false&delayms=3000" frameborder="0" width="800" height="498" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
 
 [Download slideshow](https://docs.google.com/presentation/d/1ODMT96657H61qhYm1y-Evz2gzStM8zGx_ewKRtTX7u8){:target="_blank"}

_articles/account/lost-two-step-device.md

@@ -11,13 +11,13 @@ If you have lost access to the device or method that you use for two-step login
 
 The recovery code is a 32 character alpha-numeric code. You can get your two-step login recovery code in the [web vault](https://vault.bitwarden.com) under **Settings** → **Two-step Login**, then click the **View Recovery Code** button. We recommend that you print your recovery code and keep it in a safe place.
 
-{% warning %}
+{% callout warning %}
 Without your recovery code, two-step login can permanently lock you out of your Bitwarden account. It is very important to have your recovery code if you plan to use two-step login. Bitwarden support will not be able to assist you if you lose access to your account.
-{% endwarning %}
+{% endcallout %}
 
-{% tip %}
+{% callout success %}
 If you still have an active login session open in the browser extension or a mobile application you can export your data from **Tools** → **Export Vault** so that you can import it back in after the account has been deleted and you have registered again.
-{% endtip %}
+{% endcallout %}
 
 ## Recovering Your Account
 
@@ -25,9 +25,9 @@ Please use this link to enter your 2FA recovery code: <https://vault.bitwarden.c
 
 The recovery process will deactivate two-step login on the account so that you can log in without requiring the normal two-step login verification code. You will need to re-enable two-step login in the web vault if you wish to continue using it after recovering the account.
 
-{% warning %}
+{% callout warning %}
 The recovery process also resets your account's recovery code. Make sure that you take note of your new recovery code when re-enabling two-step login.
-{% endwarning %}
+{% endcallout %}
 
 If you do not have your recovery code, unfortunately there is no way to fully recover the account. The only option to gain access to the account again is to delete the account so that you can register again and start over. Note that deleting the account will also delete all of your stored login data associated with the account.
 

_articles/account/managing-items.md

@@ -7,16 +7,6 @@ popular: false
 tags: [account, items, import, delete, trash, clone]
 ---
 
-## Table of Contents
-- [About Managing Items](#about-managing-items)
-- [Adding items](#adding-items)
-- [Importing items](#importing-items)
-- [Troubleshooting Imports](#troubleshooting-imports)
-- [Import FAQs](#import-faqs)
-- [Cloning an item](#cloning-an-item)
-- [Deleting an item](#deleting-an-item)
-- [Items in the trash](#items-in-the-trash)
-
 ## About Managing Items
 
 Managing the items in your vault is key to making sure that you secure, have access to, and can share the correct information with friends, family, teams, and colleagues.
@@ -51,7 +41,7 @@ You can find more details about importing items and supported import formats [he
 **A:** The Bitwarden import tool does not perform duplicate entry detection on import. If you run an import on an existing vault, or import multiple times, your data may be duplicated.
 ### **Q:How do I clean up duplicates?**
 **A:** We recommend exporting the data from your vault into a CSV/JSON file and performing a vault purge to delete your data.
-  {% warning %} Performing a vault purge is permanent and cannot be undone. Once the vault has been emptied and the CSV/JSON file has been pruned of any duplicates, simply re-import your data.{% endwarning %}
+  {% callout warning %} Performing a vault purge is permanent and cannot be undone. Once the vault has been emptied and the CSV/JSON file has been pruned of any duplicates, simply re-import your data.{% endcallout %}
 
 ## Troubleshooting Import Errors
 
@@ -69,7 +59,7 @@ Simply select clone under the item’s action menu:
 
 {% image /manage-items/item-clone.png %}
 
-{%note%}Note - when cloning an item in an organization vault, the user must view the vault from the organization, not the user’s personal vault {%endnote%}
+{% callout info %}Note - when cloning an item in an organization vault, the user must view the vault from the organization, not the user’s personal vault {% endcallout %}
 
 ## Deleting an item
 

_articles/account/setup-two-step-login-authenticator.md

@@ -11,9 +11,9 @@ Bitwarden supports two-step login by using a third-party authenticator app such
 
 ## Enable Two-step Login with Authenticator App
 
-{% warning %}
+{% callout warning %}
 Two-step login can permanently lock you out of your account. It is very important that you write down and keep your [two-step login recovery code]({% link _articles/account/lost-two-step-device.md %}) in a safe place in the event that you lose access to your authenticator app.
-{% endwarning %}
+{% endcallout %}
 
 1. Log in to the web vault at <https://vault.bitwarden.com>
 2. Click **Settings** in the top navigation bar, then click **Two-step Login** from the side menu.

_articles/account/setup-two-step-login-duo.md

@@ -35,9 +35,9 @@ It is recommended to install the free [Duo Mobile](https://duo.com/product/trust
 
 ## Enable Two-step Login with Duo
 
-{% warning %}
+{% callout warning %}
 Two-step login can permanently lock you out of your account. It is very important that you write down and keep your [two-step login recovery code]({% link _articles/account/lost-two-step-device.md %}) in a safe place in the event that you lose access to your normal two-step login methods.
-{% endwarning %}
+{% endcallout %}
 
 1. Log in to the web vault at <https://vault.bitwarden.com>.
 2. Depending on your account type:

_articles/account/setup-two-step-login-email.md

@@ -11,9 +11,9 @@ Bitwarden supports two-step login via email. A verification code will be emailed
 
 ## Enable Two-step Login with Email
 
-{% warning %}
+{% callout warning %}
 Two-step login can permanently lock you out of your account. It is very important that you write down and keep your [two-step login recovery code]({% link _articles/account/lost-two-step-device.md %}) in a safe place in the event that you lose access to your email.
-{% endwarning %}
+{% endcallout %}
 
 1. Log in to the web vault at <https://vault.bitwarden.com>
 2. Click **Settings** in the top navigation bar, then click **Two-step Login** from the side menu.

_articles/account/setup-two-step-login-u2f.md

@@ -9,20 +9,20 @@ tags: [two-step login, 2fa, two factor authentication, account, u2f, fido]
 
 Bitwarden supports two-step login via [FIDO U2F](https://www.yubico.com/solutions/fido-u2f/){:target="_blank"}. Any FIDO U2F certified device will work. We recommend a [YubiKey](https://www.yubico.com/products/yubikey-hardware/){:target="_blank"}.
 
-{% note %}
+{% callout info %}
 Due to platform limitations, FIDO U2F cannot be used on all Bitwarden applications. You should enable another two-step login provider so that you can access your account when FIDO U2F cannot be used.
 
 Supported platforms:
 
 - Web vault on a desktop/laptop with a U2F enabled browser (Chrome, Opera, Vivaldi, or [Firefox with FIDO U2F enabled](https://www.yubico.com/2017/11/how-to-navigate-fido-u2f-in-firefox-quantum/){:target="_blank"}).
 - Browser extensions on Chrome, Opera, Vivaldi, or [Firefox with FIDO U2F enabled](https://www.yubico.com/2017/11/how-to-navigate-fido-u2f-in-firefox-quantum/){:target="_blank"}.
-{% endnote %}
+{% endcallout %}
 
 ## Enable Two-step Login with FIDO U2F
 
-{% warning %}
+{% callout warning %}
 Two-step login can permanently lock you out of your account. It is very important that you write down and keep your [two-step login recovery code]({% link _articles/account/lost-two-step-device.md %}) in a safe place in the event that you lose access to your FIDO U2F security key.
-{% endwarning %}
+{% endcallout %}
 
 1. Log in to the web vault at <https://vault.bitwarden.com>
 2. Click **Settings** in the top navigation bar, then click **Two-step Login** from the side menu.

_articles/account/setup-two-step-login-yubikey.md

@@ -9,7 +9,7 @@ tags: [two-step login, 2fa, two factor authentication, account, yubikey, yubi, y
 
 Bitwarden supports two-step login via [YubiKey](https://www.yubico.com){:target="_blank"}. Any YubiKey that supports [OTP capabilities](https://www.yubico.com/products/yubikey-hardware/compare-yubikeys/){:target="_blank"} can be used. This includes all YubiKey 4 and 5 series devices as well as YubiKey NEO and YubiKey NFC.
 
-{% note %}
+{% callout info %}
 Due to platform limitations, YubiKeys cannot be used on all Bitwarden applications. You should enable another two-step login provider so that you can access your account when YubiKeys cannot be used.
 
 Supported platforms:
@@ -20,13 +20,13 @@ Supported platforms:
 - CLI on a device with a USB port that can accept your YubiKey.
 - Android on a device with [NFC capabilities](https://en.wikipedia.org/wiki/List_of_NFC-enabled_mobile_devices){:target="_blank"} or a USB port that can accept your YubiKey. Read more [here](https://forum.yubico.com/viewtopic1c5f.html?f=26&t=1302){:target="_blank"}.
 - iOS on a device with [NFC capabilities](https://en.wikipedia.org/wiki/List_of_NFC-enabled_mobile_devices){:target="_blank"} or via lightning port with YubiKey 5Ci.
-{% endnote %}
+{% endcallout %}
 
 ## Enable Two-step Login with YubiKey
 
-{% warning %}
+{% callout warning %}
 Two-step login can permanently lock you out of your account. It is very important that you write down and keep your [two-step login recovery code]({% link _articles/account/lost-two-step-device.md %}) in a safe place in the event that you lose access to your YubiKey.
-{% endwarning %}
+{% endcallout %}
 
 1. Log in to the web vault at <https://vault.bitwarden.com>
 2. Click **Settings** in the top navigation bar, then click **Two-step Login** from the side menu.

_articles/directory-connector/azure-active-directory.md

@@ -16,17 +16,6 @@ This article will cover how to connect the Bitwarden Directory Connector applica
 - Install Bitwarden Directory Connector
 - Using Directory Connector, log into your Bitwarden account and select your enterprise organization
 
-## Table of Contents
-
-- [Create a New Application Registration](#create-a-new-application-registration)
-- [Grant Application Permissions](#grant-application-permissions)
-- [Create Application Secret Key](#create-application-secret-key)
-- [Get Your Application ID](#get-your-application-id)
-- [Get Your Tenant Hostname](#get-your-tenant-hostname)
-- [Configure Directory Connector](#configure-directory-connector)
-- [Testing](#testing)
-
-
 ## Create a New Application Registration
 
 1. Go to <https://portal.azure.com>
@@ -90,8 +79,8 @@ Congrats! You are done configuring Azure Active Directory with the Bitwarden Dir
 
 ## Testing
 
-{% note %}
+{% callout info %}
 It can take up to 15 minutes for the granted permissions for your application to properly propagate. You may receive "Insufficient privileges to complete the operation" errors in the meantime.
-{% endnote %}
+{% endcallout %}
 
 Test your configuration by running a sync test. You should see your Azure Active Directory groups and/or users printed to the screen.

_articles/directory-connector/directory-sync.md

@@ -18,9 +18,9 @@ The following directories are supported:
 - Okta
 - OneLogin
 
-{% note %}
+{% callout info %}
 Directory sync is only available to Teams and Enterprise organizations.
-{% endnote %}
+{% endcallout %}
 
 ## Bitwarden Directory Connector Application
 
@@ -30,34 +30,6 @@ You can install and run Directory Connector as an agent on the server that hosts
 
 {% image directory-connector/app.png %}
 
-## Table of Contents
-
-- [Download and Install](#download-and-install)
-- [Configure environment](#configure-environment)
-- [Log in to your Bitwarden organization account](#log-in-to-your-bitwarden-organization-account)
-- [Configure the directory connection](#configure-the-directory-connection)
-- [Configure sync options](#configure-sync-options)
-- [Test a sync](#test-a-sync)
-- [Perform a manual sync](#perform-a-manual-sync)
-- [Sync automatically](#sync-automatically)
-- [Clear sync cache](#clear-sync-cache)
-- [Command-line Interface](#command-line-interface)
-  * [Quick Start](#quick-start)
-  * [Download and Install](#download-and-install-1)
-  * [Shared Data](#shared-data)
-  * [Secret Storage](#secret-storage)
-  * [Explore the CLI](#explore-the-cli)
-  * [Test Command](#test-command)
-  * [Sync Command](#sync-command)
-  * [Last Sync Command](#last-sync-command)
-  * [Config Command](#config-command)
-  * [Data File Command](#data-file-command)
-  * [Clear Cache Command](#clear-cache-command)
-  * [Update Command](#update-command)
-  * [Version Option](#version-option)
-  * [Enums](#enums)
-- [Source code](#source-code)
-
 ## Download and Install
 
 You can download the latest version of the Bitwarden Directory Connector application from our [GitHub releases page](https://github.com/bitwarden/directory-connector/releases){:target="_blank"} or by using one of the official links below:
@@ -108,11 +80,11 @@ By default the Directory Connector communicates with the Bitwarden public cloud
 2. Go to the **Settings** tab.
 3. Set each configuration setting from the **Sync** section. Some settings are dependent on the **Type** of directory you have configured.
 
-{% note %}
+{% callout info %}
 The syntax for user and group filters is different for each type of directory. Learn more about how user and group filters work in the following article:
 
 - [Configuring user and group sync filters]({% link _articles/directory-connector/user-group-filters.md %})
-{% endnote %}
+{% endcallout %}
 
 ## Test a sync
 
@@ -164,13 +136,13 @@ A command-line interface (CLI) tool is also available to connect to and sync you
 
 See the [download and install](#download-and-install) section above for links to download the CLI executable for your platform.
 
-{% note %}
+{% callout info %}
 When extracting the zip, make sure that the included `keytar.node` dependency remains in the same directory as the main `bwdc` executable.
 
 Linux users must have `libsecret` installed, which is usually already available on most systems. Example:
 
     apt-get install libsecret-1-0
-{% endnote %}
+{% endcallout %}
 
 ### Shared Data
 
@@ -199,9 +171,9 @@ If a secure storage environment is not available, you can configure the Director
 
 With plaintext storage enabled, you can then configure all settings directly, in plaintext, from the `data.json` database file.
 
-{% note %}
+{% callout info %}
 Plaintext storage of secrets is not compatible with the Directory Connector desktop application. You should only use the Directory Connector CLI with plaintext storage of secrets.
-{% endnote %}
+{% endcallout %}
 
 ### Explore the CLI
 
@@ -256,9 +228,9 @@ You can also use the `config` command to set parameters that require secure stor
 
 Additional configuration settings can be modified in the Bitwarden Directory Connector desktop application or by editing the `data.json` database file directly in your favorite text editor. [Read more about shared data](#shared-data).
 
-{% note %}
+{% callout info %}
 You should avoid opening or modifying the `data.json` database file while the Directory Connector desktop application or CLI executable is running.
-{% endnote %}
+{% endcallout %}
 
 ### Data File Command
 
@@ -282,9 +254,9 @@ The `update` command allows you to check if your Directory Connector CLI is up t
 
 A URL to download a new version of the CLI executable will be returned to you.
 
-{% note %}
+{% callout info %}
 If you are also using the Directory Connector desktop application, it is important that you keep them both up to date and that their versions match. Running two different versions of the Directory Connector desktop application and Directory Connector CLI may cause unexpected issues.
-{% endnote %}
+{% endcallout %}
 
 ### Version Option
 
@@ -308,9 +280,9 @@ If you receive an error message referring to the libsecret shared object `Error:
 | Email         | 1     |
 | Yubikey       | 3     |
 
-{% note %}
+{% callout info %}
 Other two-step login methods such as FIDO U2F and Duo are not supported by the CLI.
-{% endnote %}
+{% endcallout %}
 
 ## Source code
 

_articles/directory-connector/gsuite-directory.md

@@ -16,20 +16,11 @@ This article will cover how to connect the Bitwarden Directory Connector applica
 - Install Bitwarden Directory Connector
 - Using Directory Connector, log into your Bitwarden account and select your enterprise organization
 
-## Table of Contents
-
-- [Create a Google Cloud Project](#create-a-google-cloud-project)
-- [Enable the Admin SDK API for Your Project](#enable-the-admin-sdk-api-for-your-project)
-- [Create & Configure a Service Account](#create--configure-a-service-account)
-- [Configure G Suite Security](#configure-g-suite-security)
-- [Configure Directory Connector](#configure-directory-connector)
-- [Testing](#testing)
-
 ## Create a Google Cloud Project
 
-{% note %}
+{% callout info %}
 If you already have a Google Cloud project available, you can skip this step and re-use it here.
-{% endnote %}
+{% endcallout %}
 
 1. Go to <https://console.cloud.google.com/home>
 2. Click the **Create** project button
@@ -63,7 +54,7 @@ If you already have a Google Cloud project available, you can skip this step and
 8. Select the options button next to your service account, and select **Edit**.
    {% image directory-connector/gsuite/edit-service-account.png %}
 9. Check the box "Enable G Suite Domain-wide Delegation", enter anything for "Product name for the consent screen" and click **Save**.
-   {% note %}"Enable G Suite Domain-wide Delegation" is only required on some older G Suite accounts. Newer G Suite accounts will automatically have domain-wide delegation enabled for all service accounts. If you do not see the "Enable G Suite Domain-wide Delegation" checkbox option available for your service account, you can assume it is already enabled.{% endnote %}
+   {% callout info %}"Enable G Suite Domain-wide Delegation" is only required on some older G Suite accounts. Newer G Suite accounts will automatically have domain-wide delegation enabled for all service accounts. If you do not see the "Enable G Suite Domain-wide Delegation" checkbox option available for your service account, you can assume it is already enabled.{% endcallout %}
    {% image directory-connector/gsuite/tick-gsuite.png %}
 1.  Click **View Client ID** and you'll see the Client ID on screen. You will need the Client ID to configure security within G Suite. Highlight the Client ID and copy it to your clipboard.
    {% image directory-connector/gsuite/view-client-id.png %}

_articles/directory-connector/ldap-directory.md

@@ -56,9 +56,9 @@ The following directory configuration options can be set:
 2. Go to the **Settings** tab.
 3. Configure the appropriate **Sync** settings for your Active Directory or LDAP server.
 
-{% note %}
+{% callout info %}
 If you are using Active Directory, many of these settings are predetermined for you and are therefore are not shown.
-{% endnote %}
+{% endcallout %}
 
 {% table %}
 

_articles/directory-connector/okta-directory.md

@@ -16,12 +16,6 @@ This article will cover how to connect the Bitwarden Directory Connector applica
 - Install Bitwarden Directory Connector
 - Using Directory Connector, log into your Bitwarden account and select your enterprise organization
 
-## Table of Contents
-
-- [Create an API token](#create-an-api-token)
-- [Configure Directory Connector](#configure-directory-connector)
-- [Testing](#testing)
-
 ## Create an API token
 
 1. Log into your Okta Developer Console

_articles/directory-connector/onelogin-directory.md

@@ -16,12 +16,6 @@ This article will cover how to connect the Bitwarden Directory Connector applica
 - Install Bitwarden Directory Connector
 - Using the Directory Connector, log into your Bitwarden account and select your enterprise organization
 
-## Table of Contents
-
-- [Creating API Credentials](#creating-api-credentials)
-- [Configure Directory Connector](#configure-directory-connector)
-- [Testing](#testing)
-
 ## Creating API credentials
 
 1. Log into your OneLogin Adminsitration portal.
@@ -42,7 +36,7 @@ This article will cover how to connect the Bitwarden Directory Connector applica
 4. Enter the **Client ID** and **Client Secret** copied from the previous steps.
 5. Select the correct Region.
 6. Configure sync options. It is recommended to use the **Overwrite existing organization users based on current sync settings** option with OneLogin.
-{% tip %}For minimal testing check "Sync users".{% endtip %}
+{% callout success %}For minimal testing check "Sync users".{% endcallout %}
 
 Congrats! You are done configuring OneLogin with the Bitwarden Directory Connector.
 

_articles/directory-connector/user-group-filters.md

@@ -12,13 +12,6 @@ You can configure the Bitwarden Directory Connector application to use filters t
 
 The syntax for filtering is different for each directory server type and is covered in detail below.
 
-## Table of Contents
-
-- [Active Directory and Other LDAP Directories](#active-directory-and-other-ldap-directories)
-- [Azure Active Directory](#azure-active-directory)
-- [G Suite](#g-suite)
-- [Okta](#okta)
-
 ## Active Directory and Other LDAP Directories
 
 The group and user filters can be in the form of any LDAP compatible search filter. Additionally, Active Directory provides a few more advanced options as well as a few limitations when writing search filters as opposed to other more standard LDAP directories. You can read more about writing LDAP search filters here: <https://msdn.microsoft.com/en-us/library/windows/desktop/aa746475(v=vs.85).aspx>
@@ -31,9 +24,9 @@ Search for all entries that have objectClass=user AND cn that contains the word
 (&(objectClass=user)(cn=*Marketing*))
 ```
 
-{% note %}
+{% callout info %}
 Active Directory does not implement extensible matching, the following examples won't work with it.
-{% endnote %}
+{% endcallout %}
 
 Find entries with an OU component of their DN which is either 'Miami' or 'Orlando'.
 
@@ -47,9 +40,9 @@ To exclude entities which match an expression, use '!'. Find all Chicago entries
 (&(ou:dn:=Chicago)(!(ou:dn:=Wrigleyville)))
 ```
 
-{% note %}
+{% callout info %}
 The following examples are written for Active Directory. In order to use them for something such as OpenLDAP the attributes will need to be changed.
-{% endnote %}
+{% endcallout %}
 
 Users in the 'Heroes' group
 
@@ -71,9 +64,9 @@ The Microsoft Graph API does not provide a way to filter groups and users direct
 
 #### Groups
 
-{% note %}
+{% callout info %}
 If you are filtering groups your user filter will only apply to users from the groups returned.
-{% endnote %}
+{% endcallout %}
 
 ```
 include:Group A,Sales People,My Other Group
@@ -111,9 +104,9 @@ excludeGroup:97b9ff2a-7d4f-463d-a925-efb1677fd40d
 
 The G Suite APIs do not provide a way to filter groups directly, however, you can use our custom filtering syntax that allows you to exclude or include a comma separated list of group names.
 
-{% note %}
+{% callout info %}
 If you are filtering groups your user filter will only apply to users from the groups returned.
-{% endnote %}
+{% endcallout %}
 
 #### Examples
 

_articles/faqs/hosting-faqs.md

@@ -8,28 +8,9 @@ hidden: false
 tags: []
 ---
 
-## Table of Contents
-
-- [Bitwarden Server service/user account and optional systemd service configuration)](#bitwarden-server-service-user-account-and-optional-systemd-service-configuration)
-  * [Certificate Setup for Private CA, on-premises or self-hosted](#certificate-setup-for-private-ca-on-premises-or-self-hosted)
-  * [Certificate Setup for Public CA, On-premises and self-hosted](#certificate-setup-for-public-ca-on-premises-and-self-hosted)
-  * [Change Server Name](#change-server-name)
-  * [Gmail self-hosted config](#gmail-self-hosted-config)
-  * [High Availability](#high-availability)
-  * [Let's Encrypt Manual Update - issue or domain and server name change](#let-s-encrypt-manual-update-issue-or-domain-and-server-name-change)
-  * [Migrate cloud to on-premise](#migrate-cloud-to-on-premise)
-- [Restore Bitwarden Server Detailed and Restore From Backup](#restore-bitwarden-server-detailed-and-restore-from-backup)
-  * [Custom Server Ports](#custom-server-ports)
-  * [SMTP Config with Mail Service Options](#smtp-config-with-mail-service-options)
-  * [Trust a private CA issued or Self-signed certificate for Bitwarden Client](#trust-a-private-ca-issued-or-self-signed-certificate-for-bitwarden-client)
-  * [Q: When does an Organization Invitation expire?](#q-when-does-an-organization-invitation-expire)
-  * [Q: When does an Offline Vault session expire?](#q-when-does-an-offline-vault-session-expire)
-  * [Q: How long does an application Remember Me for 2FA?](#q--how-long-does-an-application-remember-me-for-2fa)
-  * [Q: How long are Event Logs stored?](#q-how-long-are-event-logs-stored)
-
 ## Bitwarden Server service/user account and optional systemd service configuration)
 
-{%note%}
+{% callout info %}
 You will want to configure the Bitwarden Server to use a `bitwarden` service account. $USER=bitwarden You will want to have your installation owned by the bitwarden service account, and you should be logged in as bitwarden.
 
 After those are verified, you will want to make sure the UID and GID in the /bwdata/env/uid.env file are set to your bitwarden service account id numbers in Linux. When using the bitwarden service account you will also need to follow these steps:
@@ -41,7 +22,7 @@ After those are verified, you will want to make sure the UID and GID in the /bwd
 5. Set permissions on bitwarden service file under systemd.  sudo chmod 644 /etc/systemd/system/bitwarden.service
 6. Optional (reload for testing)  systemctl daemon-reload
 7. Add service to start with system boot.  sudo systemctl enable bitwarden.service
-{%endnote%}
+{% endcallout %}
 
 ### Certificate Setup for Private CA, on-premises or self-hosted
 

_articles/faqs/product-faqs.md

@@ -7,42 +7,6 @@ popular: true
 hidden: false
 tags: []
 ---
-## Table of contents
-
-- [**Q: How do I change a collection via the CLI?**](#q-how-do-i-change-a-collection-via-the-cli)
-- [**Q: Can I install Bitwarden without Google Play?**](#q-can-i-install-bitwarden-without-google-play)
-- [**Q: How do I enable Autofill in Android?**](#q-how-do-i-enable-autofill-in-android)
-- [**Q: How do I view attachments?**](#q-how-do-i-view-attachments)
-- [**Q: Can Bitwarden restore my individual vault?**](#q-can-bitwarden-restore-my-individual-vault)
-- [**Q: How do I backup my self-hosted server?**](#q-how-do-i-backup-my-self-hosted-server)
-- [**Q: How do I configure custom fields?**](#q-how-do-i-configure-custom-fields)
-- [**Q: How do I import my data if I don’t see my service on the import options?**](#q-how-do-i-import-my-data-if-i-dont-see-my-service-on-the-import-options)
-- [**Q: How do I delete an item?**](#q-how-do-i-delete-an-item)
-- [**Q: Can I use Directory connector to sign into Bitwarden?**](#q-can-i-use-directory-connector-to-sign-into-bitwarden)
-- [**Q: How can I disable Firefox Autofill?**](#q-how-can-i-disable-firefox-autofill)
-- [**Q: Does Bitwarden have a way for me to let someone into my account if I am unable to log in?**](#q-does-bitwarden-have-a-way-for-me-to-let-someone-into-my-account-if-i-am-unable-to-log-in)
-- [**Q: How can I enable Auto-fill On Page Load?**](#q-how-can-i-enable-auto-fill-on-page-load)
-- [**Q: Does Bitwarden have an Encrypted Export File?**](#q-does-bitwarden-have-an-encrypted-export-file)
-- [**Q: Can I download Bitwarden on F-Droid? I cannot find it.**](#q-can-i-download-bitwarden-on-f-droid-i-cannot-find-it)
-- [**Q: How do I rename a folder?**](#q-how-do-i-rename-a-folder)
-- [**Q: I have forgotten my master password, what can I do?**](#q-i-have-forgotten-my-master-password-what-can-i-do)
-- [**Q: How do I hide passwords from users?**](#q-how-do-i-hide-passwords-from-users)
-- [**Q: How can I see the history of a password that has been changed?**](#q-how-can-i-see-the-history-of-a-password-that-has-been-changed)
-- [**Q: Can I see the history of the passwords I have generated?**](#q-can-i-see-the-history-of-the-passwords-i-have-generated)
-- [**Q: Can I export/import from iCloud/Mac Keychain?**](#q-can-i-exportimport-from-icloudmac-keychain)
-- [**Q: How do I enable iOS AutoFill?**](#q-how-do-i-enable-ios-autofill)
-- [**Q: Why am I getting a ‘New Device’ Email Message?**](#q-why-am-i-getting-a-new-device-email-message)
-- [**Q: Can I use SMS 2FA?**](#q-can-i-use-sms-2fa)
-- [**Q: How do I install the Safari Extension?**](#q-how-do-i-install-the-safari-extension)
-- [**Q: How can I start Bitwarden when Windows starts?**](#q-how-can-i-start-bitwarden-when-windows-starts)
-- [**Q: How do I perform a sync on my application?**](#q-how-do-i-perform-a-sync-on-my-application)
-- [**Q: What is TOTP and how can I use it?**](#q-what-is-totp-and-how-can-i-use-it)
-- [**Q: Why are my TOTP codes incorrect/not working?**](#q-why-are-my-totp-codes-incorrectnot-working)
-- [**Q: Why is U2F Not Supported on my iOS or Android App?**](#q-why-is-u2f-not-supported-on-my-ios-or-android-app)
-- [**Q: How do I use the web browser extension?**](#q-how-do-i-use-the-web-browser-extension)
-- [**Q: How do I add attachments?**](#q-how-do-i-add-attachments)
-- [**Q: I am asked for my master password even though I have PIN unlock enabled on iOS / Android**](#q-i-am-asked-for-my-master-password-even-though-i-have-pin-unlock-enabled-on-ios--android)
-- [**Q: How can I import items directly into collections?**](#q-how-can-i-import-items-directly-to-collections)
 
 ### **Q: How do I change a collection via the CLI?**
 
@@ -136,9 +100,9 @@ You can learn more about PeaZip here:
 - <http://www.peazip.org/>
 - <https://github.com/giorgiotani/PeaZip >
 
-{%warning%}
+{% callout warning %}
 Disclaimer: Please note that PeaZip is a third party program and is not supported by Bitwarden. These links were shared with you as an option for you to use at your own risk.
-{%endwarning%}
+{% endcallout %}
 
 ### **Q: Can I download Bitwarden on F-Droid? I cannot find it.**
 
@@ -165,9 +129,9 @@ You can learn more about access control here: <https://bitwarden.com/help/articl
 
 The ability to view the password history of a Login Item is available. You can open the item in question and select the "1" next to Password History near the bottom of the window.
 
-{%warning%}
+{% callout warning %}
 Clicking on the number will expose the historical password values in plain text immediately.
-{%endwarning%}
+{% endcallout %}
 
 ### **Q: Can I see the history of the passwords I have generated?**
 
@@ -181,9 +145,9 @@ Here are some third-party programs available to export this data:
 - <https://gist.github.com/rmondello/b933231b1fcc83a7db0b>
 - <https://github.com/lifepillar/CSVKeychain>
 
-{%warning%}
+{% callout warning %}
 Please note that these 3rd party scripts/programs are unsupported by Bitwarden and Apple and are used at your own risk.
-{%endwarning%}
+{% endcallout %}
 
 Once you have exported your data, here is a helpful article for importing your data from the two mentioned programs:  <https://help.bitwarden.com/article/import-data/>
 
@@ -297,6 +261,6 @@ To reset this:
 
 **A:** To import items directly to collections, you'll want to format your import into a Bitwarden CSV and provide the collection names you'd like to import to. You can read more about the Bitwarden CSV import here: https://bitwarden.com/help/article/import-data/#generic-csv-format-organization-account
 
-{%note%}
+{% callout info %}
 Each import will create new records. To prevent duplicates while organizing your data, you will want to use the `Purge Vault` option to clear any existing data before importing it again. The option can be found by logging into the Web Vault (https://vault.bitwarden.com/) and going to Settings > Organizations > {YOUR ORG NAME} > Settings sub-tab (Gears Icon) > My Organization > Danger Zone > Purge Vault.
-{%endnote%}
+{% endcallout %}

_articles/faqs/security-faqs.md

@@ -8,22 +8,6 @@ hidden: false
 tags: []
 ---
 
-## Table of Contents
-
-- [Compliance General](#compliance-general)
-  * [Current Certifications](#current-certifications)
-  * [GDPR](#gdpr)
-  * [SOC Certifications](#soc-certifications)
-- [Desktop Electron Backdoor Concern](#desktop-electron-backdoor-concern)
-- [Duo MFA / 2FA / Two-step Login Requirement](#duo-mfa-2fa-two-step-login-requirement)
-- [New Device Not Recognized](#new-device-not-recognized)
-- [Master Password Stored Locally?](#master-password-stored-locally)
-- [Third party scripts, libraries, and services](#third-party-scripts-libraries-and-services)
-- [Security General (Whitepaper, Audit report, etc.)](#security-general-whitepaper-audit-report-etc)
-- [Self-signed Certificate Setup, On-premises/self-hosted](#self-signed-certificate-setup-on-premisesself-hosted)
-- [Web Browser Extension Security/Safety Concern](#web-browser-extension-securitysafety-concern)
-- [Web Browser Permission Request](#web-browser-permission-request)
-
 ## Compliance General
 
 ### Current Certifications

_articles/features/attachments.md

@@ -7,7 +7,7 @@ popular: false
 tags: [attachments, storage, files]
 ---
 
-{% note %}Using file attachments requires a premium membership or paid organization account.{% endnote %}
+{% callout info %}Using file attachments requires a premium membership or paid organization account.{% endcallout %}
 
 Attaching and managing files can be done from any Bitwarden client application. Any file  100MB or smaller can be attached to an item in your vault.
 

_articles/features/authenticator-keys.md

@@ -7,7 +7,7 @@ popular: false
 tags: [autofill, auto-fill, totp, 2fa, two-step login, two factor authentication, authenticator]
 ---
 
-{% note %}Authenticator key (TOTP) storage is available to all accounts. TOTP code generation requires a premium membership or paid organization account.{% endnote %}
+{% callout info %}Authenticator key (TOTP) storage is available to all accounts. TOTP code generation requires a premium membership or paid organization account.{% endcallout %}
 
 Each website that supports [Time-based One-time Password](https://en.wikipedia.org/wiki/Time-based_One-time_Password_algorithm) (TOTP) or [Two-factor Authentication](https://en.wikipedia.org/wiki/Multi-factor_authentication) (2FA) with an "Authenticator" handles configuration slightly differently. You will need to start the setup from each individual website or service that you are accessing (e.g. google.com, github.com). The option to configure this will commonly be found under the "Security" options of your account.
 
@@ -25,9 +25,9 @@ Create or edit a login item you wish to store your TOTP key with. In the field l
 
 The Bitwarden mobile applications and browser extension have the ability to automatically copy a TOTP code to your device clipboard after auto-fill. Auto-fill any item that has a TOTP key stored and submit the information. The service you are logging into will ask for a verification code. Use the paste function of your device to input the code and submit it.
 
-{% tip %}This feature can be toggled off under Settings → Options → Disable Automatic TOTP Copy.{% endtip %}
+{% callout success %}This feature can be toggled off under Settings → Options → Disable Automatic TOTP Copy.{% endcallout %}
 
-{% warning %} TOTP codes will not automatically copy to the system clipboard when "Enable Auto-fill On Page Load" is enabled in the browser extension.{% endwarning %}
+{% callout warning %} TOTP codes will not automatically copy to the system clipboard when "Enable Auto-fill On Page Load" is enabled in the browser extension.{% endcallout %}
 
 ## Support for More Parameters
 

_articles/features/auto-fill-android.md

@@ -15,7 +15,7 @@ Supported Versions:
 
 ## Autofill Framework Service
 
-{% note %}The Autofill Framework Service is only available to users on Android Oreo (8.0) and greater. If you are on a version of  Android prior to Oreo (8.0) you should only use the **Auto-fill Accessibility Service** as explained further down in this article. Otherwise, you should use both services for optimal functionality.{% endnote %}
+{% callout info %}The Autofill Framework Service is only available to users on Android Oreo (8.0) and greater. If you are on a version of  Android prior to Oreo (8.0) you should only use the **Auto-fill Accessibility Service** as explained further down in this article. Otherwise, you should use both services for optimal functionality.{% endcallout %}
 
 1. Open the Bitwarden Android app.
 2. Tap **{% icon fa-cog %} Settings**.
@@ -85,9 +85,9 @@ To enable floating window:
 3. Find **floating windows** or **App Management**
 4. Enable floating window for Bitwarden by sliding the toggle to the right.
 
-{% note %}
+{% callout info %}
 Android has many web browsers. It can be hard to keep up with them all. We have to add support for each browser individually.
 
 If auto-fill does not work on your browser, please report it at <https://github.com/bitwarden/mobile/issues> so that we can add support.
-{% endnote %}
+{% endcallout %}
 

_articles/features/auto-fill-browser.md

@@ -37,7 +37,7 @@ If the login does not appear in the "Current Tab" page, you can open the login f
 
 ### Right-click context menu
 
-{% note %}This feature is currently unavailable in Safari browser.{% endnote %}
+{% callout info %}This feature is currently unavailable in Safari browser.{% endcallout %}
 
 The same list of logins that are available when using the popup window are also available from the convenience of the right-click context menu in your browser.
 
@@ -52,7 +52,7 @@ You can use a set of keyboard shortcuts (hot keys) to quickly auto-fill a login
 - macOS: `Cmd + Shift + L`
   - Safari: `Cmd + \` or `Cmd + 8` or `Cmd + Shift + P`
 
-{% note %}If a shortcut does not work, it may be because another application on your device is already using it. For example, the auto-fill shortcut on Windows is commonly claimed by the AMD Radeon Adrenaline software (AMD graphic drivers) and therefore cannot be used by Bitwarden. You can free up this shortcut by changing it in the AMD Radeon software under Gaming → Global Settings → Performance Monitoring: "Toggle Performance Logging Hotkey".{% endnote %}
+{% callout info %}If a shortcut does not work, it may be because another application on your device is already using it. For example, the auto-fill shortcut on Windows is commonly claimed by the AMD Radeon Adrenaline software (AMD graphic drivers) and therefore cannot be used by Bitwarden. You can free up this shortcut by changing it in the AMD Radeon software under Gaming → Global Settings → Performance Monitoring: "Toggle Performance Logging Hotkey".{% endcallout %}
 
 Another option is to open the popup window using the keyboard shortcut (see below). You can then `TAB` to the login that you would like to auto-fill and then press `ENTER` to select.
 

_articles/features/auto-fill-card-id.md

@@ -9,7 +9,7 @@ tags: [browser, autofill, auto-fill, identity, card, form fill]
 
 Bitwarden can autofill more than just your usernames and passwords! It can make online purchases and account creations a breeze. If you're unfamiliar with what these item types are, refer to our [Managing Items][managing-items-doc] article.
 
-{% note %}The ability to autofill identities and cards is only available with the Bitwarden web browser extension at this time. Unfortunately, mobile platforms such as Android and iOS do not support these types of autofill functions.{% endnote %}
+{% callout info %}The ability to autofill identities and cards is only available with the Bitwarden web browser extension at this time. Unfortunately, mobile platforms such as Android and iOS do not support these types of autofill functions.{% endcallout %}
 
 ## Autofill an Identity
 
@@ -25,7 +25,7 @@ Bitwarden can autofill more than just your usernames and passwords! It can make
 
 Identities and Cards can be hidden from view of the **Tab** section if your prefer them not be shown when opening the browser extension.
 
-{% note %}Hiding these items will disable their ability to be auto-filled.{% endnote %}
+{% callout info %}Hiding these items will disable their ability to be auto-filled.{% endcallout %}
 
 1. Open the Browser Extension
 2. Select the **Settings** tab.

_articles/features/folders.md

@@ -9,9 +9,9 @@ tags: [categories, folders, sub-folders]
 
 Folders are a great way to categorize items in your Bitwarden vault.
 
-{% note %}
+{% callout info %}
 An Organization's collection are different than folders. Collections are a way to organize items and control user access within an organization's vault while folders are a way for individual users to organize items within their own personal vault. An individual user may wish to further organize the items being shared with them in their own vault into a personalized folder structure that makes sense just for them.
-{% endnote %}
+{% endcallout %}
 
 ## Nested folders (sub-folders)
 

_articles/features/reports.md

@@ -57,7 +57,7 @@ Two-factor authentication (2FA) is an important security setting that helps secu
 
 A “breach” is an incident where a site’s data has been illegally accessed by hackers and then released publicly. The Data Breach Report allows you to review the types of data that were compromised in these breaches (email addresses, passwords, credit cards, etc.) and take appropriate action, such as changing passwords.
 
-{%note%}
+{% callout info %}
 If you are self-hosting in order to run the **Data Breach** report in your instance, you will need to buy an HIBP subscription key that will authorize you to make calls to the API. You can find how to purchase this key [here](https://haveibeenpwned.com/API/Key){:target="_blank"}.
 
 Once you have the key you will need to go to your `./bwdata/env/golbal.override.env` file, edit it and REPLACE the placeholders values for the API key:
@@ -65,4 +65,4 @@ Once you have the key you will need to go to your `./bwdata/env/golbal.override.
 ```
 globalSettings__hibpApiKey=REPLACE
 ```
-{%endnote%}
+{% endcallout %}

_articles/features/searching-vault.md

@@ -45,7 +45,7 @@ The asterisk character (`*`) provides the ability to perform wildcard searches i
 - `*bitwarden*`
 - `*bit*war*den*`
 
-{% note %}
+{% callout info %}
 The following fields automatically include leading and trailing wildcards while performing normal search queries:
 
 - `name`
@@ -53,7 +53,7 @@ The following fields automatically include leading and trailing wildcards while
 - `login.uris`
 
 It is not necessary to provide wildcards if you are searching for information in these fields.
-{% endnote %}
+{% endcallout %}
 
 ## Advanced Searches
 

_articles/features/uri-match-detection.md

@@ -18,9 +18,9 @@ The scheme can also have special meaning in Bitwarden:
 - **`http://`** or **`https://`** tells Bitwarden that this is a website address. Example: `https://www.google.com`
 - **`androidapp://`** tells Bitwarden that this is an android application package ID (or package name). Example: `androidapp://com.twitter.android`. Android apps typically follow [reverse domain name notation](https://en.wikipedia.org/wiki/Reverse_domain_name_notation){:target="_blank"}.
 
-{% note %}
+{% callout info %}
 If a URI omits the scheme, `http://` is assumed.
-{% endnote %}
+{% endcallout %}
 
 ## Match detection options
 
@@ -30,9 +30,9 @@ While editing a login you can adjust the match detection value for a given URI b
 
 The following match detection options are available:
 
-{% note %}
+{% callout info %}
 **Base domain** is the default URI match detection value for all URIs. You can adjust this default value under **Settings** → **Options**.
-{% endnote %}
+{% endcallout %}
 
 **Base domain**
 
@@ -67,9 +67,9 @@ Example:
 
 **Regular expression**
 
-{% warning %}
+{% callout warning %}
 Regular expressions are an advanced option and can be quite dangerous if used incorrectly. You should not use this option if you do not know exactly what you are doing.
-{% endwarning %}
+{% endcallout %}
 
 The regular expression option allows you to write any simple or complex [regular expression](https://en.wikipedia.org/wiki/Regular_expression){:target="_blank"} to match the current website/application URI. All regular expressions are case *insensitive*.
 

_articles/getting-started/getting-started-organizations.md

@@ -35,7 +35,7 @@ If you would like to try it out, Bitwarden has a free account for individuals, a
 
 This tutorial walks you through the setup for two basic accounts and sharing in an Organization.
 
-{% note %} The free two-user organization is only available in Bitwarden Cloud. {% endnote %}
+{% callout info %} The free two-user organization is only available in Bitwarden Cloud. {% endcallout %}
 
 ### What are Organizations?
 
@@ -69,9 +69,9 @@ For the purpose of this tutorial, we'll focus on the Web Vault.
 
 Create the first account by starting at <https://vault.bitwarden.com>. Pick a strong master password and write it down in a safe place.
 
-{% warning %}
+{% callout warning %}
 The Bitwarden security model does not support master password recovery. You can read more in the help article [I forgot my master password]({% link _articles/account/forgot-master-password.md %})
-{% endwarning %}
+{% endcallout %}
 
 {% image organizations/orgstart/1-create-account-user-1.png Create account for user 1 %}
 
@@ -79,9 +79,9 @@ The Bitwarden security model does not support master password recovery. You can
 
 After you create the account and log in, you will want to verify your email.
 
-{% note %}
+{% callout info %}
 Reminder: You will also want to make sure your master password is written down and in a safe place where you can find it.
-{% endnote %}
+{% endcallout %}
 
 {% image organizations/orgstart/2-verify-email.png Verify your email %}
 

_articles/getting-started/getting-started-videos.md

@@ -12,18 +12,14 @@ order: 16
 
 Videos in this article are intended to walk you through getting started using Bitwarden
 
-### Jump to Videos:
-- [How to create an account and login](#how-to-create-an-account-and-login)
-- [Vault Management](#vault-management)
-- [How to setup the browser extension](#how-to-setup-the-browser-extension)
-
 ### How to create an account and login
 
-<iframe width="800" height="450" src="https://www.youtube.com/embed/W6Miu-TJI1c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe class="embed-responsive" width="800" height="450" src="https://www.youtube.com/embed/W6Miu-TJI1c" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ### Vault Management
-<iframe width="800" height="450" src="https://www.youtube.com/embed/xY9mRvOKTCs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+<iframe class="embed-responsive" width="800" height="450" src="https://www.youtube.com/embed/xY9mRvOKTCs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ### How to setup the browser extension
 
-<iframe width="800" height="450" src="https://www.youtube.com/embed/Epx6bLBsYlI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe class="embed-responsive" width="800" height="450" src="https://www.youtube.com/embed/Epx6bLBsYlI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

_articles/getting-started/releasenotes.md

@@ -1,7 +1,7 @@
 ---
 layout: article
 title: Release Notes
-categories: [release-notes]
+categories: []
 featured: true
 popular: true
 hidden: false

_articles/hosting/admin-portal.md

@@ -16,9 +16,9 @@ As the system administrator of your Bitwarden installation you can use the **Adm
 - Browse all organizations and information about them
 - Delete organizations
 
-{% note %}
+{% callout info %}
 Admins cannot globally view sensitive data that is protected (encrypted) in a user's or organization's vault.
-{% endnote %}
+{% endcallout %}
 
 The admin portal for your installation is available at https://bitwarden.example.com/admin.
 
@@ -40,6 +40,6 @@ adminSettings__admins=
 
 The admin portal uses a secure means of *passwordless authentication*. When a user attempts to log into the admin portal a secure link is sent to their email address. The user can click this temporary link to continue logging into the admin portal. The authentication link is active for up to **15 minutes** following the log in attempt.
 
-{% note %}
+{% callout info %}
 Since the admin portal uses email to provide secure links for authentication, you need to [configure your installation's SMTP mail settings]({% link _articles/hosting/install-on-premise.md %}) prior to attempting to log into the admin portal.
-{% endnote %}
+{% endcallout %}

_articles/hosting/install-on-premise.md

@@ -9,18 +9,6 @@ tags: [hosting, docker, install, deploy]
 
 This article will walk you through how to install and deploy Bitwarden to your own server. Because Bitwarden is a cross platform application, you can install and deploy it on Linux, macOS, and Windows machines.
 
-## Table of Contents
-
-- [TL;DR](#tldr)
-- [System Requirements](#recommended-minimum-system-requirements)
-- [Configure Your Domain](#configure-your-domain)
-- [Install Docker](#install-docker)
-- [Install Bitwarden](#install-bitwarden)
-- [Post-install Environment Configuration](#post-install-environment-configuration)
-- [Start Bitwarden](#start-bitwarden)
-- [Script Commands](#script-commands)
-- [Manual Docker Installations](#manual-docker-installations)
-
 ## TL;DR
 
 1. Set DNS records for a domain name pointing to your machine. Open ports 80 and 443 on the machine.
@@ -78,9 +66,9 @@ See the following official Docker documentation for more information:
 - [Install Docker](https://docs.docker.com/engine/installation/){:target="_blank"}
 - [Install Docker Compose](https://docs.docker.com/compose/install/){:target="_blank"}
 
-{% note %}
+{% callout info %}
 Some Docker installations such as Windows and macOS already come with Docker Compose installed.
-{% endnote %}
+{% endcallout %}
 
 For reference, you can find the official Bitwarden images hosted on Docker Hub at [https://hub.docker.com/u/bitwarden/](https://hub.docker.com/u/bitwarden/){:target="_blank"}.
 
@@ -90,7 +78,7 @@ We've made installing Bitwarden very simple. Depending on your environment (non-
 
 1. Download the main Bitwarden script to your machine in the desired location:
 
-    {% note %}All Bitwarden assets will be installed in the `./bwdata` directory relative to where the main Bitwarden script resides.{% endnote %}
+    {% callout info %}All Bitwarden assets will be installed in the `./bwdata` directory relative to where the main Bitwarden script resides.{% endcallout %}
 
     {% icon fa-linux %} {% icon fa-apple %} Bash
 
@@ -178,9 +166,9 @@ If you plan to use YubiKeys for two-step login, you can get your YubiKey client
 
 Once you've completed installing and configuring your Bitwarden installation you can start it up:
 
-{% note %}
+{% callout info %}
 The first time you start Bitwarden it may take some time as it downloads all of the images from Docker Hub.
-{% endnote %}
+{% endcallout %}
 
 {% icon fa-linux %} {% icon fa-apple %} Bash
 
@@ -202,9 +190,9 @@ Congratulations! Bitwarden is now up and running at `https://your.domain.com`. V
 
 The Bitwarden main script (`bitwarden.sh` or `bitwarden.ps1`) has the following commands available:
 
-{% note %}
+{% callout info %}
 PowerShell users will run the commands with a prefixed `-` (switch). For example `.\bitwarden.ps1 -start`.
-{% endnote %}
+{% endcallout %}
 
 {% table %}
 
@@ -228,11 +216,11 @@ PowerShell users will run the commands with a prefixed `-` (switch). For example
 
 Using the provided installation script is the recommended approach for most users, however, you can also install and configure Bitwarden manually using Docker and Docker Compose. A manual installation may be appropriate if you are intimately familiar with Docker technologies and desire more control over your Bitwarden installation. A manual installation follows most of the same steps that the installation script performs for you automatically.
 
-{% warning %}
+{% callout warning %}
 Manual installations are for advanced users only.
 
 Manual installations lose the ability to automatically update certain dependencies of the Bitwarden installation. As you upgrade from one version of Bitwarden to the next you will be responsible for changes to required environment variables, changes to nginx `default.conf`, changes to `docker-compose.yml`, etc. We will try to highlight these in the [release notes on GitHub](https://github.com/bitwarden/server/releases){:target="_blank"}. You can also monitor changes to the [dependency templates](https://github.com/bitwarden/server/tree/master/util/Setup/Templates){:target="_blank"} used by the Bitwarden installation script on GitHub.
-{% endwarning %}
+{% endcallout %}
 
 1. Download a stubbed version of Bitwarden's dependencies (`docker-stub.zip`) from the [releases pages on GitHub](https://github.com/bitwarden/server/releases){:target="_blank"}.
 2. Create a new directory named `bwdata` and extract the `docker-stub.zip` archive to it. The directory structure provided matches what the `./docker/docker-compose.yml` file's mapped volumes expect, however, you are free to change the location of these mappings on the host machine if desired.
@@ -250,7 +238,7 @@ Manual installations lose the ability to automatically update certain dependenci
     Make sure that you provide your `IDENTITY_CERT_PASSWORD` to the application's environment variables at `./env/global.override.env`.
 6. Copy your SSL certificate and keys to the `./ssl` directory. By default, this directory is mapped to the nginx container at `/etc/ssl`. The `./nginx/default.conf` can be adjusted to utilize these certificates as desired.
 
-    {% note %}Accessing the Bitwarden web vault and APIs via HTTPS is required. You should provide a trusted SSL certificate to the nginx container or front the installation with a proxy that provides a HTTPS endpoint to Bitwarden client applications.{% endnote %}
+    {% callout info %}Accessing the Bitwarden web vault and APIs via HTTPS is required. You should provide a trusted SSL certificate to the nginx container or front the installation with a proxy that provides a HTTPS endpoint to Bitwarden client applications.{% endcallout %}
 
     Example self-signed certificate:
 

_articles/hosting/updating-on-premise.md

@@ -23,6 +23,6 @@ We have made updating your Bitwarden installation very simple. Use the same Bitw
 
 Your Bitwarden installation should now be fully up to date and running.
 
-{% tip %}
+{% callout success %}
 Create a cronjob or scheduled task to run these update commands weekly, or even nightly. This will automatically keep your installation up to date.
-{% endtip %}
+{% endcallout %}

_articles/importing/import-from-1password.md

@@ -11,14 +11,14 @@ Importing your data from 1Password into Bitwarden is easy. 1Password has two ver
 
 ## Export Your 1Password 1pif Logins
 
-{% note %}
+{% callout info %}
 This set of instructions is only for:
 
 - 1Password 4 users on macOS and Windows (only the .agilekeychain format is supported for Windows users)
 - 1Password 6 and 7 users on macOS
 
 These instructions may vary slightly for macOS users.
-{% endnote %}
+{% endcallout %}
 
 1. Open the 1Password desktop application on your computer and enter your 1Password master password to unlock your vault.
 2. Select the vault that you wish to export. It is not possible to export from **All Vaults**, so you'll need to switch to a specific vault.
@@ -29,11 +29,11 @@ These instructions may vary slightly for macOS users.
 
 ## Export your 1Password 6 & 7 csv logins from Windows
 
-{% note %}
+{% callout info %}
 This set of instructions is only for:
 
 - 1Password 6 and 7 users on Windows
-{% endnote %}
+{% endcallout %}
 
 1. Open the 1Password 6/7 desktop application on your computer and enter your 1Password master password to unlock your vault.
 2. Select the items you want to export. Select multiple items by holding down the Ctrl key (Command on macOS) when clicking on them. Select all of the items by pressing Ctrl+A (Command+A on macOS) after clicking one of the items in the list.

_articles/importing/import-from-chrome.md

@@ -9,9 +9,9 @@ tags: [import, chrome, opera, vivaldi, edge]
 
 Importing your data from Google Chrome into Bitwarden is easy.
 
-{% note %}
+{% callout info %}
 The process is exactly the same for Opera, Microsoft Edge (Chromium), Brave and Vivaldi browser users.
-{% endnote %}
+{% endcallout %}
 
 ## Export your Chrome passwords (Desktop)
 

_articles/importing/import-from-lastpass.md

@@ -20,11 +20,11 @@ Importing your data from LastPass into Bitwarden is easy.
    - Highlight all of the data with your mouse (or simply press <code>Ctrl + A</code>), then right click with your mouse and select **Copy**.<br />
    {% image lastpass-copy.png %}
 
-{% warning %}
+{% callout warning %}
 There are known bugs (for years now) with the LastPass exporter regarding special characters such as the ampersand (<code>&amp;</code>), the greater than sign (<code>&gt;</code>), and the less than sign (<code>&lt;</code>). The LastPass exporter may change (HTML encode) these and possibly other special characters in your passwords to their respective HTML encoded values (ex. <code>&amp;amp;</code>, <code>&amp;gt;</code>, and <code>&amp;lt;</code>). If this LastPass bug affects your exported data you should use a text editor (such as Notepad) to find and replace all of these values before importing into Bitwarden. For example, you may want to do a find and replace for <code>&amp;amp;</code> &rarr; <code>&amp;</code> and <code>&amp;lt;</code> &rarr; <code>&lt;</code>).
 
 Alternatively, you can use the [LastPass Pocket application](https://lastpass.com/misc_download2.php){:target="_blank"} to export your CSV data. The LastPass Pocket application does not appear to be affected by these bugs.
-{% endwarning %}
+{% endcallout %}
 
 ## Import your data into Bitwarden
 
@@ -40,9 +40,9 @@ Congratulations! You have just transferred all of your data from LastPass into B
 
 LastPass does not include form fills with the standard export from the LastPass web vault. If you want to import form fill information into Bitwarden you can export the form fill CSV data from the LastPass browser extension.
 
-{% note %}
+{% callout info %}
 You can only export form fill data from the LastPass browser extension.
-{% endnote %}
+{% endcallout %}
 
 1. Click the LastPass icon from the browser toolbar to open the LastPass popup interface.
 2. Navigate to **More options** &rarr; **Advanced** &rarr; **Export** &rarr; **Form Fills**.

_articles/login-with-sso/about-sso.md

@@ -20,17 +20,7 @@ Users of Bitwarden authenticate into their vaults using the **Enterprise Single
 
 Administrators can configure Login with SSO in the Business Portal. For more information, see [About the Business Portal](https://bitwarden.com/help/article/about-business-portal/).
 
-{% image /sso/sso-button-lg.png Enterprise Single Sign-On button%}
+{% image /sso/sso-button-lg.png Enterprise Single Sign-On button %}
-
-### In This Article
-
-- [Enterprise Free Trial](#enterprise-free-trial)
-- [Requirements](#requirements)
-  - [Identity Server Requirements](#identity-server-requirements)
-  - [Client Application Requirements](#client-requirements)
-  - [Self-Hosting Requirements](#self-hosting-requirements)
-- [Workflow Diagram](#workflow-diagram)
-- [Next Steps](#next-steps)
 
 ## Enterprise Free Trial
 

_articles/login-with-sso/configure-sso-oidc.md

@@ -10,12 +10,6 @@ order: 04
 
 This article will guide you through the steps required to configure Login with SSO for OpenID Connect (OIDC) authentication.
 
-### In This Article
-
-- [Step 1: Enabling Login with SSO](#step-1-enabling-login-with-sso)
-- [Step 2: Configure Your IdP](#step-2-configure-your-idp)
-- [Step 3: Open ID Connect Configuration](#step-3-openid-connect-configuration)
-
 ## Step 1: Enabling Login with SSO
 
 Complete the following steps to enable Login with SSO for OIDC authentication:

_articles/login-with-sso/configure-sso-saml.md

@@ -9,16 +9,6 @@ order: 03
 ---
 This article will guide you through the steps required to configure Login with SSO for SAML 2.0 authentication.
 
-### In This Article
-
-- [Step 1: Enabling Login with SSO](#step-1-enabling-login-with-sso)
-- [Step 2: Provider Configuration](#step-2-service-provider-configuration)
-- [Step 3: Configure Your IdP](#step-3-configure-your-idp)
-- [Step 4: Identity Provider Configuration](#step-4-identity-provider-configuration)
-- [Field Mappings Reference](#field-mappings-reference)
-  - [For Service Provider Configuration](#for-service-provider-configuration)
-  - [For Identity Provider Configuration](#for-identity-provider-configuration)
-
 ## Step 1: Enabling Login with SSO
 
 Complete the following steps to enable Login with SSO for SAML 2.0 authentication:
@@ -131,9 +121,9 @@ SSO URL issued by your IdP.
 
 SLO URL issued by your IdP.
 
-{% note %}
+{% callout info %}
 Login with SSO currently **does not** support SLO. This option is planned for future use, however we strongly recommend pre-configuring this field.
-{% endnote %}
+{% endcallout %}
 
 ### Artifact Resolution Service URL (*Required if Binding Type is Artifact*)
 
@@ -143,9 +133,9 @@ URL used for the Artifact Resolution Protocol.
 
 The X.509 Base-64 encoded certificate body. Do not include the `-----BEGIN CERTIFICATE-----` and `-----END CERTIFICATE-----` lines or portions of the CER/PEM formatted certificate.
 
-{%warning%}
+{% callout warning %}
 Extra spaces, carriage returns, and other extraneous characters inside this field will cause certificate validation failure. Copy **only** the certificate data into this field.
-{%endwarning%}
+{% endcallout %}
 
 ### Outbound Signing Algorithm
 Encryption method used by the SAML assertion. Options include:
@@ -156,14 +146,14 @@ Encryption method used by the SAML assertion. Options include:
 
 ### Allow Unsolicited Authentication response
 
-{% note %}
+{% callout info %}
 Login with SSO currently **does not** support unsolicited (IdP-Initiated) SSO assertions. This checkbox is planned for future use.
-{% endnote %}
+{% endcallout %}
 
 ### Disable Outbound Logout requests
-{% note %}
+{% callout info %}
 Login with SSO currently **does not** support SLO. This option is planned for future use, however we strongly recommend pre-configuring this field.
-{% endnote %}
+{% endcallout %}
 
 ### Want Authentication Requests Signed
 Check this checkbox if your IdP should expect SAML requests from Bitwarden to be signed.

_articles/login-with-sso/saml-providers.md

@@ -7,11 +7,6 @@ popular: false
 tags: [sso, saml, oidc, openid, saml2.0, idp, identity]
 ---
 
-### In This Article
-- [Service Provider Configuration Mapping](#service-provider-configuration)
-- [Identity Provider Configuration Mapping](#identity-provider-configuration)
-- [Screenshots of Sample Configurations](#screenshots-of-sample-configurations)
-
 ## Service Provider Configuration Mapping
 
 | Bitwarden Field                                          | Azure AD Field                                   | JumpCloud Field                                  | OneLogin Field                                   | G-Suite Field                             | Okta Field                                             |
@@ -38,6 +33,6 @@ tags: [sso, saml, oidc, openid, saml2.0, idp, identity]
 
 [{% icon fa-download %} Download Okta Sample]({{site.baseurl}}/files/bitwarden_export.csv)
 
-{%note%}
+{% callout info %}
 This table is meant to make locating some fields and values easier. Some configurations and provider versions may differ depending on your Organization's policies and procedures. If you are having trouble configuring Login with SSO for your Bitwarden Organization, please [contact us](https://bitwarden.com/contact/) for assitance.
-{%endnote%}
+{% endcallout %}

_articles/login-with-sso/sso-access-your-vault.md

@@ -22,8 +22,8 @@ Complete the following steps to use Login with SSO to authenticate into your Bit
 
 3. Enter your **Organization Identifier** and select **Log In**.
 
-   {% note %}We recommend bookmarking this page with your Organization Identifier included as a query string so that you don't have to enter it each time, for example `https://vault.bitwarden.com/#/sso?identifier=your-org-id` or `https://your.domain.com/#/sso?identifier=your-org-id`.
+   {% callout info %}We recommend bookmarking this page with your Organization Identifier included as a query string so that you don't have to enter it each time, for example `https://vault.bitwarden.com/#/sso?identifier=your-org-id` or `https://your.domain.com/#/sso?identifier=your-org-id`.
-   {% endnote %}
+   {% endcallout %}
 
    {% image /sso/org-id-input.png Organization Identifier field %}
 
@@ -38,6 +38,6 @@ In both cases, your account now has an *accepted* status within your Organizatio
 
 
 
-  {%note%}
+  {% callout info %}
   Users that are created via Login with SSO **will still be properly organized into their groups and collections** if leveraging the [Directory Connector](https://bitwarden.com/help/article/directory-sync/) utility.
-  {%endnote%}
+  {% endcallout %}

_articles/miscellaneous/blocker-access-rule.md

@@ -17,10 +17,10 @@ The following [uMatrix rule](https://github.com/gorhill/uMatrix/wiki/Rules-synta
 dc8ef5f6-eb0d-4c87-9e9f-0cf803f619e8.moz-extension-scheme bitwarden.com xhr allow
 ```
 
-{% note %}
+{% callout info %}
 The UUID included in the above rule (`dc8ef5f6-eb0d-4c87-9e9f-0cf803f619e8`) will be different for your installation.
 Use the `about:debugging#/runtime/this-firefox` page (navigate from Firefox's address bar) to locate your Bitwarden extension UUID.
-{% endnote %}
+{% endcallout %}
 
 ## NoScript
 

_articles/miscellaneous/cli.md

@@ -13,49 +13,6 @@ The CLI can be used cross-platform on Windows, macOS, and Linux distributions.
 
 {% image cli.png %}
 
-### In This Article
-
-- [Quick Start](#quick-start)
-- [Download and Install](#download-and-install)
-    - [Native executable](#native-executable)
-    - [NPM](#npm)
-    - [Other Package Managers](#other-package-managers)
-- [Session Management](#session-management)
-    - [Logging In](#logging-in)
-    - [Environment Variable](#environment-variable)
-    - [`--session <key>` Option](#--session-key-option)
-    - [Locking](#locking)
-    - [Login != Unlock](#login--unlock)
-- [Explore the CLI](#explore-the-cli)
-- [Managing Your Vault](#managing-your-vault)
-    - [Sync](#sync)
-    - [List](#list)
-    - [Get](#get)
-    - [Create](#create-items-attachments-and-folders)
-    - [Edit](#edit)
-    - [Delete](#delete)
-        - [`--permanent` Option](#--permanent-option)
-    - [Restore](#restore)
-    - [Share](#share)
-- [Other Useful Commands](#other-useful-commands)
-    - [Confirm](#confirm)
-    - [Import](#import)
-    - [Export](#export)
-    - [Generate](#generate)
-    - [Encode](#encode)
-    - [Config](#config)
-    - [Update](#update)
-    - [Status](#status)
-    - [Version](#version)
-- [Working with JSON](#working-with-json)
-- [Self-signed Certificates](#self-signed-certificates)
-- [Shell Completion](#shell-completion)
-    - [ZSH](#zsh)
-- [Source Code](#source-code)
-- [Appendix](#appendix)
-    - [Templates](#templates)
-    - [Enums](#enums)
-
 ## Quick Start
 
 1. [Download and install](#download-and-install) the CLI for your platform.
@@ -148,9 +105,9 @@ Pass the session key to CLI commands by setting the `BW_SESSION` environment var
 
     bw list items --session 5PBYGU+5yt3RHcCjoeJKx/wByU34vokGRZjXpSH7Ylo8w==
 
-{% note %}
+{% callout info %}
 It is possible to persist your session key to your environment (for example, exporting it in `.bashrc`), however, we do not recommend doing this. Your active session key is the encryption key used to unlock all data associated with your Bitwarden vault and is not well-suited for persisting on an unprotected disk.
-{% endnote %}
+{% endcallout %}
 
 ### `--apiKey` Variables
 
@@ -437,9 +394,9 @@ The `update` command allows you to check if your CLI is up to date. The CLI will
 
 A URL to download a new version of the CLI executable will be returned to you.
 
-{% note %}
+{% callout info %}
 If you have installed the CLI through a package managers (such as NPM), you should use the update commands available for that tool. For example, `npm install -g @bitwarden/cli` will update you to the latest version of the CLI on NPM.
-{% endnote %}
+{% endcallout %}
 
 ### Status
 
@@ -582,9 +539,9 @@ Some templates are meant to be used as sub-objects to another template's propert
 | Email         | 1     |
 | Yubikey       | 3     |
 
-{% note %}
+{% callout info %}
 Other two-step login methods such as FIDO U2F and Duo are not supported by the CLI.
-{% endnote %}
+{% endcallout %}
 
 **Item Types**
 

_articles/miscellaneous/personal-api-key.md

@@ -9,9 +9,9 @@ tags: [api key, cli]
 
 Your Bitwarden Personal API Key can be used as an alternative method for authenticating into the Command Line Interface (CLI).
 
-{% note %}
+{% callout info %}
 Your Personal API Key is not the same as the API Key used to access the Bitwarden Public API for organization management. Personal API Keys will have a `client_id` with format `"user.clientId"`, while Organization API Keys will have a `client_id` with format `"organization.ClientId"`.
-{% endnote %}
+{% endcallout %}
 
 ### In This Article
 - [Get your Personal API Key](#get-your-personal-api-key)

_articles/miscellaneous/vault-sync.md

@@ -7,17 +7,6 @@ popular: false
 tags: [vault, sync, automatic, FAQ]
 ---
 
-## Table of Contents
-
-- [What is vault syncing?](#what-is-vault-syncing-)
-- [When does my vault sync?](#when-does-my-vault-sync-)
-  * [Mobile APPS](#mobile-apps)
-  * [Browser extensions](#browser-extensions)
-  * [Desktop applications](#desktop-applications)
-  * [Command-line interface](#command-line-interface)
-- [Common issues](#common-issues)
-
-
 ## What is vault syncing?
 
 Vault syncing is purely downloading the latest content from your Bitwarden vault onto your device for access.
@@ -34,7 +23,7 @@ The Bitwarden mobile apps sync **personal** vaults automatically.
 Organization vaults are synchronized once every 30 minutes, or on-demand by navigating to:
 **Settings > Sync > Sync Vault now**
 
-{%note%}Self-hosted users can enable Push notifications powered by the Bitwarden cloud.{%endnote%}
+{% callout info %}Self-hosted users can enable Push notifications powered by the Bitwarden cloud.{% endcallout %}
 
 You can also sync your vault on-demand with the pull down gesture. Navigate to **Settings > Sync > Enable sync on refresh** to enable sync on refresh.
 

_articles/organizations/about-groups.md

@@ -14,9 +14,9 @@ redirect_from:
 
 Groups are structures used by Organizations to together individual users, and provide a scalable way to assign access (including assigning Collections) by configuring Access Controls at the Group-level instead of at the individual-level.
 
-{% note %}
+{% callout info %}
 Groups are currently available to Teams Organizations and Enterprise Organizations.
-{% endnote %}
+{% endcallout %}
 
 When onboarding new users, add them to a Group to have them automatically inherit that Group's Access Controls configuration.
 

_articles/organizations/about-organizations.md

@@ -24,14 +24,6 @@ Once you've created your Organization, invite users to start sharing. Invited us
 
 {% image /organizations/org-use-overlay.png Access shared items %}
 
-### In This Article
-- [Types of Organizations](#types-of-organizations)
-  - [Free Organizations](#free-organizations)
-  - [Families Organizations](#families-organizations)
-  - [Teams Organizations](#teams-organizations)
-  - [Enterprise Organizations](#enterprise-organizations)
-- [Organizations vs. Premium](#organizations-vs-premium)
-
 ## Types of Organizations
 
 There are a few different types of Organizations available. When you create your Organization, you will be prompted to select one of the following options:

_articles/organizations/create-an-organization.md

@@ -27,8 +27,8 @@ Complete the following steps to create an Organization:
    {%image /organizations/new-org-button-overlay.png Select New Organization %}
 3. On the New Organization screen, enter an **Organization Name** for your new Organization and the **Billing Email** we can reach you at.
 
-    {% note %}Paid Organizations (Families, Teams, or Enterprise) have a 7 Day Free Trial built in. We won't charge you until your trial is over. You can cancel your subscription at any time in the **Settings** tab of your Organization.
+    {% callout info %}Paid Organizations (Families, Teams, or Enterprise) have a 7 Day Free Trial built in. We won't charge you until your trial is over. You can cancel your subscription at any time in the **Settings** tab of your Organization.
-    {% endnote %}
+    {% endcallout %}
 4. If you're creating an Organization on behalf of a business:
    - Check the **This account is owned by a business** checkbox.
    - Provide your **Business Name**.
@@ -40,8 +40,8 @@ Complete the following steps to create an Organization:
    - **Teams:** For businesses and other team organizations. [**Learn more.**](https://bitwarden.com/help/article/about-bitwarden-plans/#teams-organizations)
    - **Enterprise:** For businesses and other large organizations. [**Learn more.**](https://bitwarden.com/help/article/about-bitwarden-plans/#enterprise-organizations)
 
-   {% note %}Paid Organizations (Families, Teams, or Enterprise) include premium features for all enrolled users. For more information about premium features, see [About Bitwarden Plans](https://bitwarden.com/help/article/about-bitwarden-plans/#compare-the-plans).
+   {% callout info %}Paid Organizations (Families, Teams, or Enterprise) include premium features for all enrolled users. For more information about premium features, see [About Bitwarden Plans](https://bitwarden.com/help/article/about-bitwarden-plans/#compare-the-plans).
-   {% endnote %}
+   {% endcallout %}
 6. If you selected a Paid Organization, enter the following information:
    - For **Teams** or **Enterprise**, enter the number of **User Seats** you need. You can add additional seats later if required.
    - For **Families**, **Teams**, or **Enterprise**, enter the amount of **Additional Storage (GB)** you need. You plan comes with 1 GB of shared encrypted file storage, and you can add additional storage later if needed.

_articles/organizations/create-collections.md

@@ -12,10 +12,6 @@ redirect_from:
 
 This article will guide you through the process of creating a Collection. For more information about Collections, see [About Collections](https://bitwarden.com/help/article/about-collections/).
 
-### In This Article
-- [Create a Collection](#create-a-collection)
-- [Create Nested Collections](#create-nested-collections)
-
 ## Create A Collection
 
 Complete the following steps to create a collection:
@@ -35,9 +31,9 @@ Complete the following steps to create a collection:
 
 Collections be "nested" in order to logically organize them within your Vault. There's no limit to the depth with which you can nest Collections, but creating too many levels may interfere with your Vault's interface.
 
-{% note %}
+{% callout info %}
 Nested Collections are designed for in-Vault display purposes only. Nested Collections will not not inherit access or permissions from their "parent" Collection.
-{% endnote %}
+{% endcallout %}
 
 {% image organizations/collection-nested.png Nested Collection %}
 

_articles/organizations/create-groups.md

@@ -10,15 +10,9 @@ order: 06
 
 This article will guide you through the process of setting up your first Group. For more information about Groups, see [About Groups](https://bitwarden.com/help/article/about-groups/).
 
-{% note %}
+{% callout info %}
 Groups are currently available to Teams Organizations and Enterprise Organizations.
-{% endnote %}
+{% endcallout %}
-
-### In This Article
-- [Create a Group](#create-a-group)
-- [Assign Users to a Group](#assign-users-to-a-group)
-- [View Users in a Group](#view-users-in-a-group)
-- [Associate Groups to Collections](#associate-groups-to-collections)
 
 ## Create a Group
 

_articles/organizations/deploying-bitwarden-as-a-msp.md

@@ -19,7 +19,7 @@ Some MSPs choose to create the Organization on behalf of their client as a value
 
 Once the Organization is configured, you should invite other administrators to join. This is an important step for setting a foundation of security for the MSP team, as well as the client team.
 
-{% note %} Note: Adding a new user to an Organization involves three steps: Invite, Accept, and Confirm. Give users a heads-up once Invite emails are sent, so they are aware they need to accept the invitation to join the Organization.{% endnote %}
+{% callout info %} Note: Adding a new user to an Organization involves three steps: Invite, Accept, and Confirm. Give users a heads-up once Invite emails are sent, so they are aware they need to accept the invitation to join the Organization.{% endcallout %}
 
 Administrators can access and manage all Items, Collections, and users in the Organization. You’ll want to share your administrative duties with another person, especially if you have a large number of users.
 

_articles/organizations/event-logs.md

@@ -16,12 +16,6 @@ Event Logs are timestamped records of everything that occurs within your Organiz
 
 Events Logs are also accessible using Bitwarden's API for Organization Management. For more information, see [RESTful API for Organization Management](https://bitwarden.com/help/article/public-api/).
 
-### In This Article
-
-- [Events List](#events-list)
-- [API Responses](#API-responses)
-- [SIEM and External Systems Integrations](#siem-and-external-systems-integrations)
-
 ## Events List
 
 Event Logs record roughly 40 different types of events. In the Web Vault, the action catalogued by each event is described in plain text under the **Event** column.

_articles/organizations/how-to-manage-collections.md

@@ -42,9 +42,9 @@ After clicking **New Collection**, the user is prompted to enter the Name and Ex
 
 From there the Manager of the collection can assign groups to the newly created collection.
 
-{% note %}
+{% callout info %}
 Groups are available in Bitwarden Enterprise
-{% endnote % }
+{% endcallout % }
 
 {% image collections/bitwarden-collections-add-new.png %}
 
@@ -56,9 +56,9 @@ Selecting this option will prevent users assigned to this collection from adding
 **Hide Passwords**
 This option hides passwords, TOTP seeds, and any custom fields of type hidden in this collection. This also disables the ability for an end-user to copy a password. In this configuration, an item may only be used with auto-fill.
 
-{% warning %}
+{% callout warning %}
 Enabling hidden passwords prevents the easy copy and paste of hidden items, however it does not completely prevent user access to this information. Please treat hidden passwords as you would any shared credential.
-{% endwarning %}
+{% endcallout %}
 
 ### Adding items to a Collection
 When residing within the view of a collection in the web vault, new items will be saved within the collection.
@@ -89,9 +89,9 @@ After selecting the Users option, a list of individuals within the organization
 
 With these capabilities in place, individual employees empowered as Managers will be able to create their own new collections, and add groups and users to those collections. They also have the ability to manage collections created by another manager.
 
-{% note %}
+{% callout info %}
 Managers do not have access to change the composition of Groups. For that access, Admin or Owner roles are required. For example, if a Manager creates a collection of **Design Services** and adds the **Marketing** group to have access, and a user is removed from the Marketing group by the Admin, then that user will no longer have access to the Design Services collection.
-{% endnote %}
+{% endcallout %}
 
 ### Table of User Roles and Access
 

_articles/organizations/managing-users.md

@@ -11,23 +11,17 @@ This article will guide you through the process of inviting or removing users fr
 
 Teams and Enterprise Organizations can sync Bitwarden to an existing user directory to automatically add or remove new users using the **Bitwarden Directory Connector**. For more information, see [Syncing users and groups with a directory](https://bitwarden.com/help/article/directory-sync/).
 
-{% note %}
+{% callout info %}
 **Free** Organizations and **Families** Organizations have a maximum number of users; 2 and 6 respectively.
 
 **Teams** Organizations and **Enterprise** Organizations must ensure that there are available users seats for their account before inviting users. For more information, see [Add or Remove User Seats for your Organization](https://bitwarden.com/help/article/user-seats/).
-{% endnote %}
+{% endcallout %}
-
-### In This Article
-- [Invite Users](#add-users)
-  - [Invited Users](#invited-users)
-  - [Confirm Invited Users](#confirm-invited-users)
-- [Remove Users](#remove-users)
 
 ## Invite Users
 
-{% warning %}
+{% callout warning %}
 **For Enterprise Organizations**, Bitwarden recommends configuring Enterprise Policies prior to inviting users to ensure compliance on-entrance to your Organization. For more information, see [Enterprise Policies](https://bitwarden.com/help/article/policies/).
-{% endwarning %}
+{% endcallout %}
 
 Complete the following steps to invite users to your Organization:
 

_articles/organizations/organization-videos.md

@@ -12,29 +12,21 @@ order: 16
 
 Videos in this article are intended to walk you through the key aspects of using a Bitwarden Organization:
 
-### Jump to Videos:
-- [How to manage organizations](#how-to-manage-organizations)
-- [How to manage collections](#how-to-manage-collections)
-- [How to organize groups](#how-to-organize-groups)
-- [How to manage people in your organization](#how-to-manage-people-in-your-organization)
-- [Account Management](#account-management)
-- [How to setup the browser extension](#how-to-setup-the-browser-extension)
-
 ### How to manage organizations
-<iframe width="800" height="450" src="https://www.youtube.com/embed/2qJYi_xDTIE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe class="embed-responsive" width="800" height="450" src="https://www.youtube.com/embed/2qJYi_xDTIE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ### How to manage collections
 
-<iframe width="800" height="450" src="https://www.youtube.com/embed/oTRnpuDbaNc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe class="embed-responsive" width="800" height="450" src="https://www.youtube.com/embed/oTRnpuDbaNc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ### How to organize groups
 
-<iframe width="800" height="450" src="https://www.youtube.com/embed/KF0AN-P2qfU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe class="embed-responsive" width="800" height="450" src="https://www.youtube.com/embed/KF0AN-P2qfU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ### How to manage people in your organization
 
-<iframe width="800" height="450" src="https://www.youtube.com/embed/fiR6sqJ_N58" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe class="embed-responsive" width="800" height="450" src="https://www.youtube.com/embed/fiR6sqJ_N58" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 
 ### Account Management
 
-<iframe width="800" height="450" src="https://www.youtube.com/embed/eZZOSkr9PV0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<iframe class="embed-responsive" width="800" height="450" src="https://www.youtube.com/embed/eZZOSkr9PV0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

_articles/organizations/policies.md

@@ -15,19 +15,9 @@ Enterprise Polices enable Enterprise Organizations to enforce security rules for
 
 Enterprise Policies can be set by users with the User Type **Admin** or **Owner**.
 
-{% warning %}
+{% callout warning %}
 Bitwarden highly recommends setting Enterprise Policies prior to inviting users to your Organization. Some Policies will remove non-compliant users on enabling, and some are not retroactively enforceable.
-{% endwarning %}
+{% endcallout %}
-
-### In This Article
-
-- [Setting Enterprise Policies](#setting-enterprise-policies)
-- [Available Policies](#available-policies)
-  - [Two-Step Login Policy](#two-step-login)
-  - [Master Password Policy](#master-password)
-  - [Password Generator Policy](#password-generator)
-  - [Single Organization Policy](#single-organization)
-  - [Single Sign-On Authentication Policy](#single-sign-on-authentication)
 
 ## Setting Enterprise Policies
 
@@ -42,13 +32,13 @@ Policies can be set in two locations:
 
 Enabling the **Two-step Login** policy will require non-Owner/non-Admin users to use any two-step login method to access their Vaults.
 
-{% warning %}
+{% callout warning %}
 **Users in the Organization who do not have two-step login enabled will be removed from the Organization when you enable this policy.**
 
 Users who are removed as a result of this policy will be notified via email, and must be re-invited to the Organization.
 - Existing users will not be able to accept the invitation until two-step login is enabled for their Vault.
 - New users will be automatically setup with email-based two-step login, but can change this at any time.
-{% endwarning %}
+{% endcallout %}
 
 ### Master Password
 
@@ -59,9 +49,9 @@ Enabling the **Master Password** policy will enforce a configurable set of minim
 
 Password complexity is calculated on a scale from 0 (Weak) to 4 (Strong). Bitwarden calculates password complexity using [the zxcvbn library](https://github.com/dropbox/zxcvbn).
 
-{% warning %}
+{% callout warning %}
 Existing non-compliant users **will not** have their Master Passwords changed when this policy is enabled, nor will they be removed from the Organization. The next time this group of users changes their Master Password, this policy will be enforced.
-{% endwarning %}
+{% endcallout %}
 
 ### Password Generator
 
@@ -79,26 +69,26 @@ Enabling the **Password Generator** policy will enforce a configurable set of mi
 - Whether to capitalize
 - Whether to include numbers
 
-{% warning %}
+{% callout warning %}
 Existing non-compliant passwords **will not** be changed when this policy is enabled, nor will the items be removed from the Organization. When changing or generating a password after this policy is enabled, configured policy rules will be enforced.
 
 A banner will appear to users on the Password Generator screen indicating that a policy will affect their generator settings.
-{% endwarning %}
+{% endcallout %}
 
 ### Single Organization
 
 Enabling the **Single Organization** policy will restrict non-Owner/non-Admin members of your Organization from being able to join other Organizations, or from creating other Organizations.
 
-{% warning %}
+{% callout warning %}
 **Users in the Organization who are members of multiple Organizations will be removed from the Organization when you enable this policy.**
 
 Users who are removed as a result of this policy will be notified via email, and must be re-invited to the Organization. Users will not be able to be confirmed to the Organization until they have removed themselves from all other Organizations.
-{% endwarning %}
+{% endcallout %}
 
 ### Single Sign-On Authentication
 
 Enabling the **Single Sign-On Authentication** policy will require non-Owner/non-Admin users to log in with Enterprise Single Sign-On. For more information, see [Access Your Vault using SSO](https://bitwarden.com/help/article/sso-access-your-vault/).
 
-{% note %}
+{% callout info %}
 The **Single Organization** policy must be enabled before activating this policy.
-{% endnote %}
+{% endcallout %}

_articles/organizations/public-api.md

@@ -16,18 +16,9 @@ The Public API is compatible with the OpenAPI Specification (OAS3) and publishes
 - For Public Cloud-hosted instances: [https://bitwarden.com/help/api/](https://bitwarden.com/help/api/){:target="\_blank"}
 - For Self-hosted instances: https://your.domain.com/api/docs/
 
-{% note %}
+{% callout info %}
-Access to the Bitwarden Public API is available for customers on the following plans, **Classic 2019 Enterprise Organizations**, current **Enterprise Organizations**, and current **Teams Organizations**. For more information, see [About Bitwarden Plans](https://bitwarden.com/help/article/about-bitwarden-plans/#compare-the-plans-1).
+Access to the Bitwarden Public API is available customers on the following plans, **Classic 2019 Enterprise Organizations**, current **Enterprise Organizations**, and current **Teams Organizations**. For more information, see [About Bitwarden Plans](https://bitwarden.com/help/article/about-bitwarden-plans/#compare-the-plans-1).
-{% endnote %}
+{% endcallout %}
-
-### In This Article
-- [Endpoints](#endpoints)
-- [Authentication](#authentication)
-- [Content Types](#content-types)
-- [Sample Request](#sample-request)
-- [Status](#status)
-- [Response Codes](#response-codes)
-- [Further Reading](#further-reading)
 
 ## Endpoints
 
@@ -49,9 +40,9 @@ The API uses bearer access tokens to authenticate with protected API endpoints.
 
 Authentication requests take `client_id` and `client_secret` as required parameters. `client_id` and `client_secret` can be obtained by an **Owner** from the Web Vault by navigating to the **Settings** tab → **My Organization** and scrolling down to the **API Key** section.
 
-{% warning %}
+{% callout warning %}
 Your API key enables full access to your Organization. Keep your API key private. If you believe your API key has been compromised, select the **Rotate API Key** button on this screen. Active uses of your current API key will need to be reconfigured with the new key before use.
-{% endwarning %}
+{% endcallout %}
 
 ### Bearer Access Tokens
 

_articles/organizations/share-to-a-collection.md

@@ -11,10 +11,6 @@ order: 07
 
 Collections are structures used by Organizations to gather together Logins, Notes, Cards, and Identities for sharing. There are a few different ways you can share an item to a Collection:
 
-### In This Article
-- [Share Existing Items From Your Personal Vault](#share-existing-items-from-your-personal-vault)
-- [Create a New Shared Item For Your Organization](#create-a-new-shared-item-for-your-organization)
-
 ## Share Existing Items From Your Personal Vault
 
 All users can share items to an assigned Collection from their personal Vault, unless given **Read Only** access to that Collection. For more information, see [User Types and Access Control](https://bitwarden.com/help/article/user-types-access-control/).
@@ -35,9 +31,9 @@ Shared items will have a **Shared** icon next to the item name:
 
 {% image /organizations/collection-shared-item.png Shared Item icon %}
 
-{% note %}
+{% callout info %}
 Sharing an item with an Organization will transfer ownership to the Organization. This means that anyone with permission can alter the item or delete it, thereby removing it from your Vault.
-{% endnote %}
+{% endcallout %}
 
 ## Create a New Shared Item For Your Organization
 

_articles/organizations/user-seats.md

@@ -10,10 +10,6 @@ order: 10
 
 This article will guide you through the process of adding or removing user seats from your Bitwarden Teams or Enterprise Organization.
 
-### In This Article
-- [Add User Seats](#add-user-seats)
-- [Remove User Seats](#remove-user-seats)
-
 ## Add User Seats
 
 Complete the following steps to add user seats to your Organization:

_articles/organizations/user-types-access-control.md

@@ -12,11 +12,6 @@ Users in Bitwarden Organizations can be granted a variety of User Types and Acce
 
 You can designate User Type and Access Control when you invite users to your Organization (see [Add or Remove Users From Your Organization](https://bitwarden.com/help/article/managing-users/)), or at any time from the **Manage** → **People** screen in your Organization.
 
-### In This Article
-- [User Types](#user-types)
-- [Access Control](#access-control)
-  - [Granular Access Control](#granular-access-control)
-
 ## User Types
 
 User Type determines the level of access that a user will have within your Organization. User Type is configured at the Organization level.
@@ -30,9 +25,9 @@ Options include:
 |Admin|All of the above,<br>+ Assign Users to User Groups<br>+ Create or delete User Groups<br>+ Invite and confirm new Users<br>+ Manage Enterprise Policies<br>+ View Event Logs<br>+ Export Organization Vault data<br><br>**Admin Users automatically have access to all Collections.**|
 |Owner|All of the above,<br>+ Manage Billing, Subscription, and Integrations<br><br>**Owner Users automatically have access to all Collections.**|
 
-{% warning %}
+{% callout warning %}
 **Only an Owner** can create a new Owner or assign Owner to an existing user. For failover purposes, Bitwarden recommends creating multiple Owner users.
-{% endwarning %}
+{% endcallout %}
 
 ## Access Control
 
@@ -54,9 +49,9 @@ To assign users to only selected Collections, check the checkbox to the left of
 
 Selecting **Hide Password** prevents users from seeing or copying all passwords, TOTP seeds, or *Hidden* custom fields. Users with **Hide Passwords** active may only use items in the Collection via Auto-Fill.
 
-{% warning %}
+{% callout warning %}
 Enabling **Hide Passwords** prevents easy copy-and-paste of hidden items, however it does not completely prevent user access to this information. Treat hidden passwords as you would any shared credential.
-{% endwarning %}
+{% endcallout %}
 
 **Read Only**
 

_articles/plans-and-pricing/2020-plan-updates.md

@@ -14,15 +14,6 @@ To upgrade from your Classic 2019 plan to a current plan, [Contact Us](https://b
 
 You **will not** be moved to a current plan automatically, and are **not required** to move to a current plan. If you elect to keep your Classic 2019 plan, there will be no change to your feature offering or price.
 
-### In This Article
-
-- [Free Individual](#free-individual)
-- [Premium Individual](#premium-individual)
-- [Families Organizations](#families-organizations)
-- [Teams Organizations](#teams-organizations)
-- [Enterprise Organizations](#enterprise-organizations)
-- [FAQs About Changes](#faqs-about-changes)
-
 ## Free Individual
 
 There have been no changes made to the **Free** plan for individual users. For more information on what this plan includes, see [About Bitwarden Plans](https://bitwarden.com/help/article/about-bitwarden-plans/).
@@ -60,9 +51,9 @@ As before, all members of your Enterprise Organization will automatically get al
 
 As before, there is no limit to the number of users in your Enterprise Organization. The current Enterprise Organizations plan is $5 Per User Per Month (*compared to $3 PUPM for Classic 2019 plan*).
 
-{% note %}
+{% callout info %}
 Additional enterprise-only capabilities are planned which will only be available to the current plan, including expanded Enterprise Policies.
-{% endnote %}
+{% endcallout %}
 
 ## FAQs About Changes
 

_articles/plans-and-pricing/about-bitwarden-plans.md

@@ -14,19 +14,6 @@ In this article, we'll define each Bitwarden subscription plan to help you along
 
 *This article reflects current Bitwarden plans, updated on September 06, 2020. Users who created accounts prior to that date can learn how to opt-in to the updates **[here](https://bitwarden.com/help/article/2020-plan-updates/)**.*
 
-### In This Article
-- [Bitwarden For You](#bitwarden-for-you)
-  - [Free Individual](#free-individual)
-  - [Premium Individual](#premium-individual)
-  - [Families Organizations](#families-organizations)
-  - [Compare the Plans](#compare-the-plans)
-- [Bitwarden For Your Business](#bitwarden-for-your-business)
-  - [Free Organizations](#free-organizations)
-  - [Teams Organizations](#teams-organizations)
-  - [Enterprise Organizations](#enterprise-organizations)
-  - [Compare the Plans](#compare-the-plans-1)
-- [Next Steps](#next-steps)
-
 ## Bitwarden For You
 
 Bitwarden For You plans are designed to give you or your family all the tools needed to securely manage data:
@@ -39,9 +26,9 @@ We believe everyone should have access to password security tools. The core feat
 
 Upgrade your individual Bitwarden account to unlock premium password security and management features, including advanced 2FA options, the Bitwarden Authenticator (TOTP), encrypted file storage, and more. Upgrade **[now](https://vault.bitwarden.com/#/?premium=purchase)**.
 
-{% note %}
+{% callout info %}
 Premium does not include secure data sharing. In order to access sharing features, you will need a subscription to an Organization ([Free](#free-organizations), [Families](#families-organizations), [Teams](#teams-organizations), or [Enterprise](#enterprise-organizations)). Paid Organizations ([Families](#families-organizations), [Teams](#teams-organizations), or [Enterprise](#enterprise-organizations)) include premium features for all users enrolled in that Organization.
-{% endnote %}
+{% endcallout %}
 
 ### Families Organizations
 

_articles/plans-and-pricing/enterprise-free-trial.md

@@ -19,8 +19,8 @@ Complete the following steps to start your 7 Day Free Trial of Bitwarden Enterpr
 
 3. On the **New Organization** screen, enter an **Organization Name** for your new Organization and the **Billing Email** we can reach you at.
 
-   {% note %}We won't charge you until your 7 Day Free Trial of the Enterprise Plan is over. You can cancel your subscription at any time in the **Settings** tab of your Organization.
+   {% callout info %}We won't charge you until your 7 Day Free Trial of the Enterprise Plan is over. You can cancel your subscription at any time in the **Settings** tab of your Organization.
-   {% endnote %}
+   {% endcallout %}
 
 4. If you're trialing the Enterprise Plan on behalf of a business:
    - Check the **This account is owned by a business** checkbox.

_articles/plans-and-pricing/premium-renewal.md

@@ -13,7 +13,7 @@ Premium Individual subscriptions renew automatically on an annual basis. You can
 
 As your renewal date approaches, Bitwarden recommends that you validate the payment method by navigating to **Settings** → **Billing**. For help updating your payment method, see [Update Your Billing Information](https://bitwarden.com/help/article/update-billing-info/).
 
-{% warning %}
+{% callout warning %}
 If we cannot process your payment method, or if you have cancelled your subscription, your account will revert to [Free Individual](https://bitwarden.com/help/article/about-bitwarden-plans/#free-individual). Until you re-instate your Premium subscription, this will result in the following:
 
 **Two-step Login**
@@ -29,4 +29,4 @@ Your secret keys will remain stored in Vault items in the **Authenticator Key (T
 **Encrypted File Storage**
 
 Files will **not** be deleted from your Vault, however you will not be able to upload or download.
-{% endwarning %}
+{% endcallout %}

_articles/plans-and-pricing/update-billing-info.md

@@ -10,13 +10,9 @@ order: 05
 
 Your billing information can only be updated from the [Bitwarden Web Vault](https://vault.bitwarden.com).
 
-{% warning %}
+{% callout warning %}
 Subscriptions to individual plans and Organizations plans are **separate**; you will need to update your billing information in separate areas. If you have **both** Premium and Organizations subscriptions, updating billing information for one will not update the other.
-{% endwarning %}
+{% endcallout %}
-
-### In This Article
-- [Update Billing Information for Individuals](#update-billing-information-for-individuals)
-- [Update Billing Information for Organizations](#update-billing-information-for-organizations)
 
 ## Update Billing Information for Individuals
 
@@ -53,6 +49,6 @@ Complete the following steps to update the billing information for your Organiza
    - View **Invoices**
    - View **Transactions**
 
-{% note %}
+{% callout info %}
 [Contact Us](https://bitwarden.com/contact/) if your billing information has been updated and your subscription remains disabled.
-{% endnote %}
+{% endcallout %}

_articles/plans-and-pricing/upgrade-from-individual-to-org.md

@@ -10,11 +10,6 @@ order: 03
 ---
 This article will guide existing individual Bitwarden users ([**Free**](https://bitwarden.com/help/article/about-bitwarden-plans/#free-individual) or [**Premium**](https://bitwarden.com/help/article/about-bitwarden-plans/#premium-individual)) through the process of transitioning to an Organizations plan ([**Free**](https://bitwarden.com/help/article/about-bitwarden-plans/#free-organizations), [**Families**](https://bitwarden.com/help/article/about-bitwarden-plans/#families-organizations), [**Teams**](https://bitwarden.com/help/article/about-bitwarden-plans/#teams-organizations), or [**Enterprise**](https://bitwarden.com/help/article/about-bitwarden-plans/#enterprise-organizations)) in order to start securely sharing data between friends, family, co-workers, a department, or an entire company.
 
-### In This Article
-- [Start Your Organization](#start-your-organization)
-- [Cancel Premium Individual Plan](#cancel-premium-individual-plan)
-- [Next Steps](#next-steps)
-
 ## Start Your Organization
 
 Complete the following steps to start your Organization:
@@ -26,8 +21,8 @@ Complete the following steps to start your Organization:
 
 3. On the New Organization screen, enter an **Organization Name** for your new Organization and the **Billing Email** we can reach you at.
 
-   {% note %}Paid Organizations (Families, Teams, or Enterprise) have a 7 Day Free Trial built in. We won't charge you until your trial is over. You can cancel your subscription at any time in the **Settings** tab of your Organization.
+   {% callout info %}Paid Organizations (Families, Teams, or Enterprise) have a 7 Day Free Trial built in. We won't charge you until your trial is over. You can cancel your subscription at any time in the **Settings** tab of your Organization.
-   {% endnote %}
+   {% endcallout %}
 
 4. If you're creating an Organization on behalf of a business:
    - Check the **This account is owned by a business** checkbox.
@@ -40,8 +35,8 @@ Complete the following steps to start your Organization:
    - **Teams:** For businesses and other team organizations. **[Learn more](https://bitwarden.com/help/article/about-bitwarden-plans/#teams-organizations)**.
    - **Enterprise:** For businesses and other large organizations. **[Learn more](https://bitwarden.com/help/article/about-bitwarden-plans/#enterprise-organizations)**.
 
-   {% note %}Paid Organizations (Families, Teams, or Enterprise) include premium features for all enrolled users. For more information about Premium features, see [About Bitwarden Plans](https://bitwarden.com/help/article/about-bitwarden-plans/#compare-the-plans/).
+   {% callout info %}Paid Organizations (Families, Teams, or Enterprise) include premium features for all enrolled users. For more information about Premium features, see [About Bitwarden Plans](https://bitwarden.com/help/article/about-bitwarden-plans/#compare-the-plans/).
-   {% endnote %}
+   {% endcallout %}
 6. If you selected a Paid Organization, enter the following information:
    - For **Teams** or **Enterprise**, enter the number of **User Seats** you need. You can add additional seats later if required.
    - For **Families**, **Teams**, or **Enterprise**, enter the amount of **Additional Storage (GB)** you need. You plan comes with 1 GB of shared encrypted file storage, and you can add additional storage later if needed.
@@ -53,11 +48,11 @@ Complete the following steps to start your Organization:
 
 Paid Organizations (Families, Teams, or Enterprise) automatically provide all users with access to premium features. If you had a Premium Individual subscription at the time of creating the Organization, you can cancel your Premium Individual subscription without losing access to premium features.
 
-{% warning %}
+{% callout warning %}
 Bitwarden offers refunds for cancelled Premium Individual plans **within 30 days of account creation**. If you create a paid Organization within 30 days of creating a Premium individual account, [Contact Us](https://bitwarden.com/contact) to initiation your refund.
 
 At this time, Bitwarden does not offer refunds to paid subscriptions older than 30 days.
-{% endwarning %}
+{% endcallout %}
 
 Complete the following steps to cancel your Premium Individual subscription:
 

_articles/release-notes.md

@@ -0,0 +1,12 @@
+---
+layout: article
+title: Release Notes
+categories: []
+featured: true
+popular: false
+tags: []
+---
+
+### Test 1
+
+These are test release notes.

_articles/security/where-is-data-stored-computer.md

@@ -23,9 +23,9 @@ All sensitive data stored on your computer/device is encrypted. The data can be
   - Standard Installations: `~/.config/Bitwarden`
   - Snap: `~/snap/bitwarden/current/.config/Bitwarden`
 
-{% tip %}
+{% callout success %}
 You can override the storage location for your Bitwarden desktop application data by setting the `BITWARDEN_APPDATA_DIR` environment variable to an absolute path.
-{% endtip %}
+{% endcallout %}
 
 ## Browser Extension
 
@@ -45,9 +45,9 @@ You can override the storage location for your Bitwarden desktop application dat
   - Chrome: `~/.config/google-chrome/Default/Local Extension Settings/nngceckbapebfimnlniiiahkandclblb`
   - Firefox: `~/.mozilla/firefox/your_profile/storage/default/moz-extension+++[UUID]^userContextID=[integer]`
 
-{% note %}
+{% callout info %}
 To enhance security, Firefox uses Universally Unique Identifiers (UUIDs) within extension storage folder names. Use the `about:debugging#/runtime/this-firefox` page (navigate from Firefox's address bar) to locate your Bitwarden extension UUID. Replace [UUID] with that UUID. Note also that Firefox allows users to customize where to store their profiles (and thus local Bitwarden extension data). The location specified above is the default.
-{% endnote %}
+{% endcallout %}
 
 ## Mobile
 
@@ -60,6 +60,6 @@ To enhance security, Firefox uses Universally Unique Identifiers (UUIDs) within
 - macOS: `~/Library/Application Support/Bitwarden CLI`
 - Linux: `~/.config/Bitwarden CLI`
 
-{% tip %}
+{% callout success %}
 You can override the storage location for your Bitwarden CLI application data by setting the `BITWARDENCLI_APPDATA_DIR` environment variable to an absolute path.
-{% endtip %}
+{% endcallout %}

_categories/release-notes.md

@@ -1,5 +0,0 @@
----
-layout: category
-title: Release Notes
-featured: true
----

_config.yml

@@ -6,6 +6,7 @@ port: 4009
 main_baseurl: https://bitwarden.com
 
 sass:
+  sass_dir: ./_scss
   style: compressed
 
 exclude:

_includes/contact.html

@@ -1,9 +1,7 @@
-<div class="panel panel-default panel-contact">
+<div class="card">
-    <div class="panel-heading">
+    <h4 class="card-header"><i class="fa fa-envelope-o"></i> Email Us</h4>
-        <h3 class="panel-title"><i class="fa fa-envelope-o"></i> Email Us</h3>
+    <div class="card-body">
-    </div>
+        <p class="card-text">Want to talk to a human?</p>
-    <div class="panel-body">
-        <p>Want to talk to a human?</p>
         <a href="{{site.main_baseurl}}/contact/" onclick="gaEvent('Talk To Human')">
             <i class="fa fa-long-arrow-right"></i>
             Send Us An Email

_includes/footer.html

@@ -0,0 +1,99 @@
+<footer class="default-footer">
+    <div class="container">
+        <div class="row">
+            <div class="col-sm-2 hidden-xs">
+                <a href="/" class="footer-logo">
+                    <img src="/images/logo-vertical-white.svg" class="img-responsive" width="132" alt="Bitwarden logo" />
+                </a>
+            </div>
+            <div class="col-sm-1 hidden-xs"></div>
+            <div class="col-sm-9 col-xs-12">
+                <div class="row">
+                    <div class="col-sm-4 col-xs-6">
+                        <h4>Products</h4>
+                        <ul class="list-unstyled">
+                            <li><a href="{{site.main_baseurl}}/products/">How it works</a></li>
+                            <li><a href="{{site.main_baseurl}}/products/#features">Features</a></li>
+                            <li><a href="{{site.main_baseurl}}/blog/post/bitwarden-network-security-assessment-2020/">3rd Party Audited</a></li>
+                            <li><a href="{{site.main_baseurl}}/pricing/">Pricing</a></li>
+                        </ul>
+                    </div>
+                    <div class="col-sm-4 col-xs-6">
+                        <h4>Company</h4>
+                        <ul class="list-unstyled">
+                            <li><a href="{{site.main_baseurl}}/about/">About</a></li>
+                            <li><a href="{{site.main_baseurl}}/careers/">Careers</a></li>
+                            <li><a href="{{site.main_baseurl}}/newsfeed/">Newsfeed</a></li>
+                            <li><a href="{{site.main_baseurl}}/blog/" onclick="gaEvent('Footer Blog')">Blog</a></li>
+                            <li><a href="{{site.main_baseurl}}/contact/">Contact</a></li>
+                        </ul>
+                    </div>
+                    <div class="col-sm-4 col-xs-6">
+                        <h4>Resources</h4>
+                        <ul class="list-unstyled">
+                            <li><a href="{{site.main_baseurl}}/download/" onclick="gaEvent('Footer Download')">Download</a></li>
+                            <li><a href="{{site.main_baseurl}}/open-source/">Open Source</a></li>
+                            <li><a href="{{site.baseurl}}/" onclick="gaEvent('Footer Help')">Help/Support</a></li>
+                            <li><a href="{{site.main_baseurl}}/resources/">Resources</a></li>
+                            <li>
+                                <a href="https://community.bitwarden.com" target="_blank" rel="noopener" onclick="gaEvent('Footer Forums')">
+                                    Community
+                                </a>
+                            </li>
+                            <li><a href="{{site.main_baseurl}}/credits/">Credits</a></li>
+                            <li><a href="{{site.main_baseurl}}/sitemap/">Sitemap</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="row copyright">
+            <div class="col-sm-8 col-xs-12">
+                <p><a href="{{site.main_baseurl}}/terms/">Terms of Service</a> · <a href="{{site.main_baseurl}}/privacy/">Privacy Policy</a> · <a href="javascript:void(0);" onclick="Osano.cm.showDrawer()">Cookies</a></p>
+                <p>&copy; Copyright {{ 'now' | date: "%Y" }} Bitwarden, Inc.</p>
+            </div>
+            <div class="col-sm-4 col-xs-12 social">
+                <ul class="list-inline">
+                    <li>
+                        <a href="https://twitter.com/bitwarden" title="Twitter" onclick="gaEvent('Follow Twitter')"
+                            target="_blank" rel="noopener">
+                            <i class="fa fa-twitter"></i><span class="sr-only">Twitter</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://reddit.com/r/bitwarden" title="Reddit" onclick="gaEvent('Follow Reddit')"
+                            target="_blank" rel="noopener">
+                            <i class="fa fa-reddit"></i><span class="sr-only">Reddit</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://community.bitwarden.com/" title="Community Forums" onclick="gaEvent('Follow Discourse')"
+                            target="_blank" rel="noopener">
+                            <i class="fa discourse-logo"></i><span class="sr-only">Community Forums</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://github.com/bitwarden" title="GitHub" onclick="gaEvent('Follow GitHub')" target="_blank" rel="noopener">
+                            <i class="fa fa-github"></i><span class="sr-only">GitHub</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://www.youtube.com/channel/UCId9a_jQqvJre0_dE2lE_Rw" title="YouTube" onclick="gaEvent('Follow YouTube')" target="_blank" rel="noopener">
+                            <i class="fa fa-youtube-play"></i><span class="sr-only">YouTube</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://www.linkedin.com/company/bitwarden1" title="LinkedIn" onclick="gaEvent('Follow LinkedIn')" target="_blank" rel="noopener">
+                            <i class="fa fa-linkedin-square"></i><span class="sr-only">LinkedIn</span>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://www.facebook.com/bitwarden/" title="Facebook" onclick="gaEvent('Follow Facebook')" target="_blank" rel="noopener">
+                            <i class="fa fa-facebook-square"></i><span class="sr-only">Facebook</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</footer>

_includes/header.html

@@ -0,0 +1,20 @@
+<nav class="navbar navbar-expand-lg fixed-top navbar-dark">
+    <a class="navbar-brand" href="/" onclick="gaEvent('Nav Logo')">
+        <i class="fa fa-shield"></i>
+        <span class="hidden-sm"><strong>bit</strong>warden</span>
+    </a>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="menu">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item"><a class="nav-link" href="{{site.baseurl}}/">Help Center</a></li>
+            <li class="nav-item"><a class="nav-link" href="https://community.bitwarden.com/">Forums</a></li>
+            <li class="nav-item"><a class="nav-link" href="{{site.main_baseurl}}/contact/">Contact Us</a></li>
+        </ul>
+        <ul class="navbar-nav">
+            <li class="nav-item"><a class="nav-link" href="{{site.main_baseurl}}/" onclick="gaEvent('Return')"><i class="fa fa-share fa-flip-horizontal fa-fw"></i> Return to bitwarden.com</a></li>
+        </ul>
+    </div>
+</nav>

_includes/search.html

@@ -0,0 +1,19 @@
+<header class="search-header pt-3 pb-4">
+    <div class="container">
+        <form action="{{site.baseurl}}/search/" method="get">
+            <div class="input-group input-group-lg">
+                <input type="search" class="form-control" placeholder="Search the help center..." id="search-box" name="q">
+                <button class="btn btn-light" type="submit" onclick="gaEvent('Search')">
+                    <i class="fa fa-search"></i>
+                    <span class="sr-only">Search</span>
+                </button>
+            </div>
+        </form>
+    </div>
+</header>
+<nav class="search-navbar navbar navbar-light bg-light">
+    <a class="search-sidebar-toggle d-block d-md-none py-2 px-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="menu" aria-expanded="true" aria-label="Toggle sidebar">
+        Contents
+        <i class="fa fa-chevron-down ml-1"></i>
+    </a>
+</nav>

_includes/sidebar.html

@@ -0,0 +1,44 @@
+{% assign sorted_articles = site.articles | sort: 'order' %}
+
+<nav class="bd-links collapse show" id="bd-docs-nav" aria-label="Main navigation">
+    <div class="bd-toc-item d-none d-sm-none d-md-block">
+        <a class="bd-toc-link" href="/help/">
+            Help Center
+        </a>
+    </div>
+    <div class="bd-toc-item">
+        <a class="bd-toc-link" href="{{site.baseurl}}/article/releasenotes">
+            Release Notes
+        </a>
+    </div>
+
+    {% for category in site.categories %}
+    {% if category.hidden != true %}
+    {% assign catFilename = category.path | filename %}
+
+    {% if page.categories contains catFilename or page.url contains catFilename %}
+        {% assign activeCategoryPage = true %}
+    {% else %}
+        {% assign activeCategoryPage = false %}
+    {% endif %}
+
+    <div class="bd-toc-item">
+        <a class="bd-toc-link" data-toggle="collapse" data-target="#{{catFilename}}" role="button" {% if activeCategoryPage %}aria-expanded="true"{% else %}aria-expanded="false"{% endif %} aria-controls="{{catFilename}}" aria-label="Toggle {{category.title}}">
+            {{category.title}}
+            <small class="ml-auto"><i class="fa fa-chevron-down"></i></small>
+        </a>
+        <ul {% if activeCategoryPage %}class="nav bd-sidenav collapse show"{% else %}class="nav bd-sidenav collapse"{% endif %} id="{{catFilename}}">
+            {% for article in sorted_articles %}
+            {% if article.categories contains catFilename and article.hidden != true %}
+            <li {% if page.url contains article.url %}class="active"{% endif %}>
+                <a href="{{site.baseurl}}{{article.url}}">{{article.title}}</a>
+            </li>
+            {% endif %}
+            {% endfor %}
+        </ul>
+    </div>
+
+    {% endif %}
+    {% endfor %}
+
+</nav>

_includes/toc.html

@@ -0,0 +1,2 @@
+<strong>Contents</strong>
+<ul class="section-nav toc-nav"></ul>

_layouts/article.html

@@ -1,43 +1,49 @@
 ---
 layout: default
 ---
-{% assign catIteration = 0 %}
 {% assign catSize = page.categories | size %}
 
-<div class="container">
+<h1 class="article-header">
-    <h1 class="page-header">
     <i class="fa fa-file-text-o"></i>
     {{page.title}}
-    </h1>
+</h1>
-    <div class="breadcrumb">
+{% if catSize > 0 %}
+<div class="breadcrumb article-breadcrumb">
     {{ catSize | pluralize: 'Category', 'Categories' }}:
     {% for category in site.categories %}
     {% assign catFilename = category.path | filename %}
     {% if page.categories contains catFilename %}
-        {% assign catIteration = catIteration | plus: 1 %}
+    <span class="badge badge-pill badge-secondary">{{category.title}}</span>
-        <a href="{{site.baseurl}}{{category.url}}">{{category.title}}</a>{% if catIteration != catSize %}, {% endif %}
     {% endif %}
     {% endfor %}
+</div>
+{% endif %}
+
+<div class="card article-card">
+    <div class="card-body">
+        <div class="d-xl-none bd-toc">
+            {% include toc.html %}
         </div>
-    <div class="panel panel-default article">
+
-        <div class="panel-body">
         {{content}}
     </div>
     {% assign tags_size = page.tags | size %}
     {% if tags_size > 0 %}
-        <div class="panel-footer">
+    <div class="card-footer">
         <i class="fa fa-tags fa-fw"></i>
         {{ page.tags | join: ', ' }}
     </div>
     {% endif %}
-    </div>
+</div>
-    <div class="row article-blocks">
+
+<div class="row">
     <div class="col-sm-6">
-            <div class="panel panel-default panel-rate">
+        <div class="card">
-                <div class="panel-heading">
+            <h4 class="card-header">
-                    <h3 class="panel-title"><i class="fa fa-thumbs-o-up"></i> Was this helpful?</h3>
+                <i class="fa fa-thumbs-o-up"></i>
-                </div>
+                Was this helpful?
-                <div class="panel-body">
+            </h4>
+            <div class="card-body">
                 <p>Rate this article:</p>
                 <div class="rw-ui-container"></div>
             </div>
@@ -46,7 +52,6 @@ layout: default
     <div class="col-sm-6">
         {% include contact.html %}
     </div>
-    </div>
 </div>
 
 <script>

_layouts/category.html

@@ -3,13 +3,12 @@ layout: default
 ---
 {% assign sorted_articles = site.articles | sort: 'order' %}
 
-<div class="container">
+<h1 class="article-header">
-    <h1 class="page-header">
     <i class="fa fa-folder-open-o"></i>
     {{page.title}}
-    </h1>
+</h1>
-    <div class="row">
+<div class="row">
-        <div class="col-md-8 articles">
+    <div class="col-md-8">
         <ol>
             {% for article in sorted_articles %}
             {% assign pageFilename = page.path | filename %}
@@ -21,22 +20,5 @@ layout: default
     </div>
     <div class="col-md-4">
         {% include contact.html %}
-            <div class="panel panel-default articles" style="margin-bottom: 0;">
-                <div class="panel-heading">
-                    <h3 class="panel-title"><i class="fa fa-list-alt"></i> Categories</h3>
-                </div>
-                <div class="panel-body small">
-                    <ul>
-                        {% for category in site.categories %}
-                        {% if category.hidden != true %}
-                        <li>
-                            <a href="{{site.baseurl}}{{category.url}}">{{category.title}}</a>
-                        </li>
-                        {% endif %}
-                        {% endfor %}
-                    </ul>
-                </div>
-            </div>
-        </div>
     </div>
 </div>

_layouts/default.html

@@ -32,163 +32,36 @@
 </head>
 
 <body>
-    <nav class="navbar navbar-inverse navbar-fixed-top">
+    {% include header.html %}
-        <div class="container">
+    {% include search.html %}
-            <div class="navbar-header page-scroll">
+
-                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
+    <div class="container-fluid">
-                    <span class="sr-only">Toggle navigation</span>
+        <div class="row flex-xl-nowrap">
-                    <span class="icon-bar"></span>
+            <div class="col-md-3 col-xl-2 bd-sidebar">
-                    <span class="icon-bar"></span>
+                {% include sidebar.html %}
-                    <span class="icon-bar"></span>
-                </button>
-                <a class="navbar-brand" href="{{site.main_baseurl}}/" onclick="gaEvent('Nav Logo')">
-                    <i class="fa fa-shield"></i>
-                    <span class="hidden-sm"><strong>bit</strong>warden</span>
-                </a>
-            </div>
-            <div class="collapse navbar-collapse" id="menu">
-                <ul class="nav navbar-nav">
-                    <li><a href="{{site.baseurl}}/">Help Center</a></li>
-                    <li><a href="https://community.bitwarden.com/">Forums</a></li>
-                    <li><a href="{{site.main_baseurl}}/contact/">Contact Us</a></li>
-                </ul>
-                <ul class="nav navbar-nav navbar-right">
-                    <li>
-                        <a href="{{site.main_baseurl}}/" onclick="gaEvent('Return')">
-                            <i class="fa fa-share fa-flip-horizontal fa-fw"></i> Return to bitwarden.com
-                        </a>
-                    </li>
-                </ul>
-            </div>
             </div>
+
+            {% if page.url contains "article" %}
+            <nav class="d-none d-xl-block col-xl-2 my-md-4 pb-md-4 bd-toc bd-toc-default" aria-label="Secondary navigation">
+                {% include toc.html %}
             </nav>
-    <header>
+            {% endif %}
-        <div class="container">
-            <form action="{{site.baseurl}}/search/" method="get">
-                <div class="input-group input-group-lg">
-                    <input type="search" class="form-control" placeholder="Search the help center..."
-                           id="search-box" name="q">
-                    <span class="input-group-btn">
-                        <button class="btn btn-default" type="submit" onclick="gaEvent('Search')">
-                            <i class="fa fa-search"></i>
-                            <span class="sr-only">Search</span>
-                        </button>
-                    </span>
-                </div>
-            </form>
-        </div>
-    </header>
 
-    <content>
+            <main class="col-md-9 col-xl-8 pt-4 pb-5 pl-md-5 pr-md-5 bd-content" role="main">
                 {{content}}
-    </content>
+            </main>
+        </div>
+    </div>
 
-
+    {% include footer.html %}
-    <footer class="default-footer">
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-2 hidden-xs">
-                    <a href="/" class="footer-logo">
-                        <img src="/images/logo-vertical-white.svg" class="img-responsive" width="132" alt="Bitwarden logo" />
-                    </a>
-                </div>
-                <div class="col-sm-1 hidden-xs"></div>
-                <div class="col-sm-9 col-xs-12">
-                    <div class="row">
-                        <div class="col-sm-4 col-xs-6">
-                            <h4>Products</h4>
-                            <ul class="list-unstyled">
-                                <li><a href="{{site.main_baseurl}}/products/">How it works</a></li>
-                                <li><a href="{{site.main_baseurl}}/products/#features">Features</a></li>
-                                <li><a href="{{site.main_baseurl}}/blog/post/bitwarden-network-security-assessment-2020/">3rd Party Audited</a></li>
-                                <li><a href="{{site.main_baseurl}}/pricing/">Pricing</a></li>
-                            </ul>
-                        </div>
-                        <div class="col-sm-4 col-xs-6">
-                            <h4>Company</h4>
-                            <ul class="list-unstyled">
-                                <li><a href="{{site.main_baseurl}}/about/">About</a></li>
-                                <li><a href="{{site.main_baseurl}}/careers/">Careers</a></li>
-                                <li><a href="{{site.main_baseurl}}/newsfeed/">Newsfeed</a></li>
-                                <li><a href="{{site.main_baseurl}}/blog/" onclick="gaEvent('Footer Blog')">Blog</a></li>
-                                <li><a href="{{site.main_baseurl}}/contact/">Contact</a></li>
-                            </ul>
-                        </div>
-                        <div class="col-sm-4 col-xs-6">
-                            <h4>Resources</h4>
-                            <ul class="list-unstyled">
-                                <li><a href="{{site.main_baseurl}}/download/" onclick="gaEvent('Footer Download')">Download</a></li>
-                                <li><a href="{{site.main_baseurl}}/open-source/">Open Source</a></li>
-                                <li><a href="{{site.baseurl}}/" onclick="gaEvent('Footer Help')">Help/Support</a></li>
-                                <li><a href="{{site.main_baseurl}}/resources/">Resources</a></li>
-                                <li>
-                                    <a href="https://community.bitwarden.com" target="_blank" rel="noopener" onclick="gaEvent('Footer Forums')">
-                                        Community
-                                    </a>
-                                </li>
-                                <li><a href="{{site.main_baseurl}}/credits/">Credits</a></li>
-                                <li><a href="{{site.main_baseurl}}/sitemap/">Sitemap</a></li>
-                            </ul>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="row copyright">
-                <div class="col-sm-8 col-xs-12">
-                    <p><a href="{{site.main_baseurl}}/terms/">Terms of Service</a> · <a href="{{site.main_baseurl}}/privacy/">Privacy Policy</a> · <a href="javascript:void(0);" onclick="Osano.cm.showDrawer()">Cookies</a></p>
-                    <p>&copy; Copyright {{ 'now' | date: "%Y" }} Bitwarden, Inc.</p>
-                </div>
-                <div class="col-sm-4 col-xs-12 social">
-                    <ul class="list-inline">
-                        <li>
-                            <a href="https://twitter.com/bitwarden" title="Twitter" onclick="gaEvent('Follow Twitter')"
-                                target="_blank" rel="noopener">
-                                <i class="fa fa-twitter"></i><span class="sr-only">Twitter</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="https://reddit.com/r/bitwarden" title="Reddit" onclick="gaEvent('Follow Reddit')"
-                                target="_blank" rel="noopener">
-                                <i class="fa fa-reddit"></i><span class="sr-only">Reddit</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="https://community.bitwarden.com/" title="Community Forums" onclick="gaEvent('Follow Discourse')"
-                                target="_blank" rel="noopener">
-                                <i class="fa discourse-logo"></i><span class="sr-only">Community Forums</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="https://github.com/bitwarden" title="GitHub" onclick="gaEvent('Follow GitHub')" target="_blank" rel="noopener">
-                                <i class="fa fa-github"></i><span class="sr-only">GitHub</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="https://www.youtube.com/channel/UCId9a_jQqvJre0_dE2lE_Rw" title="YouTube" onclick="gaEvent('Follow YouTube')" target="_blank" rel="noopener">
-                                <i class="fa fa-youtube-play"></i><span class="sr-only">YouTube</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="https://www.linkedin.com/company/bitwarden1" title="LinkedIn" onclick="gaEvent('Follow LinkedIn')" target="_blank" rel="noopener">
-                                <i class="fa fa-linkedin-square"></i><span class="sr-only">LinkedIn</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a href="https://www.facebook.com/bitwarden/" title="Facebook" onclick="gaEvent('Follow Facebook')" target="_blank" rel="noopener">
-                                <i class="fa fa-facebook-square"></i><span class="sr-only">Facebook</span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </footer>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js" crossorigin="anonymous"
         integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo= sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh sha512-bnIvzh6FU75ZKxp0GXLH9bewza/OIw6dLVh9ICg0gogclmYGguQJWl8U30WpbsGTqbIiAwxTsbe76DErLq5EDQ=="></script>
     <script>(window.jQuery || document.write('<script src="{{site.baseurl}}/lib\/jquery\/jquery.min.js?v={{"now" | date: "%s"}}"><\/script>'));</script>
 
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" crossorigin="anonymous"
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.3/js/bootstrap.min.js" crossorigin="anonymous"
             integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4= sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd sha512-oBTprMeNEKCnqfuqKd6sbvFzmFQtlXS3e0C/RGFV0hD6QzhHV+ODfaQbAlmY6/q0ubbwlAM/nCJjkrgA3waLzg=="></script>
     <script>((window.jQuery && window.jQuery.fn && window.jQuery.fn.modal) || document.write('<script src="{{site.baseurl}}/lib\/bootstrap\/js\/bootstrap.min.js?v={{"now" | date: "%s"}}"><\/script>'));</script>
 

_plugins/alert.rb

@@ -1,27 +0,0 @@
-# Source: https://stackoverflow.com/questions/19169849/how-to-get-markdown-processed-content-in-jekyll-tag-plugin
-
-module Jekyll
-  module Tags
-    class AlertTag < Liquid::Block
-      def initialize(tag_name, type, tokens)
-        super
-        type.strip!
-        if %w(info danger warning).include?(type)
-          @type = type
-        else
-          puts "#{type} alert not supported. Defaulting to info"
-          @type = "info"
-        end
-      end
-
-      def render(context)
-        site = context.registers[:site]
-        converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
-        output = converter.convert(super(context))
-        "<div class=\"alert alert-#{@type}\">#{output}</div>"
-      end
-    end
-  end
-end
-
-Liquid::Template.register_tag('alert', Jekyll::Tags::AlertTag)

_plugins/callout.rb

@@ -6,11 +6,22 @@ module Jekyll
       def initialize(tag_name, type, tokens)
         super
         type.strip!
-        if %w(info danger warning primary success default).include?(type)
+        if %w(info warning success).include?(type)
           @type = type
         else
-          puts "#{type} callout not supported. Defaulting to default"
+          puts "#{type} callout not supported. Defaulting to info"
-          @type = "default"
+          @type = "info"
+        end
+
+        if @type == 'warning'
+          @fa = 'warning'
+          @header = 'Warning'
+        elsif @type =='success'
+          @fa = 'lightbulb-o'
+          @header = 'Tip'
+        else
+          @fa = 'info-circle'
+          @header = 'Note'
         end
       end
 
@@ -18,7 +29,11 @@ module Jekyll
         site = context.registers[:site]
         converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
         output = converter.convert(super(context))
-        "<div class=\"callout callout-#{@type}\">#{output}</div>"
+
+        "<div class=\"callout callout-#{@type}\">
+          <h5><i class=\"fa fa-#{@fa}\"></i> #{@header}</h5>
+          #{output}
+        </div>"
       end
     end
   end

_plugins/note.rb

@@ -1,17 +0,0 @@
-module Jekyll
-  module Tags
-    class NoteTag < Liquid::Block
-      def render(context)
-        site = context.registers[:site]
-        converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
-        output = converter.convert(super(context))
-        "<div class=\"callout callout-info\">
-            <h3><i class=\"fa fa-info-circle\"></i> Note</h3>
-            #{output}
-        </div>"
-      end
-    end
-  end
-end
-
-Liquid::Template.register_tag('note', Jekyll::Tags::NoteTag)

_plugins/tip.rb

@@ -1,17 +0,0 @@
-module Jekyll
-  module Tags
-    class TipTag < Liquid::Block
-      def render(context)
-        site = context.registers[:site]
-        converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
-        output = converter.convert(super(context))
-        "<div class=\"callout callout-success\">
-            <h3><i class=\"fa fa-lightbulb-o\"></i> Tip</h3>
-            #{output}
-        </div>"
-      end
-    end
-  end
-end
-
-Liquid::Template.register_tag('tip', Jekyll::Tags::TipTag)

_plugins/warning.rb

@@ -1,17 +0,0 @@
-module Jekyll
-  module Tags
-    class WarningTag < Liquid::Block
-      def render(context)
-        site = context.registers[:site]
-        converter = site.find_converter_instance(::Jekyll::Converters::Markdown)
-        output = converter.convert(super(context))
-        "<div class=\"callout callout-warning\">
-            <h3><i class=\"fa fa-warning\"></i> Warning</h3>
-            #{output}
-        </div>"
-      end
-    end
-  end
-end
-
-Liquid::Template.register_tag('warning', Jekyll::Tags::WarningTag)

_sass/_bootstrap.scss

@@ -1,63 +0,0 @@
-$brand-primary: #175DDC;
-$brand-danger: #dd4b39;
-$brand-success: #00a65a;
-$brand-info: #555555;
-$brand-warning: #aa6708;
-$brand-primary-accent: #1252A3;
-$brand-secondary: #1A3B66;
-$brand-dark-accent: #1A3B66;
-
-$font-size-base: 18px;
-$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-$headings-font-family: "Open Sans", sans-serif;
-$text-color: #000000;
-$gray-lighter: lighten(#000, 93.5%);
-
-$font-size-h1: floor(($font-size-base * 2.0)) !default;
-$font-size-h2: floor(($font-size-base * 1.75)) !default;
-$font-size-h3: ceil(($font-size-base * 1.5)) !default;
-$font-size-h4: ceil(($font-size-base * 1.25)) !default;
-
-$blockquote-font-size: 16px;
-
-$navbar-height: 80px;
-$navbar-margin-bottom: 0;
-$navbar-border-radius: 0;
-
-$code-bg: $gray-lighter;
-$code-color: $text-color;
-
-//=== Inverted navbar
-// Reset inverted navbar basics
-$navbar-inverse-color: #fff;
-$navbar-inverse-bg: $brand-primary;
-$navbar-inverse-border: $brand-primary;
-
-// Inverted navbar links
-$navbar-inverse-link-color: #fff;
-$navbar-inverse-link-hover-color: lighten($brand-primary, 35%);
-$navbar-inverse-link-hover-bg: transparent;
-$navbar-inverse-link-active-color: #fff;
-$navbar-inverse-link-active-bg: $brand-primary;
-$navbar-inverse-link-disabled-color: #444;
-$navbar-inverse-link-disabled-bg: transparent;
-
-// Inverted navbar brand label
-$navbar-inverse-brand-color: $navbar-inverse-link-color;
-$navbar-inverse-brand-hover-color: #fff;
-$navbar-inverse-brand-hover-bg: transparent;
-
-// Inverted navbar toggle
-$navbar-inverse-toggle-hover-bg: $brand-primary-accent;
-$navbar-inverse-toggle-icon-bar-bg: #fff;
-$navbar-inverse-toggle-border-color: darken($brand-primary, 5%);
-
-//== Container sizes
-$grid-gutter-width: 30px !default;
-
-// Screen sizes
-$screen-xxs: 375px;
-$screen-xxs-min: 375px;
-$screen-xxs-max: ($screen-xxs-min - 1);
-
-@import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

_sass/_help.scss

@@ -1,493 +0,0 @@
-@import "bootstrap";
-
-html {
-    position: relative;
-    min-height: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-    padding-top: 81px;
-}
-
-:target::before {
-    content: '';
-    display: block;
-    height: 91px;
-    margin-top: -91px;
-}
-
-.navbar-brand {
-    @media(min-width:$screen-sm) {
-        .fa {
-            font-size: 1.33333333em;
-            line-height: 0.75em;
-            vertical-align: -15%;
-        }
-
-        &:hover {
-            color: $navbar-inverse-link-hover-color !important;
-        }
-    }
-
-    @media(max-width:$screen-xs-max) {
-        font-size: 30px;
-        padding-top: 25px;
-        font-weight: 300;
-    }
-}
-
-.navbar-nav {
-    b {
-        font-weight: 600;
-    }
-}
-
-@media(max-width:$screen-xs-max) {
-    .navbar-collapse {
-        background-color: $brand-primary-accent;
-        border: 0;
-        @include box-shadow(inset 0 10px 10px -10px rgba(0,0,0,.35), inset 0 -10px 10px -10px rgba(0,0,0,.35));
-    }
-}
-
-.btn-secondary {
-    @include button-variant(#ffffff, $brand-secondary, $brand-secondary);
-}
-
-.btn-xl {
-    @include button-size(20px, 25px, $font-size-large, $line-height-large, 5px);
-}
-
-header {
-    padding: 10px 0 40px;
-    color: #fff;
-    position: relative;
-    text-align: center;
-    background: $brand-primary;
-}
-
-content {
-    padding: 30px 0;
-    display: block;
-    font-size: 16px;
-}
-
-footer.default-footer {
-    background-color: $brand-dark-accent;
-    margin: 0;
-    color: #fff;
-    width: 100%;
-    font-size: 16px;
-    padding: 40px 0 100px;
-
-    .footer-logo {
-        display: block;
-        margin-bottom: 30px;
-    }
-
-    a {
-        color: #fff;
-
-        &:hover,
-        &:focus {
-            color: #fff;
-        }
-
-        &[disabled] {
-            cursor: not-allowed;
-            opacity: 0.5;
-            text-decoration: none;
-        }
-    }
-
-    h4 {
-        margin-top: 0;
-    }
-
-    ul {
-        li {
-            padding-bottom: 10px;
-        }
-    }
-
-    .copyright {
-        margin-top: 30px;
-    }
-
-    .social {
-        .list-inline {
-            display: flex;
-            align-items: flex-start;
-            justify-content: flex-end;
-        }
-
-        i {
-            font-size: 30px;
-
-            &.discourse-logo {
-                height: 30px;
-                width: 30px;
-
-                &:before {
-                    background-size: 30px 30px;
-                    background: url('./../images/discourse-logo.svg') no-repeat center top;
-                    content: '';
-                    display: block;
-                    height: 30px;
-                    width: 30px;
-                }
-
-            }
-        }
-    }
-
-    @media(max-width:$screen-sm) {
-        .social {
-            .list-inline {
-                justify-content: flex-start;
-            }
-        }
-    }
-}
-
-.panel-secondary {
-    @include panel-variant($brand-secondary, #ffffff, $brand-secondary, $brand-secondary);
-}
-
-.panel-primary-accent {
-    @include panel-variant($brand-primary-accent, #ffffff, $brand-primary-accent, $brand-primary-accent);
-}
-
-.page-header {
-    margin-top: 0;
-    padding-left: 35px;
-
-    i {
-        float: left;
-        margin-left: -35px;
-    }
-
-    @media(min-width:$screen-sm) {
-        padding-left: 38px;
-
-        i {
-            margin-left: -38px;
-        }
-    }
-
-    @media(min-width:$screen-md) {
-        padding-left: 52px;
-
-        i {
-            margin-left: -52px;
-        }
-    }
-}
-
-@media(max-width:$screen-sm-max) {
-    h1 {
-        font-size: 30px;
-    }
-}
-
-@media(max-width:$screen-xs-max) {
-    h1 {
-        font-size: 25px;
-    }
-}
-
-.article-blocks {
-    .panel-contact {
-        margin-bottom: 0;
-    }
-
-    @media(min-width:$screen-sm) {
-        .panel-body {
-            min-height: 95px;
-        }
-
-        .panel {
-            margin-bottom: 0;
-        }
-    }
-}
-
-@media(min-width:$screen-md) {
-    .main {
-        .articles:last-child {
-            margin-bottom: 0;
-        }
-    }
-}
-
-.articles {
-    margin-bottom: 25px;
-
-    ul, ol {
-        margin-left: 0;
-        padding-left: 20px;
-
-        li + li {
-            margin-top: 0.25em;
-        }
-    }
-
-    &.panel {
-        ul, ol {
-            margin-bottom: 0;
-        }
-    }
-
-    .fa-ul {
-        padding-left: 30px;
-
-        .fa {
-            color: $text-muted;
-        }
-    }
-}
-
-.article {
-    .panel-body > *:first-child {
-        margin-top: 0;
-    }
-
-    .panel-body > *:last-child {
-        margin-bottom: 0;
-    }
-
-    ul, ol {
-        li + li,
-        ul li:first-child,
-        ol li:first-child {
-            margin-top: 0.40em;
-        }
-    }
-
-    @media(max-width:$screen-xs-max) {
-        &.panel {
-            border: 0;
-            @include box-shadow(none);
-
-            .panel-body {
-                padding: 0;
-            }
-
-            .panel-footer {
-                margin-top: 10px;
-                border: 1px solid $panel-default-border;
-                border-radius: $panel-border-radius;
-            }
-        }
-    }
-
-    h2, h3 {
-        text-transform: uppercase;
-        font-weight: bold;
-    }
-
-    h2 {
-        font-size: 22px;
-        margin-top: 50px;
-        margin-bottom: 20px;
-    }
-
-    h3 {
-        font-size: 17px;
-    }
-
-    h4 {
-        font-size: 16px;
-        font-weight: bold;
-    }
-
-    h5 {
-        font-size: 16px;
-    }
-
-    @media (min-width: $screen-sm-min) {
-        .img-tag {
-            max-width: 600px;
-            max-height: 600px;
-        }
-    }
-
-    figure {
-        display: block;
-        margin: 0 auto 35px;
-
-        figcaption {
-            font-size: 14px;
-            color: $text-muted;
-        }
-    }
-
-    .panel-body > ol {
-        counter-reset: li;
-        list-style: none;
-        position: relative;
-        margin-left: 0;
-        padding-left: 0;
-
-        > li {
-            padding: 5px 0 5px 50px;
-            position: relative;
-            margin-bottom: 5px;
-
-            &:before {
-                content: counter(li);
-                counter-increment: li;
-                position: absolute;
-                top: 0;
-                left: 0;
-                height: 100%;
-                width: 30px;
-                padding: 0 10px 0 0;
-                color: $text-muted;
-                font-size: 22px;
-                font-weight: bold;
-                line-height: 35px;
-                text-align: right;
-                border-right: 1px solid $table-border-color;
-            }
-
-            & + li {
-                margin-top: 0;
-            }
-        }
-
-        ol, ul {
-            margin-bottom: 12.5px;
-
-            ol, ul {
-                margin-bottom: 0;
-            }
-        }
-    }
-
-    table {
-        @extend .table;
-        @extend .table-bordered;
-        @extend .table-striped;
-    }
-
-    .header-link {
-        color: $text-muted;
-        text-decoration: none !important;
-        opacity: 0;
-        margin-left: 5px;
-
-        @media (max-width: $screen-sm-max) {
-            display: none !important;
-        }
-    }
-
-    h2:hover > .header-link,
-    h3:hover > .header-link {
-        opacity: .5;
-        -webkit-transition: color .16s linear;
-        transition: color .16s linear;
-    }
-
-    h2:hover > .header-link:hover,
-    h3:hover > .header-link:hover,
-    h2:hover > .header-link:focus,
-    h3:hover > .header-link:focus {
-        opacity: 1;
-    }
-
-    pre code {
-        white-space: pre;
-        word-break: initial;
-        word-wrap: initial;
-        display: block;
-    }
-
-    li img, li pre {
-        margin-top: 12.5px;
-    }
-
-    li > *:last-child {
-        margin-bottom: 0;
-    }
-}
-
-a[rel='lightbox'] {
-    cursor: -webkit-zoom-in;
-    cursor: -moz-zoom-in;
-    cursor: zoom-in;
-}
-
-.alert, .callout {
-    p, ul, ol {
-        margin-bottom: 12.5px;
-    }
-
-    p:last-child, ul:last-child, ol:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.callout {
-    padding: 20px;
-    margin: 20px 0;
-    border: 1px solid $panel-default-border;
-    border-left-width: 5px;
-    border-radius: $panel-border-radius;
-    background-color: #fafafa;
-
-    h3 {
-        margin-top: 0;
-    }
-
-    &.callout-primary, &.callout-info {
-        border-left-color: $brand-primary;
-
-        h3 {
-            color: $brand-primary;
-        }
-    }
-
-    &.callout-default {
-        border-left-color: $gray;
-
-        h3 {
-            color: $gray;
-        }
-    }
-
-    &.callout-danger {
-        border-left-color: $brand-danger;
-
-        h3 {
-            color: $brand-danger;
-        }
-    }
-
-    &.callout-success {
-        border-left-color: $brand-success;
-
-        h3 {
-            color: $brand-success;
-        }
-    }
-
-    &.callout-warning {
-        border-left-color: $brand-warning;
-
-        h3 {
-            color: $brand-warning;
-        }
-    }
-}
-
-code {
-    border-radius: 2px;
-}
-
-blockquote {
-    padding-left: 15px;
-    padding-right: 15px;
-}

_scss/_all.scss

@@ -0,0 +1,38 @@
+html {
+    position: relative;
+    min-height: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+    padding-top: $navbar-height;
+}
+
+// :target::before {
+//     content: '';
+//     display: block;
+//     height: $navbar-height + 5px;
+//     margin-top: -$navbar-height + 5px;
+// }
+
+a {
+    color: $link-color;
+
+    &:hover {
+        color: $link-hover-color;
+    }
+}
+
+a[rel='lightbox'] {
+    cursor: -webkit-zoom-in;
+    cursor: -moz-zoom-in;
+    cursor: zoom-in;
+}
+
+pre {
+    background: $gray-100;
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
+    padding: 0.5rem;
+}

_scss/_article.scss

@@ -0,0 +1,119 @@
+.article-header {
+    border-bottom: 1px solid $border-color;
+    display: flex;
+    align-items: center;
+    margin-bottom: 25px;
+    padding-bottom: 15px;
+    font-weight: normal;
+
+    i {
+        margin-right: 10px;
+    }
+}
+
+.article-breadcrumb {
+    align-items: center;
+
+    .badge {
+        margin-left: 0.25rem;
+    }
+}
+
+.article-card.card {
+    margin-bottom: 1.5rem;
+
+    .card-body {
+        >*:first-child,
+        >*:nth-child(2) {
+            margin-top: 0;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin-top: 25px;
+        }
+    }
+
+    .header-link {
+        color: $text-muted;
+        font-size: $h3-font-size;
+        text-decoration: none;
+        opacity: 0;
+        margin-left: 5px;
+    }
+
+    h2:hover > .header-link,
+    h3:hover > .header-link {
+        opacity: .5;
+        -webkit-transition: color .16s linear;
+        transition: color .16s linear;
+
+        &:hover,
+        &:focus {
+            opacity: 1;
+        }
+    }
+
+    ol {
+        counter-reset: li;
+        list-style: none;
+        padding-left: 0;
+
+        > li {
+            padding: 0.5rem 0 0.5rem 2.5rem;
+            position: relative;
+            margin-bottom: 0.5rem;
+
+            &:before {
+                content: counter(li);
+                counter-increment: li;
+                color: $gray-600;
+                font-size: 1.25rem;
+                font-weight: bold;
+                border-right: 1px solid $border-color;
+                position: absolute;
+                top: 0;
+                left: 0;
+                height: 100%;
+                width: 1.5rem;
+                padding: 0 10px 0 0;
+            }
+        }
+    }
+
+    .bd-toc {
+        margin-bottom: 25px;
+
+        strong {
+            margin-top: 0;
+            margin-bottom: 0.5rem;
+            padding: 0;
+        }
+
+        .toc-entry {
+            a {
+                color: $link-color;
+                padding: .125rem 0;
+
+                &:hover {
+                    color: $link-hover-color;
+                    text-decoration: underline;
+                }
+            }
+
+            &.toc-h3 {
+                padding-left: 1rem;
+            }
+        }
+    }
+}
+
+.search-results {
+    small.text-muted {
+        margin-left: 0.5rem;
+    }
+}

_scss/_callout.scss

@@ -0,0 +1,56 @@
+.callout {
+    padding: 1rem;
+    margin: 1rem 0;
+    border: 1px solid $border-color;
+    border-left-width: 4px;
+    border-radius: $border-radius;
+    background-color: #fafafa;
+
+    > *:last-child {
+        margin-bottom: 0;
+    }
+
+    h5 {
+        margin-top: 0 !important;
+    }
+
+    &.callout-primary, &.callout-info {
+        border-left-color: $primary;
+
+        h5 {
+            color: $primary;
+        }
+    }
+
+    &.callout-default {
+        border-left-color: $border-color;
+
+        h5 {
+            color: $border-color;
+        }
+    }
+
+    &.callout-danger {
+        border-left-color: $danger;
+
+        h5 {
+            color: $danger;
+        }
+    }
+
+    &.callout-success {
+        border-left-color: $success;
+
+        h5 {
+            color: $success;
+        }
+    }
+
+    &.callout-warning {
+        border-left-color: $warning;
+
+        h5 {
+            color: $warning;
+        }
+    }
+}

_scss/_footer.scss

@@ -0,0 +1,78 @@
+
+footer.default-footer {
+    background-color: $secondary;
+    margin: 0;
+    color: #fff;
+    width: 100%;
+    font-size: 16px;
+    padding: 40px 0 100px;
+
+    .footer-logo {
+        display: block;
+        margin-bottom: 30px;
+    }
+
+    a {
+        color: #fff;
+
+        &:hover,
+        &:focus {
+            color: #fff;
+        }
+
+        &[disabled] {
+            cursor: not-allowed;
+            opacity: 0.5;
+            text-decoration: none;
+        }
+    }
+
+    h4 {
+        margin-top: 0;
+    }
+
+    ul {
+        li {
+            padding-bottom: 10px;
+        }
+    }
+
+    .copyright {
+        margin-top: 30px;
+    }
+
+    .social {
+        .list-inline {
+            display: flex;
+            align-items: flex-start;
+            justify-content: flex-end;
+
+            li {
+                margin: 0 5px;
+            }
+
+            a {
+                display: block;
+            }
+
+            i {
+                font-size: 30px;
+
+                &.discourse-logo {
+                    height: 30px;
+                    width: 30px;
+
+                    &:before {
+                        background-size: 30px 30px;
+                        background: url('./../images/discourse-logo.svg') no-repeat center top;
+                        content: '';
+                        display: block;
+                        height: 30px;
+                        width: 30px;
+                    }
+
+                }
+            }
+        }
+    }
+}

_scss/_header.scss

@@ -0,0 +1,17 @@
+nav.navbar-dark {
+    background: $primary;
+
+    .navbar-brand {
+        font-size: 1.5rem;
+    }
+
+    .navbar-nav {
+        .nav-link {
+            color: #fff;
+
+            &:hover {
+                opacity: 0.75;
+            }
+        }
+    }
+}

_scss/_main.scss

@@ -0,0 +1,14 @@
+.main-container {
+    .card-popular {
+        .card-header {
+            background: $secondary;
+            color: #fff;
+        }
+    }
+
+    .card-body {
+        ul {
+            margin-bottom: 0;
+        }
+    }
+}