KAWWA Markup Pattern Library


Editorial

Article entry Component Information

  • Class name: (k-article+k-entry)
  • Version: 1.0

Add to list

An "article entry", as a post entry, presents a summary of an article or post.

You may use it to list your posts, create a list of news, etc.

A Princess of Mars

Article summary... As I wandered about the plaza lost in my gloomy forebodings Tars Tarkas approached me on his way from the audience chamber. His demeanor toward me was unchanged, and he greeted me as though we had not just parted a few moments before.

Read more...

HTML5 Plain Code

COPY
  1. <article class="k-article k-entry h-entry h-feed">
  2.     <h3 class="p-name"><a href="#">A Princess of Mars</a></h3>
  3.     <ul class="entry-info">
  4.         <li><time class="dt-published" datetime="2011-07-14">Month 14th, 2011</time></li>
  5.         <li>by <a class="p-author h-card" href="#">Edgar Rice Burroughs</a></li>
  6.         </ul>
  7.     <div class="e-content p-summary">
  8.          <p><strong>Article summary...</strong> As I wandered about the plaza lost in my gloomy forebodings Tars Tarkas
  9.                  approached me on his way from the audience chamber. His demeanor toward me
  10.                  was unchanged, and he greeted me as though we had not just parted a few moments before.</p>
  11.          <p class="k-readmore"><a href="#">Read more...</a></p>
  12.         </div>
  13. </article>

CSS Code

COPY
  1. h2 + .k-entry {margin-top: 2em;}
  2. 
                                
  3. .k-entry {float: left; width: 100%; max-width: 55em; border-bottom: none;}
  4. 
                                
  5. 	.k-entry h3 {
  6. 		position: relative;
  7. 		font-size: 2em;
  8. 		text-transform: none;
  9. 		padding: 0;
  10. 		margin: 0 0 0.5em;
  11. 	}
  12. 
                                
  13. 		.k-entry h3 a, .k-entry h3 a:link {
  14. 			display: block;
  15. 			text-decoration: none;
  16. 			color: #555;
  17. 			background: #FFF;
  18. 			padding: 0.5em;
  19. 			border-top: 4px solid #000;
  20. 		}
  21. 		.k-entry h3 a:visited {color: #666; background: #FFF;}
  22. 		.k-entry h3 a:hover, .k-entry h2 a:focus {color: #A40800; background: #FFF;}
  23. 
                                
  24. 
                                
  25. 	/* Exceptions for entry level */
  26. 
                                
  27. 	.k-entry ul.entry-info, .k-entry .content {padding-left: 2%;}
  28. 	.k-entry ul.entry-info + div.content {margin: 0;}
  29. 
                                
  30. 	.k-entry entry-info {float: left; width: 30%;}
  31. 	.k-entry .content {float: right; width: 65%;}
  32. 		.k-entry ul.entry-info li {font-size: 0.8em;}
  33. 
                                
  34. 
                                
  35. 
                                

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce