all corners rounded

Would you like a border around your text like the above? Paste the below into the HTML editor and change the green text to your own.

<div class="border border-trbl border-round" style="text-align: center;"><p><span style="font-size: 12pt;">insert your text here</span></p></div>

Content boxes automatically clear their floated children and have default top and bottom margins.

Call out box with a header

Here is the code:

<div class="img-rounded" style="float: left; background-color: #ededed; width: 70%; height: 260px; border: 1px solid black; margin: 10px;">
<p style="color: #ededed; background-color: #008080; text-align: center; margin: 0px; padding: 0px;">HEADING GOES HERE</p>
<div style="height: 200px; overflow-x: hidden; overflow-y: auto; padding: 6px; text-align: left;"><span style="font-size: 12pt;">TEXT GOES HERE</span></div>
</div>

note: the first grey is the body textbox background colour, the 2nd is the font colour for the header.

HEADING GOES HERE

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

"Pill boxes": these are useful for something like an estimated watch/reading time for a prescribed resource.

Here is the code:

<ul class="pill">
<li>Estimated Reading Time</li>
<li>30 mins</li>
<li>10 seconds</li>
</ul>

And here is the result:

Estimated Reading Time
30 mins
10 seconds