Boxes With Headings

Code Snippet Library

Box With Plain Heading

Heading

Content here.

Box With Plain Heading Code


<div style="margin: 1rem 0rem; padding: 0.8rem 1rem; border: 2px solid #000000; border-radius: 0.3rem; background: #ffffff; overflow: auto;">
    <h3>Heading</h3>
    <p>Content here. </p>
</div>

Box With Color Heading

Heading

Content here.

Box With Color Heading Code

<div style="border: 1px solid #314D64; border-radius: 0.3rem; padding: 0rem; overflow: auto;">
    <h3 style="background-color: #314d64; padding: 0.5rem 1rem 0.5rem 1rem; margin: 0px;"><span style="color: #ffffff;">Heading</span></h3>
    <div style="padding: 0.8rem 1rem 0.8rem 1rem; overflow: auto;">
        <p>Content here.</p>
    </div>
</div>

Box With Heading and Border

Heading

Content here.

Box With Heading and Border

<div style="margin: 0rem 0rem; padding: 0rem 1rem 0.5rem 1rem; border: 1px solid #C7CDD1; border-radius: 0.3rem; background-color: #f5f5f5; font-size: 1rem; overflow: auto;">
    <h3 style="color: #314d64; line-height: 2; padding: 0.3rem 0.1rem 0 0.1rem; font-size: 1.2rem; border-bottom: 2px solid #9AC1E2;">Heading</h3>
    <p>Content here.</p>
</div>

Box With Heading, Border, and Image

Heading

Content here.

Box With Heading, Border, and Image

<div style="width: 90%; background-color: #f5f5f5; margin: 1rem; padding: 1rem 1.5rem; border: solid black 0px; border-radius: 0.3rem; display: table;">
    <figure style="float: right; margin: 1rem 1rem 0.3rem 2rem; padding: 0.6rem; border: 2px solid #C7CDD1; height: auto; max-width: 50%; width: 275px;"><img  style="width: 100%; height: auto;" src="imageline" alt="image description"  /></figure>
    <h2 style="color: #2d3b45; line-height: 2; padding: 0.3rem 0.2rem 0 0.2rem; border-bottom: 2px solid #2d3b45; display: flex;">Heading</h2>
    <p>Content here.</p>
</div>

Quick Tip: Add the image first

Add the image to the page first. Then, in HTML view, copy and paste the code below it, and replace the image code in the style with your image code; otherwise, you will lose the figure styling. As always, the colors can be modified.

Call-Out Box: Important

For limited use.

Important!

Something you really want people to know.

Call-Out Box Important Code

<div style="margin: 3.125rem 15% 3.125rem 15%; background-color: #fbeeb8; border-radius: 0.3rem;">
    <div style="position: relative; top: -1.25rem; left: -1.25rem; padding: 1.25rem; background: #ffffff; border: 0.125rem solid #FFD100; border-radius: 0.3rem;">
        <h3>Heading Text</h3>
        <p>Content.</p>
    </div>
</div>

Note: This style uses a combination of rems and percentages so that it resizes correctly.

Guidelines and Modifications

For all the styles above you can change

the border colors
border thinkness
border curve
font colors
background colors
and heading levels.

See the Box Tutorial section for more information on modifying these styles.

Best Practice: Use Proper Heading Structure

For all these styles, be sure to use the correct heading level for your page context. For example, if the box appears in a section with an h2 heading, then the heading inside the box should be an h3 heading.