@@ -30,7 +30,7 @@ The best way to make your post eye-catching is adding an image to it. To do so,
...
@@ -30,7 +30,7 @@ The best way to make your post eye-catching is adding an image to it. To do so,
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.
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 %}
{% example html columns=3 %}
<divclass="row row-cards row-deck">
<divclass="row row-cards row-deck">
<divclass="col-md-4">
<divclass="col-md-4">
<divclass="card">
<divclass="card">
...
@@ -54,13 +54,13 @@ If you want to create a couple of posts next to each other, add the `.row-deck`
...
@@ -54,13 +54,13 @@ 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:
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 %}
{% example html columns=3 %}
{% include cards/blog-single.html type="aside" liked=1 %}
{% include cards/blog-single.html type="aside" liked=1 %}
{% endexample %}
{% endexample %}
### Color variations
### Color variations
{% example html columns=2 %}
{% example html columns=3 %}
<divclass="row row-cards row-deck">
<divclass="row row-cards row-deck">
<divclass="col-md-4">
<divclass="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" %}
{% 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" %}
...
@@ -89,7 +89,7 @@ You can also add the image on the left side of the card. All you need do to is:
...
@@ -89,7 +89,7 @@ You can also add the image on the left side of the card. All you need do to is:
### Card with badge on image
### Card with badge on image
{% example html columns=2 %}
{% example html columns=3 %}
<divclass="card flex-row flex-row-reverse">
<divclass="card flex-row flex-row-reverse">
<divclass="media media-4x3 col-4">
<divclass="media media-4x3 col-4">
<aclass="media-content "style="background-image:url({% include ui/image.html id=7 %})">
<aclass="media-content "style="background-image:url({% include ui/image.html id=7 %})">
...
@@ -116,7 +116,7 @@ You can also add the image on the left side of the card. All you need do to is:
...
@@ -116,7 +116,7 @@ You can also add the image on the left side of the card. All you need do to is:
### Card with badge
### Card with badge
{% example html columns=2 %}
{% example html columns=3 %}
<divclass="card flex-row">
<divclass="card flex-row">
<divclass="media media-4x3 col-5">
<divclass="media media-4x3 col-5">
<aclass="media-content "style="background-image:url({% include ui/image.html id=13 %})">
<aclass="media-content "style="background-image:url({% include ui/image.html id=13 %})">
...
@@ -146,7 +146,7 @@ You can also add the image on the left side of the card. All you need do to is:
...
@@ -146,7 +146,7 @@ You can also add the image on the left side of the card. All you need do to is:
### Card with aside image
### Card with aside image
{% example html columns=2 %}
{% example html columns=3 %}
<divclass="card flex-row">
<divclass="card flex-row">
<divclass="media media-4x3 col-4">
<divclass="media media-4x3 col-4">
<aclass="media-content"style="background-image:url({% include ui/image.html id=6 %})"></a>
<aclass="media-content"style="background-image:url({% include ui/image.html id=6 %})"></a>
...
@@ -251,7 +251,7 @@ You can also add the image on the left side of the card. All you need do to is:
...
@@ -251,7 +251,7 @@ You can also add the image on the left side of the card. All you need do to is:
{% endexample %}
{% endexample %}
### Card with search
### Card with search
{% example html columns=2 %}
{% example html columns=3 %}
<divclass="row">
<divclass="row">
<divclass="col-lg-6 col-xl-6">
<divclass="col-lg-6 col-xl-6">
{% include cards/card.html title="Card with alert" alert="Adding action was successful" %}
{% include cards/card.html title="Card with alert" alert="Adding action was successful" %}