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.
"Make it as simple as possible, but not simpler."
Albert Einstein
Example
<p class="w3-xlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i>
</p>
<p>Albert Einstein</p>
</div>
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
<p class="w3-large w3-serif">
<i>"The future depends on what you do today."</i>
</p>
<p>Mahatma Gandhi</p>
</blockquote>
Use <blockquote> when the content is a real quotation.
Large Quotes
Font-size and font classes can make important quotations more prominent.
"Simplicity is the ultimate sophistication."
Leonardo da Vinci
Example
<p class="w3-xxlarge w3-serif">
<i>"Simplicity is the ultimate sophistication."</i>
</p>
<p>Leonardo da Vinci</p>
</div>
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
<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>
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
<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>
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.
✔
Programming in C will slowly decline.
Programming in JavaScript will be more important.
Example
<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
<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>
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
<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
<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>
Dark Quote
❝ Stay hungry. Stay foolish.
Steve Jobs
Example
<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>