[ KAWWA PORTAL ] Components : Introduction

Editorial

Introduction

Class name: (k-intro)
Version: 1.0

Use this component for introductory text, mainly for articles or posts.

Demo
Snippets

Example of introductory paragraph... You may add as much paragraphs as you need to.

Far better that we save friendly bullets for ourselves at the last moment, as did those brave frontier women of my lost land, who took their own lives rather than fall into the hands of the Indian braves.

HTML5 Plain Code

COPY

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

    <p>Example of introductory paragraph... You may add as much paragraphs as you need to.</p>

    <p>Far better that we save friendly bullets for ourselves at the last moment, as did

        those brave frontier women of my lost land, who took their own lives rather than

        fall into the hands of the Indian braves.

```
    </p>
```
```
</div>
```

CSS Code

COPY

```
div.k-intro {
```
```
	max-width: 33em;
```
```
	background: #FFF;
```
```
	color: #303030;
```
```
	line-height: 1.58;
```
```
	padding-left: 1em;
```
```
	margin: 0 0 2em 2em;
```
```
	border-left: 1px solid #C0C0C0;
```
```
}
```

	div.k-intro p {font-size: 1.2em; text-indent: 0;}

	div.k-intro p:first-child:first-letter {

```
		line-height: 0.5;
```
```
		font-size: 200%;
```
```
		color: #000;
```
```
		background: #FFF;
```
```
	}
```
```
	/* Exceptions */
```

	div.k-article div.k-intro {max-width: 33em;}

	ul.k-form-steps + div.k-intro {margin: 2em 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

Introduction

HTML5 Plain Code

CSS Code

IE Backward Compatibility

Download List (0)

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce