diff --git a/_config.yml b/_config.yml
index e0e577de8..24ea9d7fa 100644
--- a/_config.yml
+++ b/_config.yml
@@ -98,10 +98,14 @@ colors:
name: Dark
variants:
- success: danger
- info: danger
- warning: danger
- danger: danger
+ - name: success
+ icon: check
+ - name: info
+ icon: info
+ - name: warning
+ icon: alert-triangle
+ - name: danger
+ icon: x-octagon
socials: [facebook, twitter, google, youtube, vimeo, dribbble, github, instagram, pinterest, vk, rss, flickr, bitbucket]
@@ -110,9 +114,11 @@ months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'S
docs-menu:
-- title: Getting started
- pages: [index]
-- title: Components
- pages: [alerts, avatars, badges, buttons, carousel, spinners, steps, tabs, toasts, tooltips, typography]
+ intro:
+ title: Getting started
+ pages: [index]
+ components:
+ title: Components
+ pages: [alerts, avatars, badges, buttons, cards, carousel, spinners, steps, tabs, toasts, tooltips, typography]
diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml
index 29313c53f..c54a1d5f2 100644
--- a/pages/_data/menu.yml
+++ b/pages/_data/menu.yml
@@ -6,55 +6,7 @@ apps:
docs:
title: Documentation
icon: file-text
- children:
- - title: Alerts
- url: '#'
- - title: Avatars
- url: '#'
- - title: Badges
- url: '#'
- - title: Breadcrumb
- url: '#'
- - title: Buttons
- url: '#'
- - title: Button group
- url: '#'
- - title: Cards
- url: '#'
- - title: Charts
- url: '#'
- - title: Dropdowns
- url: '#'
- - title: Forms
- url: '#'
- - title: Icons
- url: '#'
- - title: Lists
- url: '#'
- - title: Modal
- url: '#'
- - title: Navs
- url: '#'
- - title: Navbar
- url: '#'
- - title: Pagination
- url: '#'
- - title: Popovers
- url: '#'
- - title: Progress
- url: '#'
- - title: Spinners
- url: '#'
- - title: Tables
- url: '#'
- - title: Toasts
- url: '#'
- - title: Tooltips
- url: '#'
- - title: Typography
- url: '#'
- - title: Utilities
- url: '#'
+ docs: components
changelog:
url: changelog.html
active: true
diff --git a/pages/_docs/alerts.md b/pages/_docs/alerts.md
index 98086da32..6af70bfd7 100644
--- a/pages/_docs/alerts.md
+++ b/pages/_docs/alerts.md
@@ -8,10 +8,10 @@ Bootstrap provides an easy way to create predefined alert messages.
{% example html %}
{% for variant in site.variants %}
- {% capture text_with_variant %}
- This is a {{ variant }} alert — check it out!
+ {% capture variant-text %}
+ This is a {{ variant.name }} alert — check it out!
{% endcapture %}
- {% include ui/alert.html type=variant text=text_with_variant %}
+ {% include ui/alert.html type=variant.name text=variant-text %}
{% endfor %}
{% endexample %}
@@ -22,10 +22,10 @@ Add the `alert-link` class to any links inside the alert box to create "matching
{% example html %}
{% for variant in site.variants %}
- {% capture text_with_variant %}
- This is a {{ variant }} alert — check it out!
+ {% capture variant-text %}
+ This is a {{ variant.name }} alert — check it out!
{% endcapture %}
- {% include ui/alert.html type=variant text=text_with_variant %}
+ {% include ui/alert.html type=variant.name text=variant-text %}
{% endfor %}
{% endexample %}
@@ -34,9 +34,20 @@ Add the `alert-link` class to any links inside the alert box to create "matching
{% example html %}
{% for variant in site.variants %}
- {% capture text_with_variant %}
- This is a {{ variant }} alert — check it out!
+ {% capture variant-text %}
+ This is a {{ variant.name }} alert — check it out!
{% endcapture %}
- {% include ui/alert.html type=variant text=text_with_variant close=true %}
+ {% include ui/alert.html type=variant.name text=variant-text close=true %}
+{% endfor %}
+{% endexample %}
+
+## Alerts with icons
+
+{% example html %}
+{% for variant in site.variants %}
+ {% capture variant-text %}
+ This is a {{ variant.name }} alert — check it out!
+ {% endcapture %}
+ {% include ui/alert.html type=variant.name icon=variant.icon text=variant-text close=true %}
{% endfor %}
{% endexample %}
diff --git a/pages/_docs/cards.md b/pages/_docs/cards.md
new file mode 100644
index 000000000..0c11711ba
--- /dev/null
+++ b/pages/_docs/cards.md
@@ -0,0 +1,84 @@
+---
+title: 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.
+---
+
+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
+
+{% example html columns=1 %}
+{% include cards/card.html hide-options=true %}
+{% endexample %}
+
+### Advanced card
+
+{% example html columns=1 %}
+{% include cards/card.html show-buttons=true show-footer=true %}
+{% endexample %}
+
+### 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.
+
+{% example html columns=1 %}
+{% include cards/blog-single.html type="image" %}
+{% endexample %}
+
+### 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.
+
+{% example html columns=2 %}
+
+
+
+
Short content
+
+
+
+
+
Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
+
+
+
+
+
Short content
+
+
+
+{% endexample %}
+
+### 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:
+
+{% example html columns=2 %}
+{% include cards/blog-single.html type="aside" liked=1 %}
+{% endexample %}
+
+### Color variations
+
+{% example html columns=2 %}
+
+
+ {% include cards/card.html title="Card status" hide-options=true status="purple" %}
+
+
+ {% include cards/card.html title="Card status on left side" hide-options=true status-left="blue" %}
+
+
+{% endexample %}
+
+
+### Card with switch
+
+{% example html columns=1 %}
+{% include cards/card.html title="Card with switch" show-switch=true %}
+{% endexample %}
+
+### Card with loader
+
+{% example html columns=1 %}
+{% include cards/card.html title="Card with loader" hide-options=true show-loader=true %}
+{% endexample %}
diff --git a/pages/_docs/carousel.md b/pages/_docs/carousel.md
index bf33d2853..6ae42b690 100644
--- a/pages/_docs/carousel.md
+++ b/pages/_docs/carousel.md
@@ -4,6 +4,6 @@ title: Carousel
The Carousel is a slideshow for cycling through elements.
-{% example html %}
+{% example html columns=1 %}
{% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %}
{% endexample %}
diff --git a/pages/_includes/cards/blog-single.html b/pages/_includes/cards/blog-single.html
new file mode 100644
index 000000000..e58fb130a
--- /dev/null
+++ b/pages/_includes/cards/blog-single.html
@@ -0,0 +1,34 @@
+{% assign article = include.article | default: site.data.articles[0] %}
+{% assign type = include.type | default: 'none' %}
+{% assign author = site.data.users[article.author] %}
+{% assign liked = include.liked | default: false %}
+{% assign truncate = include.truncate | default: 100 %}
+
+
+ {% if type == 'image' %}
+
+ {% endif %}
+
+ {% if type == 'aside' %}
+
+ {% endif %}
+
+
+
+