Article – type 1
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<div class="ct-articleBox"> <div class="ct-articleBox-media"> <div class="ct-galleryBox"> <div class="ct-galleryBox-image "> <a class="ct-js-magnificPopupImage"> <img src="assets/images/portfolio1.jpg" alt=""> </a> </div> <div class="ct-galleryBox-overlay"> <div class="ct-u-displayTableVertical"> <div class="ct-u-displayTableCell"> <div class="ct-galleryBox-icons"> <div class="btn-group ct-btn-group--rounded ct-u-colorWhite" role="group" aria-label="..."> <a class="btn ct-btn--transparent" data-toggle="tooltip" data-placement="left" title="09/04/2015"><i class="fa fa-calendar"></i></a> <a class="btn ct-btn--transparent">Details</a> <a href="assets/images/portfolio1-lg.jpg" class="btn ct-btn--transparent ct-js-magnificPopupImage"><i class="fa fa-search"></i></a> </div> </div> </div> </div> </div> </div> </div> <h3 class=" ct-u-paddingTop30"> <a class="btn btn-link">No one would have believed in the last years</a> </h3> <div class="ct-articleBox-description"> <p class="ct-u-paddingTop20"> No one would have believed in the last years of the nine- teenth century that this world was being watched keenly and closely by intelligences greater than man’s and yet as mor- tal as his own; that as men busied themselves about their vari- ous concerns they were scrutinised and </p> </div> </div> |
Article – type 2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="ct-articleBox"> <div class="ct-articleBox-media"> <img src="assets/images/article-10.jpg" alt=""/> <div class="ct-tag">on sale</div> <span class="ct-link"> <a href="#">8</a> </span> </div> <div class="media ct-u-paddingTop20"> <div class="media-left"> <div class="media-object ct-articleBox-info"> <div class="info-1">390$</div> <div class="info-2"><a href="#">BUY</a></div> </div> </div> <div class="media-body"> <h3 class="media-heading ct-u-paddingBottom10 ct-fw-600">No one would have believed in</h3> <p> No one would have believed in the last years of the nine- teenth century that this world was being. </p> </div> </div> </div> |
CSS classes:
ct-articleBox: Base class for article.
ct-articleBox-media: Images,videos or other media that can be used in article.
ct-articleBox-description: Description of an article.
ct-link: number of comments displayed in bubble speech.
ct-tag: Tag for announcments, like “brand new”.
ct-u-paddingTop20: adds 20px padding on top.
ct-u-paddingTop30: adds 30px padding on top.
media, media-left, media-heading, media-object ,media-body – Bootstrap classes for creating media.
ct-articleBox-info: article info box wrapper that contain such information like date,price or is simply a button.
info-1: ‘ct-articleBox-info‘ subclass.
info-2: ‘ct-articleBox-info‘ subclass.
An article may be a part of a gallery:
ct-galleryBox: wrapper for gallery media.
ct-galleryBox-image: wrapper for gallery image.
ct-js-magnificPopupImage: Indicates that light box is in use. (Magnific pop-up)
btn: button class.
btn-link: button link style.
ct-btn–transparent: adds transparency to button.