diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 18bcc86b01d..0dedd4e1ca5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -17,6 +17,7 @@ import { AppComponent } from './app.component';
 import { ModalComponent } from './modal.component';
 
 import { AvatarComponent } from './components/avatar.component';
+import { CalloutComponent } from './components/callout.component';
 
 import { FooterComponent } from './layouts/footer.component';
 import { FrontendLayoutComponent } from './layouts/frontend-layout.component';
@@ -102,6 +103,7 @@ import { SearchCiphersPipe } from 'jslib/angular/pipes/search-ciphers.pipe';
         BulkDeleteComponent,
         BulkMoveComponent,
         BulkShareComponent,
+        CalloutComponent,
         ChangeEmailComponent,
         ChangePasswordComponent,
         CiphersComponent,
diff --git a/src/app/components/callout.component.html b/src/app/components/callout.component.html
new file mode 100644
index 00000000000..0093b78c2d1
--- /dev/null
+++ b/src/app/components/callout.component.html
@@ -0,0 +1,7 @@
+<div class="callout callout-{{calloutStyle}}" role="alert">
+    <h3 class="callout-heading" *ngIf="title">
+        <i class="fa {{icon}}" *ngIf="icon"></i>
+        {{title}}
+    </h3>
+    <ng-content></ng-content>
+</div>
diff --git a/src/app/components/callout.component.ts b/src/app/components/callout.component.ts
new file mode 100644
index 00000000000..34af2873c4f
--- /dev/null
+++ b/src/app/components/callout.component.ts
@@ -0,0 +1,53 @@
+import {
+    Component,
+    Input,
+    OnInit,
+} from '@angular/core';
+
+import { I18nService } from 'jslib/abstractions/i18n.service';
+
+@Component({
+    selector: 'app-callout',
+    templateUrl: 'callout.component.html',
+})
+export class CalloutComponent implements OnInit {
+    @Input() type = 'info';
+    @Input() icon: string;
+    @Input() title: string;
+
+    calloutStyle: string;
+
+    constructor(private i18nService: I18nService) { }
+
+    ngOnInit() {
+        this.calloutStyle = this.type;
+
+        if (this.type === 'warning' || this.type === 'danger') {
+            if (this.type === 'danger') {
+                this.calloutStyle = 'danger';
+            }
+            if (this.title === undefined) {
+                this.title = this.i18nService.t('warning');
+            }
+            if (this.icon === undefined) {
+                this.icon = 'fa-warning';
+            }
+        } else if (this.type === 'error') {
+            this.calloutStyle = 'danger';
+            if (this.title === undefined) {
+                this.title = this.i18nService.t('error');
+            }
+            if (this.icon === undefined) {
+                this.icon = 'fa-bolt';
+            }
+        } else if (this.type === 'tip') {
+            this.calloutStyle = 'success';
+            if (this.title === undefined) {
+                this.title = this.i18nService.t('tip');
+            }
+            if (this.icon === undefined) {
+                this.icon = 'fa-lightbulb-o';
+            }
+        }
+    }
+}
diff --git a/src/app/settings/change-email.component.html b/src/app/settings/change-email.component.html
index 3b3501b24ee..b78fac20d83 100644
--- a/src/app/settings/change-email.component.html
+++ b/src/app/settings/change-email.component.html
@@ -15,10 +15,7 @@
     <ng-container *ngIf="tokenSent">
         <hr>
         <p>{{'changeEmailDesc' | i18n : newEmail}}</p>
-        <div class="callout callout-warning" role="alert">
-            <h3 class="callout-heading">{{'warning' | i18n}}</h3>
-            <p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
-        </div>
+        <app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
         <div class="row">
             <div class="col-6">
                 <div class="form-group">
diff --git a/src/app/settings/change-password.component.html b/src/app/settings/change-password.component.html
index 0e2c752d170..29e14e9a927 100644
--- a/src/app/settings/change-password.component.html
+++ b/src/app/settings/change-password.component.html
@@ -1,7 +1,4 @@
-<div class="callout callout-warning" role="alert">
-    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
-    <p class="mb-0">{{'loggedOutWarning' | i18n}}</p>
-</div>
+<app-callout type="warning">{{'loggedOutWarning' | i18n}}</app-callout>
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
         <div class="col-6">
diff --git a/src/app/settings/deauthorize-sessions.component.html b/src/app/settings/deauthorize-sessions.component.html
index 0b167a2efcc..322c78a89bf 100644
--- a/src/app/settings/deauthorize-sessions.component.html
+++ b/src/app/settings/deauthorize-sessions.component.html
@@ -9,10 +9,7 @@
             </div>
             <div class="modal-body">
                 <p>{{'deauthorizeSessionsDesc' | i18n}}</p>
-                <div class="callout callout-warning" role="alert">
-                    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
-                    <p class="mb-0">{{'deauthorizeSessionsWarning' | i18n}}</p>
-                </div>
+                <app-callout type="warning">{{'deauthorizeSessionsWarning' | i18n}}</app-callout>
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
                 <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
                     appAutoFocus>
diff --git a/src/app/settings/delete-account.component.html b/src/app/settings/delete-account.component.html
index 11d68c7a4b2..02c4049e17b 100644
--- a/src/app/settings/delete-account.component.html
+++ b/src/app/settings/delete-account.component.html
@@ -9,10 +9,7 @@
             </div>
             <div class="modal-body">
                 <p>{{'deleteAccountDesc' | i18n}}</p>
-                <div class="callout callout-warning" role="alert">
-                    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
-                    <p class="mb-0">{{'deleteAccountWarning' | i18n}}</p>
-                </div>
+                <app-callout type="warning">{{'deleteAccountWarning' | i18n}}</app-callout>
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
                 <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
                     appAutofocus>
diff --git a/src/app/settings/purge-vault.component.html b/src/app/settings/purge-vault.component.html
index d1b7e4b087d..97499badfc7 100644
--- a/src/app/settings/purge-vault.component.html
+++ b/src/app/settings/purge-vault.component.html
@@ -9,10 +9,7 @@
             </div>
             <div class="modal-body">
                 <p>{{'purgeVaultDesc' | i18n}}</p>
-                <div class="callout callout-warning" role="alert">
-                    <h3 class="callout-heading">{{'warning' | i18n}}</h3>
-                    <p class="mb-0">{{'purgeVaultWarning' | i18n}}</p>
-                </div>
+                <app-callout type="warning">{{'purgeVaultWarning' | i18n}}</app-callout>
                 <label for="masterPassword">{{'masterPass' | i18n}}</label>
                 <input id="masterPassword" type="password" name="MasterPasswordHash" class="form-control" [(ngModel)]="masterPassword" required
                     appAutofocus>
diff --git a/src/app/tools/export.component.html b/src/app/tools/export.component.html
index 613f13fd5d8..f54af725d0d 100644
--- a/src/app/tools/export.component.html
+++ b/src/app/tools/export.component.html
@@ -3,10 +3,7 @@
         <h1>{{'exportVault' | i18n}}</h1>
     </div>
     <p>{{'exportMasterPassword' | i18n}}</p>
-    <div class="callout callout-warning" role="alert">
-        <h3 class="callout-heading">{{'warning' | i18n}}</h3>
-        <p class="mb-0">{{'exportWarning' | i18n}}</p>
-    </div>
+    <app-callout type="warning">{{'exportWarning' | i18n}}</app-callout>
     <div class="row">
         <div class="form-group col-6">
             <label for="masterPassword">{{'masterPass' | i18n}}</label>
diff --git a/src/app/tools/import.component.html b/src/app/tools/import.component.html
index be7df2415c1..23d8f4ac462 100644
--- a/src/app/tools/import.component.html
+++ b/src/app/tools/import.component.html
@@ -14,25 +14,22 @@
             </div>
         </div>
     </div>
-    <div class="callout callout-info" role="alert" *ngIf="format">
-        <h3 class="callout-heading">{{'instructionsFor' | i18n : getFormatName()}}</h3>
-        <p class="mb-0">
-            <ng-container *ngIf="format === 'bitwardencsv'">
-                See detailed instructions on our help site at
-                <a target="_blank" href="https://help.bitwarden.com/article/export-your-data/">https://help.bitwarden.com/article/export-your-data/</a>
-            </ng-container>
-            <ng-container *ngIf="format === 'lastpasscsv'">
-                See detailed instructions on our help site at
-                <a target="_blank" href="https://help.bitwarden.com/article/import-from-lastpass/">https://help.bitwarden.com/article/import-from-lastpass/</a>
-            </ng-container>
-            <ng-container *ngIf="format === 'keepassxcsv'">
-                Using the KeePassX desktop application, navigate to "Database" &rarr; "Export to CSV file" and save the CSV file.
-            </ng-container>
-            <ng-container *ngIf="format === 'aviracsv'">
-                In the Avira web vault, go to "Settings" &rarr; "My Data" &rarr; "Export data" and save the CSV file.
-            </ng-container>
-        </p>
-    </div>
+    <app-callout type="info" title="{{getFormatInstructionTitle()}}" *ngIf="format">
+        <ng-container *ngIf="format === 'bitwardencsv'">
+            See detailed instructions on our help site at
+            <a target="_blank" href="https://help.bitwarden.com/article/export-your-data/">https://help.bitwarden.com/article/export-your-data/</a>
+        </ng-container>
+        <ng-container *ngIf="format === 'lastpasscsv'">
+            See detailed instructions on our help site at
+            <a target="_blank" href="https://help.bitwarden.com/article/import-from-lastpass/">https://help.bitwarden.com/article/import-from-lastpass/</a>
+        </ng-container>
+        <ng-container *ngIf="format === 'keepassxcsv'">
+            Using the KeePassX desktop application, navigate to "Database" &rarr; "Export to CSV file" and save the CSV file.
+        </ng-container>
+        <ng-container *ngIf="format === 'aviracsv'">
+            In the Avira web vault, go to "Settings" &rarr; "My Data" &rarr; "Export data" and save the CSV file.
+        </ng-container>
+    </app-callout>
     <div class="row">
         <div class="col-6">
             <div class="form-group">
diff --git a/src/app/tools/import.component.ts b/src/app/tools/import.component.ts
index a68595fc63e..030f7b67cae 100644
--- a/src/app/tools/import.component.ts
+++ b/src/app/tools/import.component.ts
@@ -165,14 +165,14 @@ export class ImportComponent {
         }
     }
 
-    getFormatName() {
+    getFormatInstructionTitle() {
         if (this.format == null) {
             return null;
         }
 
         const results = this.featuredImportOptions.concat(this.importOptions).filter((o) => o.id === this.format);
         if (results.length > 0) {
-            return results[0].name;
+            return this.i18nService.t('instructionsFor', results[0].name);
         }
         return null;
     }