[ KAWWA PORTAL ] Components : Article

Editorial

Article

Class name: (k-article)
Version: 1.0

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.

Demo
Snippets

Article title

Month 14th, 2011
by
Author's name

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

```
<article class="k-article h-entry">
```
```
	<h2 class="p-name">Article title</h2>
```
```
    <ul class="entry-info">
```

    	<li><time class="dt-published" datetime="2011-07-14T14:07:00-07:00">Month 14th, 2011</time></li>

		<li>by <address class="h-card p-author"><a class="u-url" href="#" rel="author">Author's name</a></address></li>

```
	</ul>
```
```
	<div class="k-intro">
```

		<p>Use this component for article introductions or summaries... </p>

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

```
	</div>
```
```
	<div class="entry-content e-content">
```

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

```
					
```
```
		<h3>Title level 3</h3>
```
```
		<h4>Title level 4</h4>
```
```
		<h5>Title level 5</h5>
```
```
		
```

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

```
		<ul>
```

			<li>My quarters are on the first floor</li>

			<li>Dejah Thoris might fall into the clutches</li>

			<li>The thought that the divine Dejah Thoris</li>

```
		</ul>
```
```
	</div>
```
```
</article>
```

CSS Code

COPY

```
.k-article {
```
```
	max-width: 45em;
```
```
	margin: 0 0 1em;
```
```
	padding-bottom: 1em;
```
```
	border-bottom: 1px dashed #CCC;
```
```
}
```

	.k-article h2 + ul.entry-info {margin-top: -1.5em;}

```
	.k-article h3 {margin: 1.2em 0 0.6em;}
```

	.k-article h4 {padding: 0; margin: 1.2em 0 0.6em;}

	.k-article ul, .k-article ol {max-width: 40em; margin: 1em 1em 1em 1.5em;}

```
	.k-article p {line-height: 1.7;}
```

	.k-article p.illustration {max-width: 100%;}

```
	.k-article p + p {text-indent: 1.5em;}
```

	.k-article p + p.k-readmore {text-indent: 0;}

```
	.k-article li {line-height: 1.7;}
```

	ul.entry-info {padding: 0; margin: 0 0 1.5em;}

		ul.entry-info li {display: inline; list-style-type: none; line-height: 1.7;}

		ul.entry-info + div.content {margin: 2.5em 0 0;}

```
		ul.entry-info address {
```
```
			display: inline;
```

			font-family: open_sansitalic, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

```
			font-style: normal;
```
```
		}
```
```
.dt-published:after {
```
```
	content: "\2609";
```
```
	font-size: 150%;
```
```
	vertical-align: -3px;
```
```
	color: #333;
```
```
	padding: 0 0.5rem 0 0.7rem;
```
```
}
```
```
	/* Exceptions */
```
```
	.k-article div.k-pagination {
```
```
		width: 96%;
```
```
		background: #E8E8E8;
```
```
		padding: 0.3em 2%;
```
```
		margin-top: 1em;
```
```
	}
```

     .k-article p.page-numbers, #sidebar p.page-numbers, aside[role=complementary] p.page-numbers {

```
        width: 100%;
```
```
        background: #E8E8E8;
```
```
        padding: 2% 0;
```
```
        text-align: center;
```
```
    }
```

	.k-article ul.tabs {max-width: 100%; margin: 0;}

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

KAWWA Markup Pattern Library

Editorial

Article

Article title

Title level 3

Title level 4

Title level 5

HTML5 Plain Code

CSS Code

IE Backward Compatibility

Download List (0)

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce