{Theme} have 3 types of Article boxes
Article box – type 1
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="ct-articleBox text-center"> <a href="single-blog-post.html"> <figure> <img src="../assets/images/demo-content/article-thumbnail-1.jpg" alt="Image"/> <figcaption> <span class="ct-articleBox-date">Thursday, July 02, 2015</span> <h4 class="ct-articleBox-title">Our Impecable Cleaning Services & Staff</h4> </figcaption> </figure> <span class="btn btn-primary text-uppercase ct-articleBox-link"><strong>Read</strong> article</span> </a> </div> |
Screenshot
Article box 1
Article box – type 2
HTML markup
|
1 2 3 4 5 6 7 8 9 10 |
<div class="ct-articleBox ct-articleBox--type2 ct-u-marginBottom40"> <a href="single-blog-post.html" class="ct-articleBox-image"> <img src="../assets/images/demo-content/image-9.jpg" alt="Image"/> <span class="btn btn-primary text-uppercase ct-articleBox-link">Read article</span> </a> <span class="h6"><small class="ct-articleBox-meta">Wednesday, July 10, 2015</small></span> <span class="ct-hr ct-hr--type1 ct-u-marginTop20 ct-u-marginBottom10" data-background="#f7f7f7">Line break</span> <h4 class="ct-articleBox-title"><a href="single-blog-post.html">The dream dorm: best bunkmates</a></h4> <p>A few of the HI team give their two cents on the destinations they wanderlust...</p> </div> |
Screenshot
Artickle box 2
Article box – type 3
HTML markup
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="media ct-articleBox ct-articleBox--type3"> <a href="single-blog-post.html" class="media-left ct-articleBox-image"> <img class="media-object" src="../assets/images/demo-content/image-10.jpg" alt="Image"> <span class="btn btn-primary text-uppercase ct-articleBox-link">Read article</span> </a> <div class="media-body"> <span class="h6"><small class="ct-articleBox-meta">Wednesday, July 09, 2015</small></span> <span class="ct-hr ct-hr--type1 ct-u-marginTop20 ct-u-marginBottom20" data-background="#f7f7f7">Line break</span> <h4 class="ct-articleBox-title"><a href="single-blog-post.html">Hostel of the Week: The Hat, Madrid</a></h4> <p>Looking for a bit of hostel luxury in Europe?</p> </div> </div> |
Screenshot
Artickle box 3