diff --git a/_config.yml b/_config.yml
index c5cdbc9798cbc5204da70891c52c2fe68453ba61..e5e3a10612f9d29e3951bc1696934f208d7d35a5 100644
--- a/_config.yml
+++ b/_config.yml
@@ -106,4 +106,4 @@ docs-menu:
 - title: Getting started
   pages: [index]
 - title: Components
-  pages: [avatars, badges, buttons, tooltips]
+  pages: [avatars, badges, buttons, carousel, toasts, tooltips, typography]
diff --git a/pages/_docs/carousel.md b/pages/_docs/carousel.md
new file mode 100644
index 0000000000000000000000000000000000000000..bf33d28531ef518118e0c422cfcbd5437383ac68
--- /dev/null
+++ b/pages/_docs/carousel.md
@@ -0,0 +1,9 @@
+---
+title: Carousel
+---
+
+The Carousel is a slideshow for cycling through elements.
+
+{% example html %}
+{% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %}
+{% endexample %}
diff --git a/pages/_docs/toasts.md b/pages/_docs/toasts.md
new file mode 100644
index 0000000000000000000000000000000000000000..60cc691bbb7e1a0d01456c73b7af49bf843506c7
--- /dev/null
+++ b/pages/_docs/toasts.md
@@ -0,0 +1,11 @@
+---
+title: Toasts
+---
+
+The toast component is like an alert box that is only shown for a couple of seconds when something happens (i.e. when the user clicks on a button, submits a form, etc.).
+
+### Default markup
+
+{% example html %}
+{% include ui/toast.html %}
+{% endexample %}
diff --git a/pages/_docs/tooltips.md b/pages/_docs/tooltips.md
index 3727c61941ac4014c0a0002a1e675d2f81ffdd9a..35fcbcee6b57a063ff869e565b7c6f0d2e443533 100644
--- a/pages/_docs/tooltips.md
+++ b/pages/_docs/tooltips.md
@@ -2,6 +2,11 @@
 title: Tooltips
 ---
 
+The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:
+
+
+### Default markup
+
 {% example html wrapper=btn-list %}
 <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
   Tooltip on top
@@ -16,3 +21,11 @@ title: Tooltips
   Tooltip on left
 </button>
 {% endexample %}
+
+### Tooltip with HTML
+
+{% example html wrapper=btn-list %}
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
+  Tooltip with HTML
+</button>
+{% endexample %}
diff --git a/pages/_docs/typography.md b/pages/_docs/typography.md
new file mode 100644
index 0000000000000000000000000000000000000000..7d1539a3c5df4302c8d82a67539ec41cd5b946d1
--- /dev/null
+++ b/pages/_docs/typography.md
@@ -0,0 +1,65 @@
+---
+title: Typography
+description: Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
+---
+
+### Text alignment
+
+Easily realign text to components with text alignment classes.
+
+{% example html %}
+<p class="text-left">Left aligned text on all viewport sizes.</p>
+<p class="text-center">Center aligned text on all viewport sizes.</p>
+<p class="text-right">Right aligned text on all viewport sizes.</p>
+<p class="text-justify">Both aligned text on all viewport sizes. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.</p>
+{% endexample %}
+
+### Text transform
+
+Transform text in components with text capitalization classes.
+
+{% example html %}
+<p class="text-lowercase">Lowercased text.</p>
+<p class="text-uppercase">Uppercased text.</p>
+<p class="text-capitalize">Capitalized text.</p>
+{% endexample %}
+
+### Letter spacing
+
+Utilities for controlling the tracking (letter spacing) of an element.
+
+{% example html %}
+<p class="tracking-tight">Lorem ipsum dolor sit amet. Tight letter spacing.</p>
+<p class="tracking-normal">Lorem ipsum dolor sit amet. Normal letter spacing.</p>
+<p class="tracking-wide">Lorem ipsum dolor sit amet. Wide letter spacing.</p>
+{% endexample %}
+
+### Line Height
+
+Utilities for controlling the leading (line height) of an element.
+
+{% example html %}
+<p class="leading-none">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
+<p class="leading-tight">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
+<p class="leading-normal">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
+<p class="leading-loose">Lorem ipsum dolor sit amet.<br>Dolor sit amet.</p>
+{% endexample %}
+
+### Basic elements
+
+When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `.text-wrap` as container. It can handle almost any HTML tag.
+
+{% example html %}
+<div class="text-wrap">
+   <h1>Hello World</h1>
+   <p>Lorem ipsum<sup><a>[1]</a></sup> dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub<sub>script</sub> works as well!</p>
+   <h2>Second level</h2>
+   <p>Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.</p>
+   <ul>
+      <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
+      <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
+      <li>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</li>
+      <li>Ut non enim metus.</li>
+   </ul>
+</div>
+{% endexample %}
diff --git a/pages/_includes/cards/carousel.html b/pages/_includes/cards/carousel.html
index 799c6ff8f3555ea673d9f8a56dda86f5e106bf8d..8ab5a9be907a4751aae40a5f9af15ebaa8e94997 100644
--- a/pages/_includes/cards/carousel.html
+++ b/pages/_includes/cards/carousel.html
@@ -1,46 +1,8 @@
-{% assign limit = include.limit | default: 5 %}
-{% assign offset = include.offset | default: 0 %}
-{% assign photos = site.data.photos | where: "horizontal", true %}
 <div class="card">
    <div class="card-header">
       <h3 class="card-title">{{ include.title | default: 'Carousel' }}</h3>
    </div>
    <div class="card-body">
-      <div id="{{ include.id }}" class="carousel slide" data-ride="carousel">
-         {% if include.show-indicators %}
-         <ol class="carousel-indicators">
-            {% for i in (1..limit) %}
-            <li data-target="#{{ include.id }}" data-slide-to="{{ forloop.index | minus: 1 }}" class="{% if forloop.first %}active{% endif %}"></li>
-            {% endfor %}
-         </ol>
-         {% endif %}
-
-         <div class="carousel-inner">
-            {% for photo in photos limit: limit offset: offset %}
-            <div class="carousel-item{% if forloop.first %} active{% endif %}">
-               <img class="d-block w-100" alt="" src="{{ site.base }}/img/photos/{{ photo.file }}" data-holder-rendered="true">
-
-               {% if include.show-captions %}
-               <div class="carousel-item-background d-none d-md-block"></div>
-               <div class="carousel-caption d-none d-md-block">
-                  <h3>Slide label</h3>
-                  <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
-               </div>
-               {% endif %}
-            </div>
-            {% endfor %}
-         </div>
-
-         {% if include.show-controls %}
-         <a class="carousel-control-prev" href="#{{ include.id }}" role="button" data-slide="prev">
-            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-            <span class="sr-only">Previous</span>
-         </a>
-         <a class="carousel-control-next" href="#{{ include.id }}" role="button" data-slide="next">
-            <span class="carousel-control-next-icon" aria-hidden="true"></span>
-            <span class="sr-only">Next</span>
-         </a>
-         {% endif %}
-      </div>
+      {% include ui/carousel.html %}
    </div>
 </div>
diff --git a/pages/_includes/ui/carousel.html b/pages/_includes/ui/carousel.html
new file mode 100644
index 0000000000000000000000000000000000000000..90ba1b695ad9bee6638dc0668a83b483d67bd9e6
--- /dev/null
+++ b/pages/_includes/ui/carousel.html
@@ -0,0 +1,39 @@
+{% assign limit = include.limit | default: 5 %}
+{% assign offset = include.offset | default: 0 %}
+{% assign photos = site.data.photos | where: "horizontal", true %}
+<div id="{{ include.id }}" class="carousel slide" data-ride="carousel">
+   {% if include.show-indicators %}
+   <ol class="carousel-indicators">
+      {% for i in (1..limit) %}
+      <li data-target="#{{ include.id }}" data-slide-to="{{ forloop.index | minus: 1 }}" class="{% if forloop.first %}active{% endif %}"></li>
+      {% endfor %}
+   </ol>
+   {% endif %}
+
+   <div class="carousel-inner">
+      {% for photo in photos limit: limit offset: offset %}
+      <div class="carousel-item{% if forloop.first %} active{% endif %}">
+         <img class="d-block w-100" alt="" src="{{ site.base }}/img/photos/{{ photo.file }}" data-holder-rendered="true">
+
+         {% if include.show-captions %}
+         <div class="carousel-item-background d-none d-md-block"></div>
+         <div class="carousel-caption d-none d-md-block">
+            <h3>Slide label</h3>
+            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
+         </div>
+         {% endif %}
+      </div>
+      {% endfor %}
+   </div>
+
+   {% if include.show-controls %}
+   <a class="carousel-control-prev" href="#{{ include.id }}" role="button" data-slide="prev">
+      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+      <span class="sr-only">Previous</span>
+   </a>
+   <a class="carousel-control-next" href="#{{ include.id }}" role="button" data-slide="next">
+      <span class="carousel-control-next-icon" aria-hidden="true"></span>
+      <span class="sr-only">Next</span>
+   </a>
+   {% endif %}
+</div>
diff --git a/pages/_includes/ui/toast.html b/pages/_includes/ui/toast.html
new file mode 100644
index 0000000000000000000000000000000000000000..fd0227a9c714569b42ead438557acbea57ce2093
--- /dev/null
+++ b/pages/_includes/ui/toast.html
@@ -0,0 +1,15 @@
+{% assign person-id = include.person-id | default: 2 %}
+{% assign person = site.data.people[person-id] %}
+<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
+   <div class="toast-header">
+      {% include ui/avatar.html person=person class="mr-2" size="sm" %}
+      <strong class="mr-auto">{{ person.full_name }}</strong>
+      <small>{{ include.date | default: '11 mins ago' }}</small>
+      <button type="button" class="ml-2 close" data-dismiss="toast" aria-label="Close">
+         <span aria-hidden="true">&times;</span>
+      </button>
+   </div>
+   <div class="toast-body">
+      Hello, world! This is a toast message.
+   </div>
+</div>
diff --git a/pages/_layouts/docs.html b/pages/_layouts/docs.html
index a097cbb4bedb720adb006468f5b47b6ef364e87f..e1695528e181f3b196b310e29fc2afff42c37237 100644
--- a/pages/_layouts/docs.html
+++ b/pages/_layouts/docs.html
@@ -51,3 +51,9 @@ page-title: Documentation
 		</div>
 	</div>
 </div>
+
+<script>
+   $(document).ready(function(){
+      $('[data-toggle="tooltip"]').tooltip();
+   });
+</script>
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0a5b21eecfc5b7e65594ec601e42ab995970a3f7..b6ef901a45db10e8d713c2760a82d399e0b4347e 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -166,7 +166,11 @@ $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: rgba($text-muted-light, .5) !default;
 
-//docelowo przeniesc gdzieindziej
+//toasts
+$toast-border-color: $border-color !default;
+$toast-header-color: $text-muted !default;
+
+//other
 $yiq-contrasted-threshold: 200 !default;
 
 $card-border-color: $border-color !default;
diff --git a/scss/ui-kit.scss b/scss/ui-kit.scss
index f098d83a84d4d1a90ab21aa2da608a25d518ca9a..6a47c24c3626a47c3bc10d53e3ac53f38dd14f7b 100644
--- a/scss/ui-kit.scss
+++ b/scss/ui-kit.scss
@@ -52,6 +52,7 @@
 @import "ui/nav";
 @import "ui/calendars";
 @import "ui/pagination";
+@import "ui/toasts";
 
 @import "ui/highlight";
 @import "ui/examples";
diff --git a/scss/ui/_toasts.scss b/scss/ui/_toasts.scss
new file mode 100644
index 0000000000000000000000000000000000000000..80e5271a71786aa7da50b70f55a9dcb8fc4ccd60
--- /dev/null
+++ b/scss/ui/_toasts.scss
@@ -0,0 +1,3 @@
+.toast-header {
+  user-select: none;
+}