KAWWA Markup Pattern Library


Editorial

Block Quotation Component Information

  • Class name:
  • Version: 1.0

Add to list

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.

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
  1. <blockquote>
  2. 	<p>
  3. 	    My quarters are on the first floor of this building and the second floor also is fully 
  4. 		occupied by warriors, but the third floor and the floors above are vacant; you may take your choice of these.
  5. 	</p>
  6. 	<p class="citation"><cite>A Princess of Mars</cite>, Edgar Rice Burroughs</p>
  7. </blockquote>

CSS Code

COPY
  1. blockquote {
  2. 	position: relative;
  3. 	width: 50%;
  4. 	max-width: 40em;
  5. 	color: #000;
  6. 	background: #FFF;
  7. 	padding: 0 0 0 2em;
  8. 	margin: 2em;
  9. }
  10. 	blockquote:before {
  11. 		position: absolute;
  12. 		top: -10px;
  13. 		left: 0;
  14. 		width: 20px;
  15. 		content:"\"";
  16. 		font-size: 48px;
  17. 		color: #808080;
  18. 		background: inherit;
  19. 	}
  20. 
                                
  21. 	blockquote p {
  22. 		font: 1em/1.5 open_sansitalic, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  23. 		text-indent: 0;
  24. 	}
  25. 
                                
  26. 	blockquote p.citation {
  27. 		font-size: 0.85em;
  28. 		padding-top: 1em;
  29. 	}
  30. 		blockquote p.citation:before {content: "\2500 \00A0 ";}
  31. 
                                
  32. 	cite {
  33. 		font-family: open_sansitalic, "Gill Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  34. 		font-style: normal;
  35. 	}
  36. 
                                

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