FeatureBox class

See examples at bottom of page

Intro

The “featurebox” is what we call the optional column that floats along the right side of a page and contains special features. It consists of a 70×70 thumbnail image and 6-10 words, several of which appear in bold. It links to a particular call-out or strategic page or form.

It is most common to have it at the top of a page, using just a featurebox page part. featurebox350 is also a page part option, used for larger, inline images with captions. See the listing of page parts for more info.

The Standard featurebox (250px)

Adding One Featurebox at the Top of Your Content

To add a featurebox to the top of your page, just add a page part called “featurebox”. The page will then have a box like the one in Figure 1. The default featurebox is floated right and is 250px wide (240px from border to border + 10px padding).

Adding featureboxes Floating in the Content

To add a featurebox anywhere within the content, use the featurebox snippet. If your Textile inside the snippet isn’t being recognized, you may have to leave a blank line before the closing </r:snippet>.

<r:snippet name="featurebox">
  * "apply online":/admissions/apply
</r:snippet>

Text link (without image)

Although images and text can be placed directly inside the featurebox, the list is the key to “wrapping” the links or special features to style them—creating a gray background and curved corners (figure 2).

* "apply online":/admissions/apply

Link with inline (mini) image

If you add an inline image, it should have a height of 25px if it is to be centered vertically in the single-line link box (figure 3).

* "!check.png! apply online":/admissions/apply

Large image feature with caption

To create a link with a full-width image and optional caption text underneath, the image must be exactly 200px wide. The height of the image can vary, but it is advisable to keep it as low as possilbe so as to keep vertical space to a minimum. (Figure 4)

* "!begreen-video.jpg! Being *green* at EMU":/begreen

Medium image feature

In this medium feature, the image floats to the left and the text wraps around it to the right. Since this feature has a fixed height to avoid wrapping problems, it requires an extra class ( medium ) on the list item. With medium features, you must limit your text to 4 lines, or it will be cut off. The size of your thumbnail image must be 70px x 70px. (Figure 5)

*(medium) "!athletic-openhouse09.gif! Explore sports at EMU: *athletic open house - Jan. 24*":/admissions/athletic/

Using section headers

If you want to divide the features into sections and label them with a header, it’s very simple—just use an h2. It must go outside of the list. Headers cannot be more than a single line of text, so keep them as short as possible. Figure 6 shows and example of a header along with a large feature.

h2. media

* "!begreen-video.jpg! Being *green* at EMU":/begreen

Non-link images

At times it may be necessary to use an image which is not a link (for example, if you want to use a photo and quote in the right column, but without linking to something – see figure 7). This is possible, but keep in mind that, since you won’t be using a list there will be no gray border with rounded corners and roll-over effect. So you will need to create a wider image and use rounded corners in photoshop so that the image will take up the space normally occupied by the border. Images should be 220px wide and use a corner radius of 10px . See example.

Hint: blockquotes (bq.) are anywhere on the site (not only in the right column) and will style your text like in Fig. 7.

!images/andile.jpg(Andile)!

bq. "The environment at EMU..."

p{text-align:right}. *Andi Dube, '07*
business administration major

Text Block (where the text in not a single link)

If you’d like to include a special text box, but do not have more info to link to, you can highlight the text in a dark-color box (Fig. 8). To do that, you will need to use the following code:

h2. save the dates

*(textblock) <div>"Mark your calendars...":/homecoming</div>

350px featurebox

In some cases you may feel the need to use a wider feature box. This should be used sparingly, since it takes up half of the content area. You should think of this not so much as a wider “column” but as a squarer feature box. In other words, this wider feature box will most likely not work well if it is too long. Keep it short. See example A and example B

To make a 350px featurebox, create a page part or snippet as described above, only use the name “featurebox350.” A few things to keep in mind:

  • Large (full) feature image width should be 300px
  • Non-linked image width should be 320px
  • Medium feature images stay the same as standard ( height=70px )

600px featurebox (Full)

The 600px feature box fills the width of the content area almost entirely. Since this layout tends to make for some fairly long lines of text, it should be used only when specifically needed. There is not a page part or snippet for this one. Create a div, give it a class of featurebox w600 and include the extra markup that is normally done for you with the featurebox snippet. Here is an example.

There are certain limitations/differences to be aware of:

  • All feature images must be 70px high
  • Feature images are floated to the left
  • There is no need to specify"medium"on the
  • tag (since images area already floated and the height is set)

Narrow Main Content Area
(constrains main content to the center area)

Sometimes you might not want a solid right column, but you’d prefer using an occasional featurebox (like, with a photo and caption) which relates to the particular paragraph on the page. Since this can cause some awkward text wrapping (since the main text usually runs the entire width when there are no images to wrap around) a solution would be to wrap the content (or part of it) in a div called narrow-content . This class adds a right margin of 250px keeping any of the main text from running all the way to the right side. If you are using featurebox w350, you should use narrow-content350 , so that the right margin is appropriately adjusted to 350px. The narrow-content and narrow-content350 classes are assigned to a div that wraps the main text. Important: you must use the featurebox snippet within the narrow-content div for it to work properly. It will not work as a page part. See example.

<div class="narrow-content">
<div class="featurebox">
<div class="top"></div>

* "Apply Online":/admissions/apply

<div class="bottom"></div>
</div>


Here is where all your regular main content text goes.
</div>

Examples

Next: Slideshows »