https://idea-hack.com/en/blog/16017/
【Gutenberg Compatible】 Best  30 blockquote styles template.

【Gutenberg Compatible】 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