mirror of
https://github.com/tabler/tabler.git
synced 2026-07-29 14:34:37 +04:00
package.json incremental mode
This commit is contained in:
codecalm
@@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
menu: docs.breadcrumb
|
||||
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.
|
||||
done: true
|
||||
---
|
||||
|
||||
|
||||
+13
-194
@@ -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 %})">
|
||||
</a>
|
||||
<div class="media-overlay overlay-top">
|
||||
<a href="#"><span class="badge badge-md text-uppercase bg-yellow">NATURE</span></a>
|
||||
</div>
|
||||
<div class="media-action ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="flex-fill ">
|
||||
<a href="#" class="card-title text-md">
|
||||
It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes
|
||||
</a>
|
||||
<a class="text-muted mt-2 ">What Not To Wear: The Hats, Scarves In History</a>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="text-muted text-sm">Feb 28, 10:54 am</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Card with badge
|
||||
|
||||
{% example html columns=3 %}
|
||||
<div class="card flex-row">
|
||||
<div class="media media-4x3 col-5">
|
||||
<a class="media-content " style="background-image:url({% include ui/image.html id=13 %})">
|
||||
</a>
|
||||
<div class="media-action ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body d-flex flex-column ">
|
||||
<div class="flex-fill ">
|
||||
<div class="mb-3">
|
||||
<a href="#">
|
||||
<span class="badge badge-md text-uppercase bg-danger">Fashion</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href="#" class="card-title h-2x">
|
||||
What Not To Wear: The Hats, Scarves In History
|
||||
</a>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="text-muted text-sm">Feb 26, 1:49 am</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
|
||||
### Card with aside image
|
||||
|
||||
{% example html columns=3 %}
|
||||
<div class="card flex-row">
|
||||
<div class="media media-4x3 col-4">
|
||||
<a class="media-content" style="background-image:url({% include ui/image.html id=6 %})"></a>
|
||||
<div class="media-overlay overlay-top">
|
||||
<a href="#"><span class="badge badge-md text-uppercase bg-white-overlay">MUSIC</span></a>
|
||||
</div>
|
||||
<div class="media-action ">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body d-flex flex-column">
|
||||
<div class="flex-fill">
|
||||
<a href="#" class="card-title text-md">
|
||||
Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film
|
||||
</a>
|
||||
<a class="text-muted mt-2">What Not To Wear: The Hats, Scarves In History</a>
|
||||
</div>
|
||||
<div class="text-muted text-sm">Feb 22, 11:38 am</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Card with image
|
||||
{% example html columns=1 %}
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="{{ site.base }}/img/photos/{{ site.data.photos[17].file }}" alt="Card image cap">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title that wraps to a new line</h5>
|
||||
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
|
||||
additional content. This content is a little bit longer.</p>
|
||||
<div class="text-muted text-sm">Feb 28, 10:54 am</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Quote card
|
||||
|
||||
{% example html columns=1 %}
|
||||
<div class="card">
|
||||
<cardquote class="cardquote text-white bg-primary mb-0 card-body">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||||
<footer class="cardquote-footer">
|
||||
<small>
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</small>
|
||||
</footer>
|
||||
</cardquote>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Another Card
|
||||
|
||||
{% example html columns=3 %}
|
||||
<div class="row row-deck">
|
||||
<div class="col-6">
|
||||
<div class="card text-center">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional
|
||||
content.</p>
|
||||
<p class="card-text">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="card text-right">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional
|
||||
content.</p>
|
||||
<p class="card-text">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Image card
|
||||
|
||||
{% example html columns=1 %}
|
||||
<div class="card">
|
||||
<img class="card-img" src="{{ site.base }}/img/photos/{{ site.data.photos[19].file }}" alt="Card image">
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
### Card with options
|
||||
{% example html columns=1 %}
|
||||
{% include cards/card.html title="This is a standard card" show-footer=true %}
|
||||
{% endexample %}
|
||||
|
||||
### Card with fullscreen
|
||||
{% example html columns=1 %}
|
||||
{% include cards/card.html title="With additional fullscreen button" show-fullscreen=true %}
|
||||
{% endexample %}
|
||||
|
||||
### Card with search
|
||||
{% example html columns=1 %}
|
||||
{% include cards/card.html title="Card with search form" show-form=true %}
|
||||
{% endexample %}
|
||||
|
||||
### Card with search
|
||||
{% example html columns=3 %}
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-xl-6">
|
||||
{% include cards/card.html title="Card with alert" alert="Adding action was successful" %}
|
||||
</div>
|
||||
<div class="col-lg-6 col-xl-6">
|
||||
{% include cards/card.html title="Card with alert" alert="Adding action failed" alert-type="danger" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
{% assign article = include.article | default: site.data.articles[0] %}
|
||||
{% assign article-id = include.article-id | default: 2 %}
|
||||
{% assign article = include.article | default: site.data.articles[article-id] %}
|
||||
{% assign type = include.type | default: 'none' %}
|
||||
{% assign author = site.data.people[article.author] %}
|
||||
{% assign liked = include.liked | default: false %}
|
||||
@@ -6,7 +7,7 @@
|
||||
{% assign avatar = article.author %}
|
||||
|
||||
{% capture card-content %}
|
||||
<h3><a href="#">{{ article.title }}</a></h3>
|
||||
<h3 class="card-title"><a href="#">{{ article.title }}</a></h3>
|
||||
|
||||
<div class="text-muted">{{ article.description | truncate: truncate }}</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user