W3.CSS-citaten
De pijn zelf is liefde, het belangrijkste opslagsysteem. Dat de massa van het leven niet een warme glimlach van de beren is. Het gelach van de urn Niets is ingewikkeld.
Citaten weergeven
De klasse w3-panel is de perfecte klasse om citaten weer te geven.
Citaten worden vaak weergegeven met een grijze achtergrond, een linkerrandbalk en een cursief lettertype:
Voorbeeld
<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>
Grote Citaten
Op internet worden vaak grote citaten gebruikt:
Voorbeeld
<div class="w3-panel w3-leftbar w3-sand">
<p class="w3-xxlarge w3-serif">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</div>
Blok citaten
Als je het standaard HTML-element <blockquote> gebruikt, merk dan op dat de browser een extra linker- en rechtermarge toevoegt:
"Make it as simple as possible, but not simpler."
Albert Einstein
Voorbeeld
<blockquote class="w3-panel w3-leftbar w3-light-grey">
<p class="w3-large">
<i>"Make it as simple as possible, but not simpler."</i></p>
<p>Albert Einstein</p>
</blockquote>
HTML-symbolen gebruiken
U kunt standaard HTML-symbolen gebruiken in plaats van ampersands:
| Symbool | Code |
|---|---|
| « | #8810 |
| ✂ | #9986 |
| ❝ | #10077 |
| ❞ | #10078 |
| ❠ | #10080 |
| ✔ | #10004 |
De pijn zelf is liefde, het belangrijkste opslagsysteem. Dat de massa van het leven niet een warme glimlach van de beren is. Het gelach van de urn Niets is ingewikkeld.
De pijn zelf is liefde, het belangrijkste opslagsysteem. Dat de massa van het leven niet een warme glimlach van de beren is. Het gelach van de urn Niets is ingewikkeld.
Voorbeeld
<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>
Voorbeeld
<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>
Font Awesome-pictogrammen gebruiken
U kunt ook pictogrammen uit de Font Awesome-bibliotheek gebruiken:
Voorbeeld
<div class="w3-panel w3-leftbar">
<p><i class="fa fa-quote-right
w3-xxlarge"></i><br>
<i class="w3-serif w3-xlarge">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></p>
</div>
U kunt ook de kleur en dekking wijzigen:
Voorbeeld
<div class="w3-panel w3-sand w3-leftbar">
<p><i class="fa fa-quote-right
w3-xxlarge w3-opacity"></i>
<span class="w3-serif
w3-xlarge">
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</span></p>
</div>
Een zwarte quote:
De pijn zelf is liefde, het belangrijkste opslagsysteem. Dat de massa van het leven niet een warme glimlach van de beren is. Het gelach van de urn Niets is ingewikkeld.
Voorbeeld
<div class="w3-panel w3-black">
<p class="w3-large
w3-serif">
<i class="fa fa-quote-right w3-xxlarge w3-margin-right"></i>
Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</p>
</div>
Citaten weergeven als kaarten
De pijn zelf is liefde, het belangrijkste opslagsysteem. Dat de massa van het leven niet een warme glimlach van de beren is. Het gelach van de urn Niets is ingewikkeld.
Voorbeeld
<div class="w3-panel w3-card-4 w3-light-grey" style="width:50%">
<p
class=" w3-large w3-serif">
<i class="fa fa-quote-right w3-xxlarge
w3-text-red"></i><br>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit ...</p>
</div>
De pijn zelf is liefde, het belangrijkste opslagsysteem. Dat de massa van het leven niet een warme glimlach van de beren is. Het gelach van de urn Niets is ingewikkeld.
Voorbeeld
<div class="w3-panel w3-card-4 w3-center" style="width:50%">
<span
style="font-size:100px">❝</span><br>
<p style="margin-top:-60px">
<i><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit ...</b></i></p>
</div>