Colored Titlebox - Greenshift

Blog Staff

May 2, 2022

This block is similar to infobox, but it has a bit different design, which allows to make more highlighted parts of your posts

I am Colored Titlebox

I am content for container of titlebox, you can add also other blocks inside.

Header label	Header label	Header label
I am table block	I am table block	I am table block
I am table block	I am table block	I am table block
I am table block	I am table block	I am table block

Specification table

Of course, you can change shadows, borders, colors, etc

Another example of box

I am content of container for Colored Titlebox

Another example of box

I am content of container for Colored Titlebox

Copy this post’s content

Copy code below, and paste it (CTRL+V) in content of page

<p>This block is similar to infobox, but it has a bit different design, which allows to make more highlighted parts of your posts</p>

<div id="gspb_titleBox-id-gsbp-3e4df342-f5d8" class="gspb_titleBox gspb_titleBox-id-gsbp-3e4df342-f5d8 wp-block-greenshift-blocks-titlebox"><div class="gs-titlebox"><div class="gs-title-inbox"><div class="gs-titlebox-icon"><svg x="0px" y="0px" viewbox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-title-inbox-label">I am Colored Titlebox</div></div><div class="gs-titlebox-text">
<p>I am content for container of titlebox, you can add also other blocks inside.</p>

<div style="height:22px" aria-hidden="true" class="wp-block-spacer"></div>

<figure class="wp-block-table is-style-stripes"><table class="has-accentbg-border-color has-border-color" style="border-style:solid;border-width:2px"><thead><tr><th>Header label</th><th>Header label</th><th>Header label</th></tr></thead><tbody><tr><td>I am table block</td><td>I am table block</td><td>I am table block</td></tr><tr><td>I am table block</td><td>I am table block</td><td>I am table block</td></tr><tr><td>I am table block</td><td>I am table block</td><td>I am table block</td></tr></tbody></table><figcaption>Specification table</figcaption></figure>
</div></div></div>

<p>Of course, you can change shadows, borders, colors, etc</p>

<div id="gspb_titleBox-id-gsbp-9352fa27-6143" class="gspb_titleBox gspb_titleBox-id-gsbp-9352fa27-6143 wp-block-greenshift-blocks-titlebox"><div class="gs-titlebox"><div class="gs-title-inbox"><div class="gs-titlebox-icon"></div><div class="gs-title-inbox-label">Another example of box</div></div><div class="gs-titlebox-text">
<p>I am content of container for Colored Titlebox</p>
</div></div></div>

<div id="gspb_titleBox-id-gsbp-acb63eb8-5198" class="gspb_titleBox gspb_titleBox-id-gsbp-acb63eb8-5198 wp-block-greenshift-blocks-titlebox"><div class="gs-titlebox"><div class="gs-title-inbox"><div class="gs-titlebox-icon"><svg viewbox="0 0 612 612"> <g> <g> <g> <path d="M403.939,295.749l-78.814,78.833V172.125c0-10.557-8.568-19.125-19.125-19.125c-10.557,0-19.125,8.568-19.125,19.125 v202.457l-78.814-78.814c-7.478-7.478-19.584-7.478-27.043,0c-7.478,7.478-7.478,19.584,0,27.042l108.19,108.19 c4.59,4.59,10.863,6.005,16.812,4.953c5.929,1.052,12.221-0.382,16.811-4.953l108.19-108.19c7.478-7.478,7.478-19.583,0-27.042 C423.523,288.29,411.417,288.29,403.939,295.749z M306,0C137.012,0,0,136.992,0,306s137.012,306,306,306s306-137.012,306-306 S475.008,0,306,0z M306,573.75C158.125,573.75,38.25,453.875,38.25,306C38.25,158.125,158.125,38.25,306,38.25 c147.875,0,267.75,119.875,267.75,267.75C573.75,453.875,453.875,573.75,306,573.75z"></path> </g> </g> </g> </svg></div><div class="gs-title-inbox-label">Another example of box</div></div><div class="gs-titlebox-text">
<p>I am content of container for Colored Titlebox</p>
</div></div></div>

containers, info, text