Content box

Hi Devesh,

Can you specify which part are you referring to?

CSS is only for the style, CSS doesn't have functions, so if you are talking about to add related articles function, CSS will not work.

Let me know :)

I was referring to the "Related Articles" box appearing in the page.
Also, I am only looking to achieve the same style box to include any text and not the function of related articles.

Hi there,

do you mean this:

https://www.screencast.com/t/IPRICechNAU

If so use a GenerateBlocks Container Block, you can add a left border and a border color.
Inside you can add 2 x Headline Blocks and style that text as you need.

then copy and paste the Container Block wherever you need it.

Thanks David, this did the trick. One follow up question from perspective of speed- is it better to use plugin like GenerateBlocks or CSS to achieve this. In case one wants to use CSS, is it possible.Thanks.

It can be done with CSS but you will require the HTML too. For example - you could write the HTML in a HTML block, or construct it with the core Group blocks, and heading blocks to which you need to add the CSS classes and then write the CSS.

Whereas GenerateBlocks generates just the HTML and just the CSS you need for it to be displayed.

Let us know if you want to pursue the other way :)

Yes, it would be helpful to know the alternate way as well just in case. Thanks.

Add a Group Block, with it selected go to sidebar Advanced > Additional CSS Class(es) and in there add a Custom CSS Class of your choosing, for this example i will use db-related-link

Now inside the Group Block, add 2 x Text blocks, one for the 'title' and one for the text.

Now you can use some CSS:

/* add group styles */
.db-related-link .wp-block-group__inner-container {
	padding: 10px 20px;
}
.db-related-link {
	border-left: 12px solid #dba433;
}
/* Style first paragraph title text */
.db-related-link p:first-child {
	text-transform: uppercase;
	font-weight: bold;
	color: #dba433;
	margin-bottom: 0.5em;
}
/* style linked text */
.db-related-link a {
	color: #000;
	font-size: 20px;
}

Really helpful. Thanks David.

You're welcome