[ KAWWA PORTAL ] Components : Article entry

Editorial

Article entry

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.

Demo
Snippets

A Princess of Mars

Month 14th, 2011
by Edgar Rice Burroughs

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.

HTML5 Plain Code

COPY

<article class="k-article k-entry h-entry h-feed">

    <h3 class="p-name"><a href="#">A Princess of Mars</a></h3>

```
    <ul class="entry-info">
```

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

        <li>by <a class="p-author h-card" href="#">Edgar Rice Burroughs</a></li>

```
        </ul>
```
```
    <div class="e-content p-summary">
```

         <p><strong>Article summary...</strong> 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.</p>

         <p class="k-readmore"><a href="#">Read more...</a></p>

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

CSS Code

COPY

```
h2 + .k-entry {margin-top: 2em;}
```

.k-entry {float: left; width: 100%; max-width: 55em; border-bottom: none;}

```
	.k-entry h3 {
```
```
		position: relative;
```
```
		font-size: 2em;
```
```
		text-transform: none;
```
```
		padding: 0;
```
```
		margin: 0 0 0.5em;
```
```
	}
```
```
		.k-entry h3 a, .k-entry h3 a:link {
```
```
			display: block;
```
```
			text-decoration: none;
```
```
			color: #555;
```
```
			background: #FFF;
```
```
			padding: 0.5em;
```
```
			border-top: 4px solid #000;
```
```
		}
```

		.k-entry h3 a:visited {color: #666; background: #FFF;}

		.k-entry h3 a:hover, .k-entry h2 a:focus {color: #A40800; background: #FFF;}

```
	/* Exceptions for entry level */
```

	.k-entry ul.entry-info, .k-entry .content {padding-left: 2%;}

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

	.k-entry entry-info {float: left; width: 30%;}

	.k-entry .content {float: right; width: 65%;}

		.k-entry ul.entry-info li {font-size: 0.8em;}

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 entry

A Princess of Mars

HTML5 Plain Code

CSS Code

IE Backward Compatibility

Download List (0)

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce