Styling Box Content

Code Tutorial

This is the basic box code we recommend:

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

This is the box that code will create:

Basic Box

 

Font Size

If you want the font to be a bit larger than the regular body text, you can change the number of rems. Following is an example of the font at 2rems. Using rems makes the font responsive at different page widths and levels of magnification.

Font sized to 2rems

<div style="margin:1rem 1rem; padding: 0.8rem 1rem; border: 2px solid #1E407C; border-radius: 0rem; background: #ffffff; font-size: 2rem; overflow: auto;">

Stop: Never use heading styles just to make the font larger. Conversely, don't just use a larger font alone to create a heading. 

 

Overflow

You can add other page elements to a box, such as an image or a video. Our recommended code includes overflow: auto; so that whatever you put inside the box will display correctly. Without it, the image or video may extend beyond the borders of the box. The following example includes a heading, body text, and image that is aligned right. For more information about image placement and styling, see the Images module.

Heading Text

Image Caption

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. 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. 

This is the code:

<div style="margin: 1rem 2rem; padding: 0.8rem 1rem; border: 2px solid #1E407C; border-radius: 0rem; background: #ffffff; font-size: 1rem; overflow: auto;">
    <h3>Heading Text</h3>
    <figure style="float: right; width: 30%;">
        <img src="ImageFile" alt="description of image"/>
        <figcaption>Image Caption</figcaption>
    </figure>
    <p>Content that will be to the left of the image.</p>
</div>