Hoping for some quick CSS help

Hi there,

I would approach it using the GenerateBlocks Plugin.

1. Add a Container Block and give it the class of nutshell - you won't need any CSS as you can add the box padding and border in the GB Settings for the container.

2. Inside the Container add 2 x Headline blocks, the first for the title, the second for the text. ( Note you can change the Element Tag to something other then H2 eg. a paragraph or a div )

2.1 Select the first headline for the title, and:

a) select all the text and from toolbar menu select Highlight.
b) in the Spacing use Negative Top Margin to pull the text over the container border. Add the same value of positive bottom margin to keep the space below it.

3. Add this CSS to your site:

.nutshell mark {
    padding: 10px;
    background-color: #fff;
}

To cover when the text was Highlighted it wraps it in a <mark> tag which is what we're styling in the CSS to make that cutout affect. Just make sure the background color matches the page background.

Thanks David. If I want to be able to re-use this for multiple posts, what's the best way to go about that? Select the container and make it a reusable block?

Will the content be the same on each post ? Or will it change ?

It will change with each post. It will be a “quick glance” blurb for the given post, so different every time.

You could use a reusable block - personally I don't like using them for that purpose and use GB Pro Local Templates.
But it would work. The alternative is to save them on a draft post, and just Duplicate it every time you need one and cut and paste it into your new post.