{Theme} comes with the following template for blog posts
Blog post
You can use it with the following HTML markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<section class="ct-frame ct-frame--white"> <article class="ct-blogItem"> <div class="ct-blogItem ct-blogThumbnail"> <img src="assets/images/demo-content/blog-image.jpg" alt="Post Image" /> </div> <div class="ct-blogItem ct-innerMargin"> <div class="ct-blogItem ct-entryMeta"> <span class="ct-blogItem ct-entryDate">oct 22, 2104</span> <span class="ct-blogItem ct-catLinks">♦ <a href="#"> news</a></span> <span class="ct-blogItem ct-entryComments">♦ <a href="#"> 3 comments</a></span> </div> <h3 class="ct-blogItem ct-entryTitle ct-u-font2"><a href="blog-single.html">standard post format with preview image</a></h3> <p class="ct-blogItem ct-entryDescription">Etiam nunc tortor, ultrices quis turpis, tempor lacinia ligula. Sed at odio vel est lobortis eleifend ac vitae enim. Suspendisse est gravida nisi lectus, nisl ullamcorper et. Pellentesque volutpat felis ut nunc elit euismod sollicitudin. Nam ullamcorper nibh eget sem consectetur, et semper elit suscipit. </p> <div class="ct-u-paddingBottom10"><a href="blog-single.html" class="btn btn-lg btn-button--brown">read more</a></div> </div> </article> </section> |
Check also how our blog comments look like
Blog comments
Use it with the following 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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<ul class="ct-comments"> <li> <div class="media"> <a href="#"><img src="assets/images/demo-content/blog-avatar-1.jpg" class="ct-authorImage pull-left" alt="Author"/></a> <div class="media-body ct-u-paddingLeft20"> <label class="ct-entryDateSecond">oct 22, 2104</label> <span class="ct-diamondSymbol">♦</span><a href="#" class="ct-commentReply"> reply</a> <h4 class="ct-media-heading ct-u-font2">richard doe</h4> <p> Convallis lorem sagittis neque pellentesque tempor. Proin euismod consectetur quam ac lacinia. Donec ut facilisis mauris, sed hendrerit nunc. Aenean malesuada scelerisque arcu sed sollicitudin. </p> </div> </div> </li> <li> <ol> <li> <div class="media"> <a href="#"><img src="assets/images/demo-content/blog-avatar-2.jpg" class="ct-authorImage pull-left" alt="Author"/></a> <div class="media-body ct-u-paddingLeft20"> <label class="ct-entryDateSecond">oct 22, 2104</label> <span class="ct-diamondSymbol">♦</span><a href="#" class="ct-commentReply"> reply</a> <h4 class="ct-media-heading ct-u-font2">maria gomez</h4> <p> Reoin euismod consectetur quam ac lacinia. Donec ut facilisis mauris, sed hendrerit nunc. Aenean malesuada scelerisque arcu sed sollicitudin. </p> </div> </div> </li> </ol> </li> <li> <div class="media"> <a href="#"><img src="assets/images/demo-content/blog-avatar-3.jpg" class="ct-authorImage pull-left" alt="Author"/></a> <div class="media-body ct-u-paddingLeft20"> <label class="ct-entryDateSecond">oct 22, 2104</label> <span class="ct-diamondSymbol">♦</span><a href="#" class="ct-commentReply"> reply</a> <h4 class="ct-media-heading ct-u-font2">jane smith</h4> <p> Reoin euismod consectetur quam ac lacinia. Donec ut facilisis mauris, sed hendrerit nunc. Aenean malesuada scelerisque arcu sed sollicitudin. </p> </div> </div> </li> </ul> |