mirror of
https://github.com/tabler/tabler.git
synced 2025-12-26 11:16:12 +04:00
351 lines
11 KiB
HTML
351 lines
11 KiB
HTML
---
|
||
title: Cards
|
||
page-title: Cards
|
||
---
|
||
|
||
{% assign photos = site.data.photos | where: "horizontal", true %}
|
||
<div class="row">
|
||
|
||
<div class="col-12">
|
||
<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>
|
||
</div>
|
||
<div class="col-12">
|
||
<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-dark-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">
|
||
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>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<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=8 %})">
|
||
</a>
|
||
<div class="media-overlay overlay-top">
|
||
<a href="#"><span class="badge badge-md text-uppercase bg-primary">TOP5</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 ">
|
||
The Tallest Unclimbed Mountains In The World
|
||
</a>
|
||
</div>
|
||
<div class="">
|
||
<div class="text-muted text-sm">Feb 3, 4:45 am</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<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=9 %})">
|
||
</a>
|
||
<div class="media-overlay overlay-top">
|
||
<a href="#"><span class="badge badge-md text-uppercase bg-info">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 ">
|
||
Congrats on the Lifestyle! The Dark Side to Influencer Marketing
|
||
</a>
|
||
</div>
|
||
<div class="">
|
||
<div class="text-muted text-sm">Feb 6, 8:18 am</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<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=10 %})">
|
||
</a>
|
||
<div class="media-overlay overlay-top">
|
||
<a href="#"><span class="badge badge-md text-uppercase bg-primary">TOP5</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 h-2x">
|
||
The Tallest Unclimbed Mountains In The World
|
||
</a>
|
||
</div>
|
||
<div class="">
|
||
<div class="text-muted text-sm">Feb 26, 2:17 am</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<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=11 %})">
|
||
</a>
|
||
<div class="media-overlay overlay-top">
|
||
<a href="#"><span class="badge badge-md text-uppercase bg-danger">Fashion</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 h-2x">
|
||
What Not To Wear: The Hats, Scarves In History
|
||
</a>
|
||
</div>
|
||
<div class="">
|
||
<div class="text-muted text-sm">Feb 23, 11:15 am</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<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=12 %})">
|
||
</a>
|
||
<div class="media-overlay overlay-top">
|
||
<a href="#"><span class="badge badge-md text-uppercase bg-warning">AI</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">
|
||
How AI Helps Recruiters Track Jobseekers’ Emotions
|
||
</a>
|
||
</div>
|
||
<div class="">
|
||
<div class="text-muted text-sm">Feb 11, 6:54 am</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<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>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<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=14 %})">
|
||
</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-warning">AI</span>
|
||
</a>
|
||
</div>
|
||
<a href="#" class="card-title h-2x">
|
||
How AI Helps Recruiters Track Jobseekers’ Emotions
|
||
</a>
|
||
</div>
|
||
<div class="">
|
||
<div class="text-muted text-sm">Feb 16, 11:18 am</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-sm-12">
|
||
<div class="row mb-4">
|
||
|
||
{% for photo in photos limit: 3 offset: 10 %}
|
||
<div class="col-4">
|
||
<div class="card">
|
||
<div class="media media-16x9">
|
||
<a class="media-content" style="background-image:url(/img/photos/{{ photo.file }})">
|
||
</a>
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">{{ photo.title }}</h4>
|
||
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi
|
||
architecto commodi, cum, dicta dignissimos distinctio eos</p>
|
||
<p class="card-text text-muted">
|
||
Last updated 3 mins ago
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-sm-12">
|
||
<div class="card-group mb-4">
|
||
{% for photo in photos limit: 3 offset: 13 %}
|
||
<div class="card">
|
||
<div class="media media-16x9">
|
||
<a class="media-content" style="background-image:url(/img/photos/{{ photo.file }})">
|
||
</a>
|
||
</div>
|
||
<div class="card-body">
|
||
<h5 class="card-title">{{ photo.title }}</h5>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
|
||
additional content. This content is a little bit longer.</p>
|
||
<p class="card-text text-muted">
|
||
Last updated 3 mins ago
|
||
</p>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-sm-12">
|
||
<div class="row">
|
||
<div class="col-4">
|
||
<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>
|
||
</div>
|
||
<div class="card p-3">
|
||
<cardquote class="cardquote mb-0 card-body">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||
<footer class="cardquote-footer">
|
||
<small class="text-muted">
|
||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||
</small>
|
||
</footer>
|
||
</cardquote>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-4">
|
||
<div class="card">
|
||
<img class="card-img-top" src="{{ site.base }}/img/photos/{{ site.data.photos[18].file }}" alt="Card image cap">
|
||
<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 class="card bg-primary text-center p-3">
|
||
<cardquote class="cardquote text-white mb-0">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
|
||
<footer class="text-fade text-sm">
|
||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||
</footer>
|
||
</cardquote>
|
||
</div>
|
||
<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-4">
|
||
<div class="card">
|
||
<img class="card-img" src="{{ site.base }}/img/photos/{{ site.data.photos[19].file }}" alt="Card image">
|
||
</div>
|
||
<div class="card p-3 text-right">
|
||
<cardquote class="cardquote mb-0">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
|
||
<footer>
|
||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||
</footer>
|
||
</cardquote>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h5 class="card-title">Card title</h5>
|
||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to
|
||
additional content. This card has even longer content than the first to show that equal
|
||
height
|
||
action.</p>
|
||
<p class="card-text text-muted">
|
||
Last updated 3 mins ago
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|