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

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

Simple Box

Pattern1

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 1500.

html
<div class="box-pattern1">
    <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 1500.</p>
</div>
css
.box-pattern1 {
    padding: 5px 10px;
    margin: 2em 0;
    font-weight: bold;
    border: solid 3px #000000;
}
.box-pattern1 p {
    margin: 0; 
    padding: 0;
}

Pattern2

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 1500.

html
<div class="box-pattern2">
    <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 1500.</p>
</div>
css
.box-pattern2 {
 padding: 5px 10px;
 font-weight: bold;
 color: #6091d3;
 background: #FFF;
 border: solid 3px #6091d3;
 border-radius: 10px;
}
.box-pattern2 p {
    margin: 0; 
    padding: 0;
}

Pattern3