Add Simple Colored Content Boxes in your site

This tutorial provides the steps to create some colored content boxes to use in our site. You can use it on any WordPress theme or HTML template as we are going to use the simple HTML and CSS method.

Installation:

Add the following CSS in style.css of your child theme.

/* Content Boxes
------------------------------------------------------------ */
 
.content-box-blue,
.content-box-gray,
.content-box-green,
.content-box-purple,
.content-box-red,
.content-box-yellow {
    margin: 0 0 25px;
    overflow: hidden;
    padding: 20px;
}
 
.content-box-blue {
    background-color: #d8ecf7;
    border: 1px solid #afcde3;
}
 
.content-box-gray {
    background-color: #e2e2e2;
    border: 1px solid #bdbdbd;
}
 
.content-box-green {
    background-color: #d9edc2;
    border: 1px solid #b2ce96;
}
 
.content-box-purple {
    background-color: #e2e2f9;
    border: 1px solid #bebde9;
}
 
.content-box-red {
    background-color: #f9dbdb;
    border: 1px solid #e9b3b3;
}
 
.content-box-yellow {
    background-color: #fef5c4;
    border: 1px solid #fadf98;
}

Usage:

<div class="content-box-COLOR">TEXT CONTENT GO HERE</div>

We can use the following color class based CSS mentioned above.
blue gray green purple red yellow

Example:

<div class="content-box-blue">This is an example of a Content Box, which is easy to implement and can be used to put emphasis on a particular thought or sentiment.</div>

Here change the class content-box-blue to yours.

Shortcode:

Most of the times, we don’t want to switch the editor mode to HTML so we can simply create a shortcode and will use it.

Add the following in functions.php of your child theme.

// Add content box Shortcode
add_shortcode( 'content-box', 'content_box_shortcode' );

function content_box_shortcode( $atts = [], $content = null ) {

	// Attributes
	$atts = shortcode_atts(
		array(
			'color' => 'blue',
		),
		$atts
	);
	//return
	return '<div class="content-box-' . $atts['color'] . '">' . $content . '</div>';
}

Usage:

[content-box color="COLOR"]Text Content[/content-box]

default is blue.

Example:

[content-box]Sample Text[/content-box]
[content-box color="red"]Sample Text in Red Box[/content-box]

Source:

https://studiopress.blog/custom-message-boxes/
https://www.studiopress.com/colored-content-boxes-buttons/