254 lines
12 KiB
HTML
254 lines
12 KiB
HTML
{% set title = 'Components › Article' %}
|
|
{% set page = 'components-article.html' %}
|
|
{% extends 'layouts/master.html' %}
|
|
|
|
{% block content %}
|
|
<section class="section">
|
|
<div class="section-header">
|
|
<h1>Article</h1>
|
|
<div class="section-header-breadcrumb">
|
|
<div class="breadcrumb-item active"><a href="#">Dashboard</a></div>
|
|
<div class="breadcrumb-item"><a href="#">Components</a></div>
|
|
<div class="breadcrumb-item">Article</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section-body">
|
|
<h2 class="section-title">Articles</h2>
|
|
<p class="section-lead">This article component is based on card and flexbox.</p>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article">
|
|
<div class="article-header">
|
|
<div class="article-image" data-background="../assets/img/news/img08.jpg">
|
|
</div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#" class="btn btn-primary">Read More</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article">
|
|
<div class="article-header">
|
|
<div class="article-image" data-background="../assets/img/news/img04.jpg">
|
|
</div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#" class="btn btn-primary">Read More</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article">
|
|
<div class="article-header">
|
|
<div class="article-image" data-background="../assets/img/news/img09.jpg">
|
|
</div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#" class="btn btn-primary">Read More</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article">
|
|
<div class="article-header">
|
|
<div class="article-image" data-background="../assets/img/news/img12.jpg">
|
|
</div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#" class="btn btn-primary">Read More</a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section-title">Article Style B</h2>
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article article-style-b">
|
|
<div class="article-header">
|
|
<div class="article-image" data-background="../assets/img/news/img13.jpg">
|
|
</div>
|
|
<div class="article-badge">
|
|
<div class="article-badge-item bg-danger"><i class="fas fa-fire"></i> Trending</div>
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#">Read More <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article article-style-b">
|
|
<div class="article-header">
|
|
<div class="article-image" data-background="../assets/img/news/img15.jpg">
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#">Read More <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article article-style-b">
|
|
<div class="article-header">
|
|
<div class="article-image" data-background="../assets/img/news/img07.jpg">
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#">Read More <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-sm-6 col-md-6 col-lg-3">
|
|
<article class="article article-style-b">
|
|
<div class="article-header">
|
|
<div class="article-image" data-background="../assets/img/news/img02.jpg">
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-cta">
|
|
<a href="#">Read More <i class="fas fa-chevron-right"></i></a>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
<h2 class="section-title">Article Style C</h2>
|
|
<div class="row">
|
|
<div class="col-12 col-md-4 col-lg-4">
|
|
<article class="article article-style-c">
|
|
<div class="article-header">
|
|
<div class="article-image" data-background="../assets/img/news/img13.jpg">
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-category"><a href="#">News</a> <div class="bullet"></div> <a href="#">5 Days</a></div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-user">
|
|
<img alt="image" src="../assets/img/avatar/avatar-1.png">
|
|
<div class="article-user-details">
|
|
<div class="user-detail-name">
|
|
<a href="#">Hasan Basri</a>
|
|
</div>
|
|
<div class="text-job">Web Developer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-md-4 col-lg-4">
|
|
<article class="article article-style-c">
|
|
<div class="article-header">
|
|
<div class="article-image" data-background="../assets/img/news/img14.jpg">
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-category"><a href="#">News</a> <div class="bullet"></div> <a href="#">5 Days</a></div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-user">
|
|
<img alt="image" src="../assets/img/avatar/avatar-3.png">
|
|
<div class="article-user-details">
|
|
<div class="user-detail-name">
|
|
<a href="#">Rizal Fakhri</a>
|
|
</div>
|
|
<div class="text-job">UX Designer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div class="col-12 col-md-4 col-lg-4">
|
|
<article class="article article-style-c">
|
|
<div class="article-header">
|
|
<div class="article-image" data-background="../assets/img/news/img01.jpg">
|
|
</div>
|
|
</div>
|
|
<div class="article-details">
|
|
<div class="article-category"><a href="#">News</a> <div class="bullet"></div> <a href="#">5 Days</a></div>
|
|
<div class="article-title">
|
|
<h2><a href="#">Excepteur sint occaecat cupidatat non proident</a></h2>
|
|
</div>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. </p>
|
|
<div class="article-user">
|
|
<img alt="image" src="../assets/img/avatar/avatar-2.png">
|
|
<div class="article-user-details">
|
|
<div class="user-detail-name">
|
|
<a href="#">Irwansyah Saputra</a>
|
|
</div>
|
|
<div class="text-job">Mobile Developer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|