KAWWA Markup Pattern Library


Editorial

Article Component Information

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

Add to list

An "article" is a block grouping pure editorial content. You may use it for a blog post, a white-paper, etc.

Note that the "entry-info" block is specific to the "article" component (it can appear only inside an "article" component).

You may refer also to the Article template for practical examples of how to use editorial content.

Article title

Use this component for article introductions or summaries...

The thought that the divine Dejah Thoris might fall into the clutches of such an abysmal...

This is a simple paragraph... As I wandered about the plaza lost in my gloomy forebodings Tars Tarkas approached me ...

Title level 3

Title level 4

Title level 5

"My quarters are on the first floor of this building," he said, "and the second floor also is fully occupied by warriors....

  • My quarters are on the first floor
  • Dejah Thoris might fall into the clutches
  • The thought that the divine Dejah Thoris

HTML5 Plain Code

COPY
  1. <article class="k-article h-entry">
  2. 	<h2 class="p-name">Article title</h2>
  3.     <ul class="entry-info">
  4.     	<li><time class="dt-published" datetime="2011-07-14T14:07:00-07:00">Month 14th, 2011</time></li>
  5. 		<li>by <address class="h-card p-author"><a class="u-url" href="#" rel="author">Author's name</a></address></li>
  6. 	</ul>
  7. 	<div class="k-intro">
  8. 		<p>Use this component for article introductions or summaries... </p>
  9. 		<p>The thought that the divine Dejah Thoris might fall into the clutches of such an abysmal...</p>
  10. 	</div>
  11. 	<div class="entry-content e-content">
  12. 		<p><strong>This is a simple paragraph...</strong> As I wandered about the plaza lost in my gloomy forebodings Tars Tarkas approached me ...</p>
  13. 					
  14. 		<h3>Title level 3</h3>
  15. 		<h4>Title level 4</h4>
  16. 		<h5>Title level 5</h5>
  17. 		
  18. 		<p>"My quarters are on the first floor of this building," he said, "and the second floor also is fully occupied by warriors....</p>
  19. 		<ul>
  20. 			<li>My quarters are on the first floor</li>
  21. 			<li>Dejah Thoris might fall into the clutches</li>
  22. 			<li>The thought that the divine Dejah Thoris</li>
  23. 		</ul>
  24. 	</div>
  25. </article>

CSS Code

COPY
  1. .k-article {
  2. 	max-width: 45em;
  3. 	margin: 0 0 1em;
  4. 	padding-bottom: 1em;
  5. 	border-bottom: 1px dashed #CCC;
  6. }
  7. 
                                
  8. 	.k-article h2 + ul.entry-info {margin-top: -1.5em;}
  9. 	.k-article h3 {margin: 1.2em 0 0.6em;}
  10. 	.k-article h4 {padding: 0; margin: 1.2em 0 0.6em;}
  11. 	.k-article ul, .k-article ol {max-width: 40em; margin: 1em 1em 1em 1.5em;}
  12. 
                                
  13. 	.k-article p {line-height: 1.7;}
  14. 	.k-article p.illustration {max-width: 100%;}
  15. 	.k-article p + p {text-indent: 1.5em;}
  16. 	.k-article p + p.k-readmore {text-indent: 0;}
  17. 
                                
  18. 	.k-article li {line-height: 1.7;}
  19. 
                                
  20. 	ul.entry-info {padding: 0; margin: 0 0 1.5em;}
  21. 		ul.entry-info li {display: inline; list-style-type: none; line-height: 1.7;}
  22. 
                                
  23. 		ul.entry-info + div.content {margin: 2.5em 0 0;}
  24. 		ul.entry-info address {
  25. 			display: inline;
  26. 			font-family: open_sansitalic, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  27. 			font-style: normal;
  28. 		}
  29. 
                                
  30. 
                                
  31. .dt-published:after {
  32. 	content: "\2609";
  33. 	font-size: 150%;
  34. 	vertical-align: -3px;
  35. 	color: #333;
  36. 	padding: 0 0.5rem 0 0.7rem;
  37. }
  38. 
                                
  39. 
                                
  40. 	/* Exceptions */
  41. 	.k-article div.k-pagination {
  42. 		width: 96%;
  43. 		background: #E8E8E8;
  44. 		padding: 0.3em 2%;
  45. 		margin-top: 1em;
  46. 	}
  47. 
                                
  48.      .k-article p.page-numbers, #sidebar p.page-numbers, aside[role=complementary] p.page-numbers {
  49.         width: 100%;
  50.         background: #E8E8E8;
  51.         padding: 2% 0;
  52.         text-align: center;
  53.     }
  54. 	.k-article ul.tabs {max-width: 100%; margin: 0;}
  55. 
                                

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