January 14, 2015

Content Boxes Example

Content Box Examples

In your "DFY" website template, we've included 9 different color Content Boxes. They are great for highlighting blocks of content and adding some visual variety to a page. In most cases...you would only use Content Boxes for a small amount of content and NOT a whole page of content.

Content Box Colors

Blue Content Box


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus.

Dark Content Box


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus.

Green Content Box


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus.

Light Content Box


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus.

Note Content Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus.

Purple Content Box


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus.

Red Content Box


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus.

Teal Content Box


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus.

Orange Content Box


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus.

This is how the HTML Code looks that created the Content Boxes above.

Enter HTML Code here


Custom Box

There are two types of customizable content boxes available in our "DFY" Done-For-You website templates. The first is a box with a custom background and custom border color:

Custom Color Box

You can choose a Custom Color Background and a Custom Color Outline. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel.

This is how the HTML Code looks that created the Content Boxes above.

Enter HTML Code here


The second type is a Content Box with a custom image background. In this example, the image background is also combined with a content container, for more control over the layout:

2nd Admin

Click Here to Leave a Comment Below

Leave a Reply: