Basic Boxes

Code Snippet Library

On this page, we'll provide examples of and code for some of the basic box styles so that you can quickly and easily implement boxes in your course. Remember to use boxes thoughtfully and in a consistent way. Brighter-colored boxes, such as the Yellow Alert Box, are attention-grabbing and indicate a piece of content as urgent. As such, those should be used sparingly.

Basic Box

Content here.

Basic Box Code

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

Gray Box

Content here.

Gray Box Code

<div style="margin: 1rem 2rem; padding: 0.8rem 1rem; border: 2px solid #A2AAAD; border-radius: 0.3rem; background: #F2F2F4; font-size: 1rem; overflow: auto;">
    <p>Content here.</p>
</div>

Blue Box

Content here.

Blue Box Code

<div style="margin: 1rem 2rem; padding: 0.8rem 1rem; border: 2px solid #000000; border-radius: 0.3rem; background: #1e407c; color: #fff; font-size: 1rem; overflow: auto;">
    <p>Content here.</p>
</div>

Yellow Alert Box

For small bits of content that demand extra attention.

Content here.

Yellow Alert Box Code

<div style="margin: 1rem 2rem; padding: 0.8rem 1rem; border: 6px solid #FCE9AA; border-radius: 0.3rem; background: #FDF4D4; font-size: 1rem; overflow: auto;">
    <p>Content here.</p>
</div>

Box With Curved Corners

Curving the borders more is done by increasing the border-radius. Here it is 1.25 rem. For square corners, reduce it to 0.

Content here.

Box With Curved Corners Code

<div style="margin: 1rem 2rem; padding: 0.8rem 1rem; border: 3px solid #1E407C; border-radius: 1.25rem; background: #ffffff; font-size: 1rem; overflow: auto;">
    <p>Content here.</p>
</div>

Two-Sided Box With Curved Corners

Content

Two-Sided Box With Curved Corners Code

<div style="margin: 1rem 2rem; padding: 0.8rem 1rem; border-top: 3px solid #1E407C; border-bottom: 3px solid #1E407C; border-radius: 1.25rem; background: #ffffff; font-size: 1rem; overflow: auto;">
    <p>Content here.</p>
</div>

Modifications

These basic box styles can be easily modified to change the border color and thickness, curve, background color, and font color and size.

To change the border thickness, change the border attribute (for example, border: 3px) to a different number.
To make the box full width, change the margin from 2em to 0 (style="margin: 1em 0;).
To make the box square, change the border-radius to 0.
To make the font larger, increase 1 to 1.5 or whatever meets your needs. (The font is sized using rems. See the Using Absolute and Relative Values to Size Elements page for rationale.)

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 RCE to verify. See the Box Tutorial pages for more information on customizing these styles.