Skip Navigation
Web Services
Member, Texas Tech University System The Princeton Review - 373 Best Colleges, 2011 Edition

Feature Box

At times you may want a block of text to stand out a bit from its surroundings. For this purpose, we have created a style called a “Feature Box”. This style will set your text apart with a thin border, a light background color, and an optional blue title bar. To create a feature box:

  • Create a <div> with a class of "feature"
  • Add content within the newly created <div>
  • To create a title bar, add an <h3> as the topmost item within the <div>
  • To further format the feature box, you can add additional classes to the <div>. Classes can be combined on an element by separating them with a space:
    • To float the feature box to the right, with surrounding text and objects wrapping around it to the left, add a class of "right", i.e. <div class="feature right">...
    • To float the feature box to the right, with surrounding text and objects wrapping around it to the right, add a class of "left", i.e. <div class="feature left">...
    • By default, the feature box will fill 100% of the horizontal space available for it. To make it narrower add one of the following classes:
      • fourth - the box will fill 1/4 of the available space
      • third - the box will fill 1/3 of the available space
      • forty - the box will fill 40% of the available space
      • half - the box will fill 50% of the available space
      • sixty - the box will fill 60% of the available space
      • twothirds - the box will fill 2/3 of the available space
      • seventyfive - the box will fill 75% of the available space

Combining multiple classes in this way can create many variations of the feature box. Several examples are given below.

Example 1

<div class="feature">
        <h3>Title</h3>
        <p>This is a simple example of a feature box with a heading.</p>
</div>

Title

This is a simple example of a feature box with a heading.

Example 2

<div class="feature third">
        <h3>Title</h3>
        <p>In this example, a class of &ldquo;third&rdquo; is added to the &lt;div&gt;.</p>
</div>
<p>And a second paragraph is added to show how the surrounding text will interact with the feature box.</p>

Title

In this example, a class of “third” is added to the <div>.

And a second paragraph is added to show how the surrounding text will interact with the feature box.

Example 3

<div class="feature sixty left">
        <h3>Title</h3>
        <p>In this example, a class of &ldquo;left&rdquo; is added to the &lt;div&gt; and the class of &ldquo;third&rdquo; from the previous example has been changed to &ldquo;sixty&rdquo;.</p>
</div>
<p>In this case, the following paragraph will wrap around the feature box to the right.</p>

Title

In this example, a class of “left” is added to the <div> and the class of “third” from the previous example has been changed to “sixty”.

In this case, the following paragraph will wrap around the feature box to the right.