diff --git a/_config.yml b/_config.yml
index b8c3669ab..c4d027c1d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -42,7 +42,7 @@ jekyll_tidy:
toc:
min_level: 2
- max_level: 2
+ max_level: 3
list_class: list-unstyled
collections:
diff --git a/pages/_docs/buttons.md b/pages/_docs/buttons.md
index 28abb384a..04b169ae8 100644
--- a/pages/_docs/buttons.md
+++ b/pages/_docs/buttons.md
@@ -4,6 +4,7 @@ icon: fe fe-plus-square
description: Use Bootstrap’s custom button styles for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.
bootstrap-link: components/buttons/
done: true
+toc: true
---
### Button tag
@@ -263,7 +264,7 @@ You can now create a list of buttons with the `.btn-list` container.
Cancel
{% endcapture %}
-{% include example.html code=code centered=true %}
+{% include example.html code=code %}
If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.
diff --git a/pages/_docs/cards.md b/pages/_docs/cards.md
index 72829a679..e83872b84 100644
--- a/pages/_docs/cards.md
+++ b/pages/_docs/cards.md
@@ -4,33 +4,63 @@ menu: docs.cards
description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.
bootstrap-link: components/card/
done: true
+toc: true
---
The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components.
-### Default card
+## Default card
+
+To create a new card you have to use the `.card` and `.card-body` classes. You can put any content inside.
{% capture code %}
{% include cards/card.html body="This is some text within a card body." %}
{% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
-### Card with title and image
+### Card padding
+
+You can change the padding of a newly created card. You can do this with the `.card-sm`, `.card-md` and `.card-lg` classes.
+
+Cards with the `.card-sm` class are very well suited for small items such as snippets, etc., while `.card-lg` can be used for large blocks of text. On small devices, padding will automatically be reduced to fit on the screen.
+
+{% capture code %}
+{% include cards/card.html class="card-sm" body="This is some text within a card body." %}
+{% include cards/card.html body="This is some text within a card body." %}
+{% include cards/card.html class="card-md" body="This is some text within a card body." %}
+{% include cards/card.html class="card-lg" body="This is some text within a card body." %}
+{% endcapture %}
+{% include example.html code=code columns=2 %}
+
+## Card with title
+
+To add a title to a card you should add a class `.card-title` inside `.card-body`.
+
+You can also place the title inside the `.card-header` element - then the title will be separated from the content by a horizontal line.
+
+{% capture code %}
+{% include cards/card.html title="Card title" body="This is some text within a card body." %}
+{% include cards/card.html header-title="Card title" body="This is some text within a card body." %}
+{% endcapture %}
+{% include example.html code=code columns=1 %}
+
+## Card with title and image
{% capture code %}
{% include cards/card.html img-top=true title="Card with title and image" %}
{% endcapture %}
-{% include example.html code=code %}
-### Blog post card
+{% include example.html code=code columns=1 %}
+
+## Blog post card
The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card.
{% capture code %}
{% include cards/blog-single.html type="image" %}
{% endcapture %}
-{% include example.html code=code %}
+{% include example.html code=code columns=1 %}
-### Row deck
+## Row deck
If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height.
@@ -55,7 +85,7 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
{% endcapture %}
{% include example.html code=code %}
-### Post card with aside image
+## Post card with aside image
You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size:
@@ -64,7 +94,7 @@ You can also add the image on the left side of the card. All you need do to is:
{% endcapture %}
{% include example.html code=code %}
-### Color variations
+## Color variations
{% capture code %}
@@ -78,7 +108,7 @@ You can also add the image on the left side of the card. All you need do to is:
{% endcapture %}
{% include example.html code=code %}
-### Stacked card
+## Stacked card
{% capture code %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
diff --git a/pages/_includes/example.html b/pages/_includes/example.html
index f296bba45..9eb53fc8f 100644
--- a/pages/_includes/example.html
+++ b/pages/_includes/example.html
@@ -1,9 +1,11 @@
-