Introduction Last updated: 01.07.2020

UX library Quotes

Common Style update for UX Library Quotes


Quotes Section Alignment - Left

Add the class .tl-quotes-left for align the quotes in Leftside

<div class="tl-quotes-outer-wrap tl-quotes-left">


Quotes Section Alignment - center

Add the class .tl-quotes-center for align the quotes in Center

<div class="tl-quotes-outer-wrap tl-quotes-center">


Quotes Section Alignment - right

Add the class .tl-quotes-right for align the quotes in Rightside

<div class="tl-quotes-outer-wrap tl-quotes-right">


Quotes Section Bold

Add the class .tl-quotes-bold for set the quotes with Bold

<div class="tl-quotes-outer-wrap tl-quotes-bold">


Quotes Section Italic

Add the class .tl-quotes-italic for set the quotes with Italic

<div class="tl-quotes-outer-wrap tl-quotes-italic">


Quotes 1

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • No Color

Click one of the buttons below to select which attribute to change, then click on one of the colors above to change that attribute's color or select `No Color` to unset.

When you are finished, copy the code above and paste into WordPress for your site.


Quotes Example:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

-Lorem Ipsum
HTML Output
                        <div class="tl-quotes-1">
    <div class="tl-quotes-outer-wrap">
        <div class="tl-quotes-box-wrap">
            <div class="tl-quotes-symbol tl-quotes-symbol-left">
            <i class="fas fa-quote-left tl-fa-icons"></i>
            </div>
            <div class="tl-quotes-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
            </div>
            <div class="tl-quotes-carret">
            <i class="fas fa-caret-right tl-fa-icons"></i>
            </div>
            <div class="tl-quotes-sperator"></div>
            <div class="tl-quotes-author">
            -Lorem Ipsum
            </div>
            <div class="tl-quotes-symbol tl-quotes-symbol-right">
            <i class="fas fa-quote-right tl-fa-icons"></i>
            </div>
        </div>
    </div>
</div>
&lt;div class=&quot;tl-quotes-1&quot;&gt; &lt;div class=&quot;tl-quotes-outer-wrap&quot;&gt; &lt;div class=&quot;tl-quotes-box-wrap&quot;&gt; &lt;div class=&quot;tl-quotes-symbol tl-quotes-symbol-left&quot;&gt; &lt;i class=&quot;fas fa-quote-left tl-fa-icons&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class=&quot;tl-quotes-content&quot;&gt; &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;tl-quotes-carret&quot;&gt; &lt;i class=&quot;fas fa-caret-right tl-fa-icons&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class=&quot;tl-quotes-sperator&quot;&gt;&lt;/div&gt; &lt;div class=&quot;tl-quotes-author&quot;&gt; -Lorem Ipsum &lt;/div&gt; &lt;div class=&quot;tl-quotes-symbol tl-quotes-symbol-right&quot;&gt; &lt;i class=&quot;fas fa-quote-right tl-fa-icons&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

Quotes 2

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • No Color

Click one of the buttons below to select which attribute to change, then click on one of the colors above to change that attribute's color or select `No Color` to unset.

When you are finished, copy the code above and paste into WordPress for your site.


Quotes Example:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

HTML Output
                        <div class="tl-quotes-2">
  <div class="tl-quotes-outer-wrap tl-quotes-style-2 tl-quotes-italic">
    <div class="tl-quotes-box-wrap">
      <div class="tl-quotes-symbol tl-quotes-symbol-left">
        <i class="fas fa-quote-left"></i>
      </div>
      <div class="tl-quotes-content">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been <b> the industry's standard dummy text ever since the 1500s.</b></p>
      </div>
      <div class="tl-quotes-symbol tl-quotes-symbol-right">
        <i class="fas fa-quote-right tl-fa-icons"></i>
      </div>
    </div>
  </div>
</div>
&lt;div class=&quot;tl-quotes-2&quot;&gt; &lt;div class=&quot;tl-quotes-outer-wrap tl-quotes-style-2 tl-quotes-italic&quot;&gt; &lt;div class=&quot;tl-quotes-box-wrap&quot;&gt; &lt;div class=&quot;tl-quotes-symbol tl-quotes-symbol-left&quot;&gt; &lt;i class=&quot;fas fa-quote-left&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class=&quot;tl-quotes-content&quot;&gt; &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been &lt;b&gt; the industry's standard dummy text ever since the 1500s.&lt;/b&gt;&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;tl-quotes-symbol tl-quotes-symbol-right&quot;&gt; &lt;i class=&quot;fas fa-quote-right tl-fa-icons&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

Quotes 3

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • No Color

Click one of the buttons below to select which attribute to change, then click on one of the colors above to change that attribute's color or select `No Color` to unset.

When you are finished, copy the code above and paste into WordPress for your site.


Quotes Example:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

-Lorem Ipsum
HTML Output
                        <div class="tl-quotes-3">
    <div class="tl-quotes-outer-wrap tl-quotes-style-3">
        <div class="tl-quotes-box-wrap">
            <div class="tl-quotes-symbol tl-quotes-symbol-left">
            <i class="fas fa-quote-left"></i>
            </div>
            <div class="tl-quotes-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
            </div>
            <div class="tl-quotes-author">
            -Lorem Ipsum
            </div>
            <div class="tl-quotes-symbol tl-quotes-symbol-right">
            <i class="fas fa-quote-right"></i>
            </div>
        </div>
    </div>
</div>
&lt;div class=&quot;tl-quotes-3&quot;&gt; &lt;div class=&quot;tl-quotes-outer-wrap tl-quotes-style-3&quot;&gt; &lt;div class=&quot;tl-quotes-box-wrap&quot;&gt; &lt;div class=&quot;tl-quotes-symbol tl-quotes-symbol-left&quot;&gt; &lt;i class=&quot;fas fa-quote-left&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class=&quot;tl-quotes-content&quot;&gt; &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;tl-quotes-author&quot;&gt; -Lorem Ipsum &lt;/div&gt; &lt;div class=&quot;tl-quotes-symbol tl-quotes-symbol-right&quot;&gt; &lt;i class=&quot;fas fa-quote-right&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

Quotes 4

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • No Color

Click one of the buttons below to select which attribute to change, then click on one of the colors above to change that attribute's color or select `No Color` to unset.

When you are finished, copy the code above and paste into WordPress for your site.


Quotes Example:
It's your inspiration for your motivation
HTML Output
                        <div class="tl-quotes-4">
    <div class="tl-quotes-outer-wrap tl-quotes-style-4">
        <div class="tl-quotes-box-wrap">
            <div class="tl-quotes-symbol tl-quotes-symbol-left">
            <i class="fas fa-angle-double-left"></i>
            </div>
            <div class="tl-quotes-content">It's your <b>inspiration</b> for your <b>motivation</b></div>
            <div class="tl-quotes-symbol tl-quotes-symbol-right">
            <i class="fas fa-angle-double-right"></i>
            </div>
        </div>
    </div>
</div>
&lt;div class=&quot;tl-quotes-4&quot;&gt; &lt;div class=&quot;tl-quotes-outer-wrap tl-quotes-style-4&quot;&gt; &lt;div class=&quot;tl-quotes-box-wrap&quot;&gt; &lt;div class=&quot;tl-quotes-symbol tl-quotes-symbol-left&quot;&gt; &lt;i class=&quot;fas fa-angle-double-left&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class=&quot;tl-quotes-content&quot;&gt;It's your &lt;b&gt;inspiration&lt;/b&gt; for your &lt;b&gt;motivation&lt;/b&gt;&lt;/div&gt; &lt;div class=&quot;tl-quotes-symbol tl-quotes-symbol-right&quot;&gt; &lt;i class=&quot;fas fa-angle-double-right&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;

Quotes 5

  • bsd-pink
  • bsd-lpink
  • bsd-purple
  • bsd-lpurple
  • bsd-red
  • msw-dblue
  • msw-lblue
  • at-red
  • at-blue
  • link-blue
  • text
  • gray-1
  • gray-2
  • gray-3
  • gray-4
  • gray-5
  • white
  • black
  • No Color

Click one of the buttons below to select which attribute to change, then click on one of the colors above to change that attribute's color or select `No Color` to unset.

When you are finished, copy the code above and paste into WordPress for your site.


Quotes Example:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

-Lorem Ipsum
HTML Output
                        <div class="tl-quotes-5">
    <div class="tl-quotes-outer-wrap  tl-quotes-style-5">
        <div class="tl-quotes-box-wrap">
            <div class="tl-quotes-symbol tl-quotes-symbol-left">
            <i class="fas fa-quote-left"></i>
            </div>
            <div class="tl-quotes-content">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
            </div>
            <div class="tl-quotes-carret">
            <i class="fas fa-caret-down tl-fa-icons"></i>
            </div>
            <div class="tl-quotes-sperator"></div>
            <div class="tl-quotes-author">
            -Lorem Ipsum
            </div>
            <div class="tl-quotes-symbol tl-quotes-symbol-right">
            <i class="fas fa-quote-right"></i>
            </div>
        </div>
    </div>
</div>
&lt;div class=&quot;tl-quotes-5&quot;&gt; &lt;div class=&quot;tl-quotes-outer-wrap tl-quotes-style-5&quot;&gt; &lt;div class=&quot;tl-quotes-box-wrap&quot;&gt; &lt;div class=&quot;tl-quotes-symbol tl-quotes-symbol-left&quot;&gt; &lt;i class=&quot;fas fa-quote-left&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class=&quot;tl-quotes-content&quot;&gt; &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.&lt;/p&gt; &lt;/div&gt; &lt;div class=&quot;tl-quotes-carret&quot;&gt; &lt;i class=&quot;fas fa-caret-down tl-fa-icons&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;div class=&quot;tl-quotes-sperator&quot;&gt;&lt;/div&gt; &lt;div class=&quot;tl-quotes-author&quot;&gt; -Lorem Ipsum &lt;/div&gt; &lt;div class=&quot;tl-quotes-symbol tl-quotes-symbol-right&quot;&gt; &lt;i class=&quot;fas fa-quote-right&quot;&gt;&lt;/i&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;