@@ -11,20 +11,20 @@ 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 body="This is some text within a card body." %}
{% include_cached cards/card.html body="This is some text within a card body." %}
{% endexample %}
### Card with title and image
{% example html columns=1 %}
{% include cards/card.html img-top=true title="Card with title and image" %}
{% include_cached 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.
@@ -56,7 +56,7 @@ 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 article-id=3 %}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias consequuntur cum dicta doloremque, enim eos illo ipsam labore laboriosam laborum perspiciatis quibusdam repudiandae sed sequi sit temporibus veniam, voluptatum.
{% include cards/feed-card.html feed=1 text="Suscipit integer egestas porta massa id sem fermentum vel et enim pulvinar ullamcorper dignissim at" %}
{% include cards/feed-card.html feed=3 %}
{% include cards/feed-card.html feed=5 %}
{% include cards/feed-card.html feed=7 %}
{% include_cached cards/feed-card.html feed=1 text="Suscipit integer egestas porta massa id sem fermentum vel et enim pulvinar ullamcorper dignissim at" %}
{% include_cached cards/feed-card.html feed=3 %}
{% include_cached cards/feed-card.html feed=5 %}
{% include_cached cards/feed-card.html feed=7 %}
</div>
<divclass="col-md-6">
{% include cards/feed-card.html feed=2 text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cupiditate dolorem doloremque labore quisquam? Animi, blanditiis cupiditate dignissimos est ipsam maiores molestias nemo perferendis perspiciatis praesentium." %}
{% include cards/feed-card.html feed=4 %}
{% include cards/feed-card.html feed=6 %}
{% include_cached cards/feed-card.html feed=2 text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa cupiditate dolorem doloremque labore quisquam? Animi, blanditiis cupiditate dignissimos est ipsam maiores molestias nemo perferendis perspiciatis praesentium." %}