Quotes

The following examples are meant to demonstrate how <blockquote> can be used within the context of an article's content.

For more options with quotes, also checkout the Testimonials component.

Standard Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel. Sed cursus sed tortor vel molestie. Maecenas rhoncus aliquam nisl, non auctor urna tincidunt sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Praesent vitae aliquam magna. Quisque gravida ullamcorper malesuada. Phasellus eget tortor nulla. In nec consectetur sapien, at aliquet purus. Nunc vitae ante eu ipsum facilisis ullamcorper eget feugiat arcu.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Blockquote With Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel. Sed cursus sed tortor vel molestie. Maecenas rhoncus aliquam nisl, non auctor urna tincidunt sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc.

Praesent vitae aliquam magna. Quisque gravida ullamcorper malesuada. Phasellus eget tortor nulla. In nec consectetur sapien, at aliquet purus. Nunc vitae ante eu ipsum facilisis ullamcorper eget feugiat arcu.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Donec rutrum, est vel posuere congue, arcu mauris euismod libero, eget mattis est orci vitae nisi. Cras eget urna nunc.

Blockquotes With Citations

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel. Sed cursus sed tortor vel molestie. Maecenas rhoncus aliquam nisl, non auctor urna tincidunt sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. John Smith

Praesent vitae aliquam magna. Quisque gravida ullamcorper malesuada. Phasellus eget tortor nulla. In nec consectetur sapien, at aliquet purus. Nunc vitae ante eu ipsum facilisis ullamcorper eget feugiat arcu.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Clark Kent, Daily Planet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. John Smith
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Clark Kent, Daily Planet

Quotes Aligned Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel. Sed cursus sed tortor vel molestie. Maecenas rhoncus aliquam nisl, non auctor urna tincidunt sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. John Smith

Praesent congue turpis quis lacus viverra accumsan. Nunc ullamcorper est eleifend ante aliquet elementum. Vivamus at accumsan dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec viverra elit id vehicula tristique.

Morbi scelerisque libero faucibus justo mollis euismod. Phasellus quam velit, egestas ut feugiat non, sodales vel libero. Nullam orci sapien, euismod a nunc in, sollicitudin rutrum sapien. Fusce in velit non dolor fringilla iaculis. Nunc fringilla dolor felis. Maecenas nec nisi ac lectus pharetra volutpat non eget ligula. Suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. John Smith

Note: For the purpose of this demo, the quote above has been given a maximum width of 300px. This does not happen by default when applying align-left to a blockquote.

Quote Aligned Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus semper dictum sapien, ac adipiscing dui semper vel. Sed cursus sed tortor vel molestie. Maecenas rhoncus aliquam nisl, non auctor urna tincidunt sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. John Smith

Praesent congue turpis quis lacus viverra accumsan. Nunc ullamcorper est eleifend ante aliquet elementum. Vivamus at accumsan dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec viverra elit id vehicula tristique.

Morbi scelerisque libero faucibus justo mollis euismod. Phasellus quam velit, egestas ut feugiat non, sodales vel libero. Nullam orci sapien, euismod a nunc in, sollicitudin rutrum sapien. Fusce in velit non dolor fringilla iaculis. Nunc fringilla dolor felis. Maecenas nec nisi ac lectus pharetra volutpat non eget ligula. Suspendisse potenti.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. John Smith

Note: For the purpose of this demo, the quote above has been given a maximum width of 300px. This does not happen by default when applying align-right to a blockquote.