W3CSS Quotes

The best thing about W3CSS is that a single class can be used to create a variety of visual elements. For instance, take example of w3-panel class. This class is used to create panels, notes and even quotes elements. We have already seen how to create notes and panels, in this article we shall see W3CSS quotes.

A basic W3CSS Quotes

To create a simple quote. We need w3-panel class along with a w3-leftbar class and a background color class. Usually a quote is displayed in italics, therefore we can also italicize our text. Take a look at the simple example of a quote.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <div class="w3-panel w3-leftbar w3-border-blue w3-pale-yellow">
      <p class="w3-xlarge w3-serif">
      <i>"Brevity is soul of wit."</i></p>
      <p>Anonymous</p>
    </div>

</body>
    

</html>

Download the code Try the code

In the above example we created a simple quote with yellow background, blue left border, serif font and italicized weight.

You can also create large quotes by using w3-xxlarge class in your paragraph. Take a look at another example of large quotes

W3CSS Large Quote

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    <div class="w3-panel w3-leftbar w3-border-green w3-pale-green">
      <p class="w3-xxlarge w3-serif">
      <i>"Brevity is soul of wit."</i></p>
      <p>Anonymous</p>
    </div>

</body>
    

</html>

Download the code Try the code

In the above code we have used w3-xxlarge font to increase the size of the font. Also, we used w3-pale-green class to add a light green background and w3-border-green class to add a solid left bar to the quote.

W3CSS Quote Cards

Another very famous way of displaying quotes on a website is by using cards. Quotes look more concise and attractive when used inside cards. Lets take a simple example of how quotes can be displayed inside card.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-panel w3-card-5 w3-leftbar w3-border-red w3-pale-red" style="width:25%">
  <p class=" w3-large w3-serif">

  <i>Brevity is the soul of wit.</i></p>
</div>

</body>
    

</html>

Download the code Try the code

In the above webpage we created a card that takes 25% of the screen width. The background color of the card is pale red while left border is solid red. For the sake of aesthetics, we have again italicized the text. I would suggest you to play around with the text color, background to see how variety of quote cards can be created.

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .