Features

The feature portlet produces a single feature, meant to highlight a particular subpage, product, service, event, etc. Each feature contains a heading, an image, a link, and a rich text area that displays a paragraph by default. The text editor includes HTML editing capabilities, so extra links, headings, or paragraphs can be added as needed. Authors can add/edit/delete feature portlets, so CSS should be in place to ensure flexibility (ex. features displayed inline can wrap to another line gracefully if more are added).

Best Practices

Feature images should have large enough dimensions to scale up to HD resolution.
Image file sizes should be compressed as much as possible without large amounts of quality loss (High control image compression).
CSS background images should ONLY be used for decorative elements, never as a replacement for the "img" tag.
Background images should either be large enough to scale or be designed to repeat. For full width or height backgrounds, background-size should be set to cover(covers entire viewport on all sides) or contain(stops when any part of image hits a viewport edge) for responsiveness.
Text styling should display properly at all device widths (1920-1024px desktop, 990-320px mobile) and should be able to accomodate more or less verbiage.
Text must conform to ADA AA contrast guidelines (Web AIM Contrast Checker).

Render Templates

The HTML structure of a portlet is determined by the render template in use. Portlets have multiple render templates to choose from, and our development team has the ability to create new render templates based on client need.

Feature - Stacked

This feature has a heading, a container with an image wrapped in a link, and a container with a rich text area (paragraph by default) and a "Read More" link. Both links have the same destination.

Feature - Divided

This feature has two containers: one with an image wrapped in a link, and another with a heading, a rich text area (paragraph by default) and a "Read More" link. Both links have the same destination.

Feature - Lightbox

This feature consists of an image wrapped in a link and a lightbox pop-up container. The lightbox pop-up also has two containers: one for the image and another for the caption. The caption contains a heading and a rich text area. The pop-up will generate a "close" button and forward/next controls.

Feature - Merged

This feature has two containers: one with an image and a heading all wrapped in a link, another with a rich text area (paragraph by default) and a "Read More" link. Both links have the same destination.

Feature - Testimonials

This feature consists of two containers: one for the image and another for the header and rich text area (paragraph by default). There is a numbered pager and left and right arrows generated by JavaScript to navigate through the testimonials.

Feature - Testimonials - Single

This feature consists of a header and two containers: one for the image and another for the rich text area (paragraph by default). There is a pager generated by JavaScript to navigate through the testimonials.

Feature - Tab Slides

This feature contains a feature button area to navigate the tabbed content. Each "feature" or "tab slide" consists of two containers: one for the image and another for the rich text area (paragraph by default).

Side-by-side Comparisons

div class="featureWrapper stacked"

div class="feature"

Feature Title

div class="image"

img

div class="text"

Rich text displays a paragraph by default. Additonal text elements may be added. It is against best practices to include container elements such as “div”.

a class="more"

span

div class="featureWrapper merged"

div class="feature"

div class="image"

div class="insideImage"

img

div class="featureTitle"

Feature Title

div class="text"

Rich text displays a paragraph by default. Additonal text elements may be added. It is against best practices to include container elements such as “div”.

a class="more"

span

div class="featureWrapper divided tabSlides"

div class="feature clearfix"

div class="image"

img

div class="text"

Feature Title

Rich text displays a paragraph by default. Additonal text elements may be added. It is against best practices to include container elements such as “div”.

a class="more"

span

div class="featureWrapper divided"

div class="feature"

div class="image"

img

div class="text"

Feature Title

Rich text displays a paragraph by default. Additonal text elements may be added. It is against best practices to include container elements such as “div”.

a class="more"

span

div class="featureWrapper testimonials"

div class="carousel"

div class="feature clearfix"

div class="wrapper"

Feature Title

div class="image"

span

img

div class="text"

Rich text displays a paragraph by default. Additonal text elements may be added. It is against best practices to include container elements such as “div”.

div class="featureWrapper lightbox"

div class="feature"

a class="gallery" href="#gallery-1"

img

class="lightbox-popup" id="gallery-1"

div class="image"

img

div class="text"

Feature Title

Rich text displays a paragraph by default. Additonal text elements may be added. It is against best practices to include container elements such as “div”.

div class="featureWrapper testimonialsSingle"

div class="carousel"

div class="feature clearfix"

div class="wrapper"

div class="image"

span

img

div class="text"

Feature Title

Rich text displays a paragraph by default. Additonal text elements may be added. It is against best practices to include container elements such as “div”.