W3.CSS Quotes
Quotes
W3.CSS panels are useful for displaying quotations.
Quotes can be styled with borders, colors, fonts, sizes, and cards.
A Simple Quote
A left border and a light background can make a quotation stand out.
Example
<div class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-xlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i>
</p>
<p>Albert Einstein</p>
</div>
Try it Yourself »
Use the blockquote Element
The HTML <blockquote> element is designed for quotations from another source.
W3.CSS classes can be added directly to the element.
"The future depends on what you do today."
Mahatma Gandhi
Example
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large w3-serif">
<i>"The future depends on what you do today."</i>
</p>
<p>Mahatma Gandhi</p>
</blockquote>
Try it Yourself »
Use <blockquote> when the content is a real quotation.
Large Quotes
Font-size and font classes can make important quotations more prominent.
Example
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>"Simplicity is the ultimate sophistication."</i>
</p>
<p>Leonardo da Vinci</p>
</div>
Try it Yourself »
Using HTML Symbols
You can use standard HTML symbols to decorate quotes, notes, and other content.
You can even use emojis.
No icon library is required.
| Symbol | Code |
|---|---|
| ❝ | ❝ |
| ❞ | ❞ |
| “ | “ |
| ” | ” |
| ≫ | ≫ |
| ✀ | ✀ |
| ✂ | ✂ |
| ✄ | ✄ |
| ✔ | ✔ |
| 📌 | 📌 |
| 📍 | 📍 |
Simplicity is the ultimate sophistication.
Leonardo da Vinci
Example
<div class="w3-panel w3-light-grey">
<span style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span>
<p class="w3-xlarge" style="margin-top:-40px">
<i>Simplicity is the ultimate sophistication.</i>
</p>
<p>Leonardo da Vinci</p>
</div>
Try It Yourself »
Quotes as Cards
Combine quotes with w3-card to create a stronger visual component.
Great things are done by a series of small things brought together.
Vincent van Gogh
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Example
<div class="w3-container w3-card-4 w3-light-grey">
<span class="w3-text-red" style="font-size:100px">❝</span>
<p class="w3-xxlarge w3-serif w3-text-red">❝</p>
<p class="w3-large w3-serif">
<i>Great things are done by a series of small things brought together.</i>
</p>
<p>Vincent van Gogh</p>
</div>
Try it Yourself »
What You Have Learned
- W3.CSS panels can be used to display quotations
- The HTML
<blockquote>element is intended for quotations - Border, color, font, and size classes can be combined to style quotes
- HTML symbols can add decorative quotation marks
- Quotes can be displayed inside cards
More Examples
Explore more ways to style W3.CSS quotes.
Example
<div class="w3-panel w3-center w3-leftbar w3-sand">
<p><i
class="w3-serif w3-xlarge">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">✔</span>
Programming in C will slowly decline.<br>
Programming in JavaScript
will be more important.</i></p>
</div>
Learning never exhausts the mind.
Leonardo da Vinci
Example
<div class="w3-panel w3-center w3-sand">
<p class="w3-xxlarge w3-serif">❝</p>
<p class="w3-xlarge"><i>Learning never exhausts the mind.</i></p>
<p>Leonardo da Vinci</p>
</div>
Try it Yourself »
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non massa vitae risus fermentum ullamcorper. Phasellus risus urna, ornare in aliquam id, porttitor sit amet sapien. Nulla facilisi.
Example
<div class="w3-panel w3-light-grey">
<span
style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span>
<p class="w3-xlarge" style="margin-top:-40px">
<i>"Lorem ipsum dolor sit amet, consectetur adipiscing elit ..."</i></p>
<p>Albert
Einstein</p>
</div>
Large Quote Symbol
Good design is as little design as possible.
Dieter Rams
Example
<div class="w3-panel w3-light-grey">
<span style="font-size:120px;line-height:0.6em;opacity:0.2">❝</span>
<p class="w3-xlarge">
<i>Good design is as little design as possible.</i>
</p>
<p>Dieter Rams</p>
</div>
Try it Yourself »
Dark Quote
❝ Stay hungry. Stay foolish.
Steve Jobs
Example
<div class="w3-panel w3-black">
<p class="w3-large w3-serif">
<span class="w3-xxlarge w3-margin-right">❝</span>
<i>Stay hungry. Stay foolish.</i>
</p>
<p>Steve Jobs</p>
</div>
Try it Yourself »
