description: A breadcrumb navigation provide links back to each previous page the user navigated through, and shows the user's current location in a website.
description: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
@@ -9,15 +9,14 @@ The `.card` element is simply a container with a shadow, a border, a radius, and
### Default card
{% example html columns=1 %}
{% include cards/card.html hide-options=true %}
{% include cards/card.html body="This is some text within a card body." %}
{% endexample %}
### Advanced card
### Card with title and image
{% example html columns=1 %}
{% include cards/card.html show-buttons=true show-footer=true %}
{% include cards/card.html img-top=true title="Card with title and image" %}
{% 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.
@@ -55,211 +54,31 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
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=3 %}
{% include cards/blog-single.html type="aside" liked=1 %}
{% include cards/blog-single.html type="aside" liked=1 article-id=3 %}
{% endexample %}
### Color variations
{% example html columns=3 %}
<div class="row row-deck">
<div class="col-md-4">
{% include cards/card.html title="Card status on top" hide-options=true status-position="top" status-color="red" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}
<div class="col-md-6">
{% include cards/card.html status-top="danger" title="Card with top status" %}
</div>
<div class="col-md-4">
{% include cards/card.html title="Card status on left side" hide-options=true status-position="left" status-color="blue" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}
</div>
<div class="col-md-4">
{% include cards/card.html title="Card status on bottom" hide-options=true status-position="bottom" status-color="green" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}
<div class="col-md-6">
{% include cards/card.html status-left="green" title="Card with side status" %}
</div>
</div>
{% endexample %}
### Card with switch
### Stacked card
{% example html columns=1 %}
{% include cards/card.html title="Card with switch" show-switch=true %}
{% include cards/card.html class="card-stacked" title="Stacked card" %}
{% endexample %}
### Card with loader
## Tabbed card
{% example html columns=1 %}
{% include cards/card.html title="Card with loader" hide-options=true show-loader=true %}
{% example html columns=2 %}
{% include cards/card-tabs.html count=4 %}
{% endexample %}
### Card with badge on image
{% example html columns=3 %}
<div class="card flex-row flex-row-reverse">
<div class="media media-4x3 col-4">
<a class="media-content " style="background-image:url({% include ui/image.html id=7 %})">
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
codecalm