[ KAWWA PORTAL ] Components : Block Quotation

Editorial

Block Quotation

Class name:
Version: 1.0

Use a block quotation whenever you have to quote a phrase or a passage from a book, poem, play, paper, etc., in order to illustrate succinctly or support a point or an argument.

Notice that a block quotation is needed whenever your quote exceeds four lines of text. Use the <q> inline tag otherwise to quote simple, short passages.

Remember that it is important to indicate the source of your quote. In doing so, you may use the <cite> tag to tag the element that represents the title of the work, as shown below.

Demo
Snippets

My quarters are on the first floor of this building and the second floor also is fully occupied by warriors, but the third floor and the floors above are vacant; you may take your choice of these.

A Princess of Mars, Edgar Rice Burroughs

HTML5 Plain Code

COPY

```
<blockquote>
```
```
	<p>
```

	    My quarters are on the first floor of this building and the second floor also is fully

		occupied by warriors, but the third floor and the floors above are vacant; you may take your choice of these.

```
	</p>
```

	<p class="citation"><cite>A Princess of Mars</cite>, Edgar Rice Burroughs</p>

```
</blockquote>
```

CSS Code

COPY

```
blockquote {
```
```
	position: relative;
```
```
	width: 50%;
```
```
	max-width: 40em;
```
```
	color: #000;
```
```
	background: #FFF;
```
```
	padding: 0 0 0 2em;
```
```
	margin: 2em;
```
```
}
```
```
	blockquote:before {
```
```
		position: absolute;
```
```
		top: -10px;
```
```
		left: 0;
```
```
		width: 20px;
```
```
		content:"\"";
```
```
		font-size: 48px;
```
```
		color: #808080;
```
```
		background: inherit;
```
```
	}
```
```
	blockquote p {
```

		font: 1em/1.5 open_sansitalic, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

```
		text-indent: 0;
```
```
	}
```
```
	blockquote p.citation {
```
```
		font-size: 0.85em;
```
```
		padding-top: 1em;
```
```
	}
```

		blockquote p.citation:before {content: "\2500 \00A0 ";}

```
	cite {
```

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

```
		font-style: normal;
```
```
	}
```

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

Block Quotation

HTML5 Plain Code

CSS Code

IE Backward Compatibility

Download List (0)

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce