Boxes With Bars

Code Snippet Library

Go Top and Bottom Bars

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Top and Bottom Bars Code 
<div style="margin: 2rem 3rem; padding: 0.8rem 1rem; border-top: 3px solid #1E407C; border-bottom: 3px solid #1E407C;  font-size: 1rem;
background-color: #eaf0fa; overflow:auto;">
<p>Content here.</p>
<p>You can have multiple lines or paragraphs.</p>
</div>

 

 

Left and Right Bars Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Left and Right Bars Box Code 
<div style="margin: 0 0 2.5rem 2rem; padding: 1rem 1.5rem; background: #eaf0fa; border-left: 0.5rem solid #1E407C; border-right: 0.5rem solid #1E407C; font-size: 1rem; overflow: auto;">
<p>Content here.</p></div>

 

Go Left Color Bar

This style is often used for quoted material.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 

Left Color Bar Code 
<div style="margin: 0 0 2.5rem 2em; padding: 0.8rem; border-left: 10px solid#1E407C; background: #ffffff; font-size: 1rem; overflow: auto;">
<p>Content here.</p></div>

 

 

Caution Left Color Bar With Italics

This style is for short quotes or bits of text. 

"Lorem ipsum dolor sit amet"

-Author

Left Color Bar With Italics Code 
<div style="margin: 0 0 2.5rem 2em; padding: 0.8rem 1rem; border-left: 10px solid#1E407C; background: #ffffff; overflow: auto;">
<p><span style="font-size: 1.2rem;">
<em>"Content here."</em></span></p>
<p><span style="font-size: 0.8rem;"><em>-Author's name here.</em></span></p>
</div>

 

 

Modifications

For all of these styles, the border and background colors can be changed by adjusting the color hex code as indicated by the bolded red text in the code provided for each style. To learn more about customizing boxes, see the tutorial section.

Best Practice: Use Good Contrast

If you change the colors, make sure the background color contrasts well with the font color. Use the accessibility checker  in the Rich Content Editor to verify.