https://idea-hack.com/code/en/blog/107243/

Best 30 blockquote styles template.

Beautiful Design lets user feel good, and stay on your site for a long time. And also, you will be easy to get repeat users. In this Article. I will provide design templates of quote style.

Before Starting

About third party library

I will use following libraries. If you use my design recipes, please load these libraries before using.

  • Font Awesome5 (https://fontawesome.com)

Supported browser

Following browsers support sample code. These are same as Bootstrap4 and above.

Mobile Devices

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Supported Supported N/A Android v5.0+ supported Supported
iOS Supported Supported Supported N/A Supported
Windows 10 Mobile N/A N/A N/A N/A Supported

Desktop Devices

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Supported Supported N/A Android v5.0+ supported Supported
iOS Supported Supported Supported N/A Supported
Windows 10 Mobile N/A N/A N/A N/A Supported

Table source: Bootsteap4

Pattern1

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap1”>
<blockquote>
<p>テキスト</p>
<cite>テキスト</cite>
</blockquote>
</div>
css
div.quote_wrap1 {
  margin-bottom: 20px;
}
div.quote_wrap1 blockquote {
  position: relative;
  padding: 30px 15px 8px 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  background: #efefef;
  color: #555;
}
div.quote_wrap1 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 13px;
  left: 15px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #cfcfcf;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap1 blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
div.quote_wrap1 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9rem;
}

Pattern2

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap2">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap2 {
  margin-bottom: 20px;
}
div.quote_wrap2 blockquote {
  position: relative;
  padding: 10px 15px 10px 60px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  background: #efefef;
  color: #555;
}
div.quote_wrap2 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 18px;
  left: 15px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #cfcfcf;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap2 blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
div.quote_wrap2 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern3

[sociallocker id=”23776″]

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap3">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap3 {
  margin-bottom: 20px;
}
div.quote_wrap3 blockquote {
  position: relative;
  padding: 35px 15px 10px 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  background: #f5f5f5;
  color: #777777;
  border-left: 4px solid #9dd4ff;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
div.quote_wrap3 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 15px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #9dd4ff;
  font-size: 28px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap3 blockquote p {
  padding: 0;
  margin: 7px 0;
  line-height: 1.7;
}
div.quote_wrap3 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern4

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap4">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap4 {
  margin-bottom: 20px;
}
div.quote_wrap4 blockquote {
  position: relative;
  padding: 10px 15px 10px 60px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  background: #f5f5f5;
  color: #777777;
  border-left: 4px solid #9dd4ff;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
div.quote_wrap4 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 15px;
  left: 15px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #9dd4ff;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap4 blockquote p {
  padding: 0;
  margin: 7px 0;
  line-height: 1.7;
}
div.quote_wrap4 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern5

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap5">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap5 {
  margin-bottom: 20px;
}
div.quote_wrap5 blockquote {
  position: relative;
  padding: 10px 15px 10px 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  border: solid 2px #464646;
  color: #464646;
}
div.quote_wrap5 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 20px;
  left: 15px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #77c0c9;
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap5 blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
div.quote_wrap5 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern6

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap6">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap6 {
  margin-bottom: 20px;
}
div.quote_wrap6 blockquote {
  position: relative;
  padding: 10px 15px 10px 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  background: #c2e8ed;
  font-weight: bold;
}
div.quote_wrap6 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 17px;
  left: 11px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #77c0c9;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap6 blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
div.quote_wrap6 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern7

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap7">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap7 {
  margin-bottom: 20px;
}
div.quote_wrap7 blockquote {
  position: relative;
  padding: 10px 15px 10px 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  font-weight: bold;
  color: #464646;
  background: #c2e8ed;
  border: solid 3px #77c0c9;
}
div.quote_wrap7 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 17px;
  left: 11px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #77c0c9;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap7 blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
div.quote_wrap7 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern8

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap8">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap8 {
  margin-bottom: 20px;
}
div.quote_wrap8 blockquote {
  position: relative;
  padding: 8px 15px;
  margin: 2.5em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  background: #ddeaff;
  font-weight: bold;
}
div.quote_wrap8 blockquote:before {
  display: inline-block;
  position: absolute;
  top: -30px;
  left: 11px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #ddeaff;
  font-size: 35px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap8 blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
div.quote_wrap8 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern9

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap9">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap9 {
  margin-bottom: 20px;
}
div.quote_wrap9 blockquote {
  position: relative;
  padding: 40px 10px 10px 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  background: #ddeaff;
}
div.quote_wrap9 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 13px;
  left: 17px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 35px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap9 blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
div.quote_wrap9 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern10

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap10">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap10 {
  margin-bottom: 20px;
}
div.quote_wrap10 blockquote {
  position: relative;
  padding: 10px 10px 10px 32px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  background: #e0e0e0;
}
div.quote_wrap10 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #e0e0e0;
  font-size: 22px;
  line-height: 1;
  z-index: 2;
  font-weight: 900;
}
div.quote_wrap10 blockquote:after {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  border-width: 0 0 40px 40px;
  border-style: solid;
  border-color: transparent #ffffff;
}
div.quote_wrap10 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap10 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern11

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap11">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap11 {
  margin-top: 30px;
  margin-bottom: 30px;
}
div.quote_wrap11 blockquote {
  position: relative;
  padding: 7px 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  border: solid 3px #72ccf4;
}
div.quote_wrap11 blockquote:before {
  display: inline-block;
  position: absolute;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  background: #72ccf4;
  color: #FFF;
  font-size: 22px;
  font-weight: 900;
}
div.quote_wrap11 blockquote:after {
  display: inline-block;
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  text-align: center;
  content: "f10e";
  font-family: "Font Awesome 5 Free";
  background: #72ccf4;
  color: #FFF;
  font-size: 22px;
  font-weight: 900;
}
div.quote_wrap11 blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
div.quote_wrap11 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern12

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap12">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap12 {
  margin-top: 30px;
  margin-bottom: 30px;
}
div.quote_wrap12 blockquote {
  position: relative;
  padding: 7px 16px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #585858;
  border: solid 3px #585858;
}
div.quote_wrap12 blockquote:before {
  display: inline-block;
  position: absolute;
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  background: #585858;
  color: #FFF;
  font-size: 22px;
  font-weight: 900;
}
div.quote_wrap12 blockquote:after {
  display: inline-block;
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  text-align: center;
  content: "f10e";
  font-family: "Font Awesome 5 Free";
  background: #585858;
  color: #FFF;
  font-size: 22px;
  font-weight: 900;
}
div.quote_wrap12 blockquote p {
  padding: 0;
  margin: 10px 0;
  line-height: 1.7;
}
div.quote_wrap12 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern13

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap13">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap13 {
  margin-bottom: 20px;
}
div.quote_wrap13 blockquote {
  position: relative;
  padding: 10px 12px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  border: solid 3px #3ca5d4;
  border-left-width: 50px;
}
div.quote_wrap13 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: -37px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap13 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap13 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern14

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap14">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap14 {
  margin-bottom: 20px;
}
div.quote_wrap14 blockquote {
  position: relative;
  padding: 10px 12px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  border-left: solid 50px #3ca5d4;
  background: #e0f5ff;
}
div.quote_wrap14 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: -37px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap14 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap14 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern15

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap15">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap15 {
  margin-bottom: 20px;
}
div.quote_wrap15 blockquote {
  position: relative;
  padding: 10px 12px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  border-left: solid 40px #c4c4c4;
  background: #f3f3f3;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.19);
}
div.quote_wrap15 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: -32px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap15 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap15 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern16

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap16">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap16 {
  margin-bottom: 20px;
}
div.quote_wrap16 blockquote {
  position: relative;
  padding: 10px 25px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  border: solid 3px #72ccf4;
}
div.quote_wrap16 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 35px;
  height: 35px;
  border-radius: 0 0 30px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  background: #72ccf4;
  color: #FFF;
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap16 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap16 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern17

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap17">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap17 {
  margin-bottom: 20px;
}
div.quote_wrap17 blockquote {
  position: relative;
  padding: 5px 12px 5px 56px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  background: #fff4db;
}
div.quote_wrap17 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 10px;
  width: 36px;
  height: 36px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 20px;
  line-height: 36px;
  background: #ffd596;
  border-radius: 50%;
  font-weight: 900;
}
div.quote_wrap17 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap17 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern18

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap18">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap18 {
  margin-bottom: 20px;
}
div.quote_wrap18 blockquote {
  position: relative;
  padding: 5px 12px 5px 56px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  background: #fff0f0;
}
div.quote_wrap18 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 10px;
  width: 36px;
  height: 36px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 20px;
  line-height: 36px;
  background: #ff9d9d;
  border-radius: 50%;
  font-weight: 900;
}
div.quote_wrap18 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap18 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern19

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap19">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap19 {
  margin-bottom: 20px;
}
div.quote_wrap19 blockquote {
  position: relative;
  padding: 5px 12px 5px 56px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  background: #f0f7ff;
}
div.quote_wrap19 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 10px;
  width: 36px;
  height: 36px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 20px;
  line-height: 36px;
  background: #a5d7ff;
  border-radius: 50%;
  font-weight: 900;
}
div.quote_wrap19 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap19 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern20

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap20">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap20 {
  margin-bottom: 20px;
}
div.quote_wrap20 blockquote {
  position: relative;
  padding: 0px 10px 5px 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  background: #fff4db;
  border-top: solid 3px #ffd596;
}
div.quote_wrap20 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  background: #ffd596;
  font-weight: 900;
}
div.quote_wrap20 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap20 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern21

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap21">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap21 {
  margin-bottom: 20px;
}
div.quote_wrap21 blockquote {
  position: relative;
  padding: 0px 10px 5px 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  background: #fff0f0;
  border-top: solid 3px #ff9d9d;
}
div.quote_wrap21 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  background: #ff9d9d;
  font-weight: 900;
}
div.quote_wrap21 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap21 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern22

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap22">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap22 {
  margin-bottom: 20px;
}
div.quote_wrap22 blockquote {
  position: relative;
  padding: 0px 10px 5px 40px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  background: #f0f7ff;
  border-top: solid 3px #a5d7ff;
}
div.quote_wrap22 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  background: #a5d7ff;
  font-weight: 900;
}
div.quote_wrap22 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap22 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern23

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap23">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap23 {
  margin-bottom: 20px;
}
div.quote_wrap23 blockquote {
  position: relative;
  padding: 5px 15px 5px 55px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  background: #f5f5f5;
}
div.quote_wrap23 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 8px;
  width: 38px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  background: #ff785b;
  font-weight: 900;
}
div.quote_wrap23 blockquote:after {
  content: '';
  position: absolute;
  left: 8px;
  top: 30px;
  height: 0;
  width: 0;
  border-left: 19px solid #ff785b;
  border-right: 19px solid #ff785b;
  border-bottom: 10px solid transparent;
}
div.quote_wrap23 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap23 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern24

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap24">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap24 {
  margin-bottom: 20px;
}
div.quote_wrap24 blockquote {
  position: relative;
  padding: 5px 15px 5px 55px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #464646;
  background: #e8efff;
}
div.quote_wrap24 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 8px;
  width: 38px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  background: #87a4e3;
  font-weight: 900;
}
div.quote_wrap24 blockquote:after {
  content: '';
  position: absolute;
  left: 8px;
  top: 30px;
  height: 0;
  width: 0;
  border-left: 19px solid #87a4e3;
  border-right: 19px solid #87a4e3;
  border-bottom: 10px solid transparent;
}
div.quote_wrap24 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap24 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern25

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap25">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap25 {
  margin-bottom: 20px;
}
div.quote_wrap25 blockquote {
  position: relative;
  padding: 5px 10px 5px 32px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  background: #ffebcd;
  border-bottom: solid 3px #ffbe5d;
}
div.quote_wrap25 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: -15px;
  width: 40px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  background: #ffbe5d;
  font-weight: 900;
}
div.quote_wrap25 blockquote:after {
  position: absolute;
  content: '';
  top: 40px;
  left: -15px;
  border: none;
  border-bottom: solid 8px transparent;
  border-right: solid 15px #daaa64;
}
div.quote_wrap25 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap25 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern26

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap26">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap26 {
  margin-bottom: 20px;
}
div.quote_wrap26 blockquote {
  position: relative;
  padding: 5px 10px 5px 32px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  background: #f3f3f3;
  -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.15);
}
div.quote_wrap26 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: -15px;
  width: 40px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  background: #92d4ff;
  -webkit-box-shadow: 0 2px 2px rgba(26, 26, 26, 0.14);
  box-shadow: 0 2px 2px rgba(26, 26, 26, 0.14);
  font-weight: 900;
}
div.quote_wrap26 blockquote:after {
  position: absolute;
  content: '';
  top: 40px;
  left: -15px;
  border: none;
  border-bottom: solid 8px transparent;
  border-right: solid 15px #6eb3e0;
}
div.quote_wrap26 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap26 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern27

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap27">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap27 {
  margin-bottom: 20px;
  margin-top: 20px;
}
div.quote_wrap27 blockquote {
  position: relative;
  padding: 15px 10px 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  background: #f3f3f3;
}
div.quote_wrap27 blockquote:before {
  display: inline-block;
  position: absolute;
  top: -8px;
  left: 9px;
  width: 40px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  background: #6fcdd9;
  font-weight: 900;
}
div.quote_wrap27 blockquote:after {
  position: absolute;
  content: '';
  top: -8px;
  left: 49px;
  border: none;
  border-bottom: solid 8px #6cacb5;
  border-right: solid 9px transparent;
}
div.quote_wrap27 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap27 blockquote cite {
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern28

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap28">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap28 {
  margin-bottom: 20px;
}
div.quote_wrap28 blockquote {
  position: relative;
  padding: 10px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #4e4e4e;
  background: #fff3e1;
}
div.quote_wrap28 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 10px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #ffe2b8;
  font-size: 58px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap28 blockquote:after {
  display: inline-block;
  position: absolute;
  bottom: 5px;
  right: 15px;
  vertical-align: middle;
  text-align: center;
  content: "f10e";
  font-family: "Font Awesome 5 Free";
  color: #ffe2b8;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap28 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap28 blockquote cite {
  position: relative;
  z-index: 3;
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern29

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap29">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap29 {
  margin-bottom: 20px;
}
div.quote_wrap29 blockquote {
  position: relative;
  padding: 10px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #4e4e4e;
  background: #fff0f0;
}
div.quote_wrap29 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 10px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #ffdfdf;
  font-size: 58px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap29 blockquote:after {
  display: inline-block;
  position: absolute;
  bottom: 5px;
  right: 15px;
  vertical-align: middle;
  text-align: center;
  content: "f10e";
  font-family: "Font Awesome 5 Free";
  color: #ffdfdf;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap29 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap29 blockquote cite {
  position: relative;
  z-index: 3;
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

Pattern30

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.

Author Name
html
<div class="quote_wrap30">
<blockquote>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
<cite>Author Name</cite>
</blockquote>
</div>
css
div.quote_wrap30 {
  margin-bottom: 20px;
}
div.quote_wrap30 blockquote {
  position: relative;
  padding: 10px 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-style: italic;
  color: #4e4e4e;
  background: #f2f9ff;
}
div.quote_wrap30 blockquote:before {
  display: inline-block;
  position: absolute;
  top: 7px;
  left: 10px;
  vertical-align: middle;
  content: "f10d";
  font-family: "Font Awesome 5 Free";
  color: #d2e6ff;
  font-size: 58px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap30 blockquote:after {
  display: inline-block;
  position: absolute;
  bottom: 5px;
  right: 15px;
  vertical-align: middle;
  text-align: center;
  content: "f10e";
  font-family: "Font Awesome 5 Free";
  color: #d2e6ff;
  font-size: 40px;
  line-height: 1;
  font-weight: 900;
}
div.quote_wrap30 blockquote p {
  position: relative;
  padding: 0;
  margin: 10px 0;
  z-index: 3;
  line-height: 1.7;
}
div.quote_wrap30 blockquote cite {
  position: relative;
  z-index: 3;
  display: block;
  text-align: right;
  color: #888888;
  font-size: 0.9em;
}

[/sociallocker]