勛圖厙

Feature Panel

Best use

  • Display a high-quality image with a strong headline and a short amount of text.
  • Link or call to action is optional.
  • Example: “Live with a Community of Scholars” on the Campus Life home page.

Feature Panel enables you to highlight your content while varying the look of a page, which helps with readability. It includes a large image next to a small amount of text.

  • Keep your copy concise to avoid making the content area taller than the image.
  • Use a heading of fewer than four words.
  • Do not use more than two Feature Panels consecutively. See our design tips.

Once you’ve added your image and text, you can pick from a few design options. Set the background color to one of three preset options, or leave it set to “none” for a blank background. You can also set the image position to left, right, or behind the text content (note: when set to "Behind Content" the background color setting will have no effect).

Here’s an example with a blank background and an image to the left:

A Reed faculty member observes the Reed Research Reactor from the railing above

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lobortis odio a varius. Aenean porttitor dui elit, sit amet consequat massa sodales a.

Call to Action

Here’s an example with muliple images positioned behind the content:

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lobortis odio a varius. Aenean porttitor dui elit, sit amet consequat massa sodales a.

Call to Action

Panels Without Images

It's also possible to create a panel with a solid color background and without images. To do this, select one of the following options from the Panel Style menu.

Text

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lobortis odio a varius. Aenean porttitor dui elit, sit amet consequat massa sodales a.

Call to Action

Steps

The Steps panel style is best used for outlining a process. Add your heading for the overall process to the Feature Content field, then add one or more Feature Sections for each step.

Heading

Step 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lobortis odio a varius. Aenean porttitor dui elit, sit amet consequat massa sodales a.

Call to Action

Step 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lobortis odio a varius. Aenean porttitor dui elit, sit amet consequat massa sodales a.

Call to Action

Step 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lobortis odio a varius. Aenean porttitor dui elit, sit amet consequat massa sodales a.

Call to Action

Grid

The Grid panel style is similar to the Steps style, but displays each Feature Section in a grid instead of vertically. Add your heading to the Feature Content field, then add one or more Feature Sections for each grid square.

Heading

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lobortis odio a varius. Aenean porttitor dui elit, sit amet consequat massa sodales a.

Call to Action

Section 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lobortis odio a varius. Aenean porttitor dui elit, sit amet consequat massa sodales a.

Call to Action

Section 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lobortis odio a varius. Aenean porttitor dui elit, sit amet consequat massa sodales a.

Call to Action

Section 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat lobortis odio a varius. Aenean porttitor dui elit, sit amet consequat massa sodales a.

Call to Action

View More Components