logo
Type anywhere to search
Pages Portlets

Effortless Customization


Portlets are pluggable UI components that are managed and displayed in a web portal. Portlets in Pages are created by reusing the panels introduced in Bootstrap to enable effortless customization.

Portlet Title

Advance Tools

We have crafted Pages Portlets to suit any use case. Add a maximize button into your portlets controls bar to make the portlets go full-screen. This will come handy if you want to show lot of content inside a portlets and want to give the content some room to breath


VIA senior product manage
for UI/UX at REVOX

Portlet Tools
Portlet Title

Basic Tools

Basic Portlet tools include a slide toggle button , refresh button and a close button All these are fully customizable and come with callback functions to integrate with your code. Clicking on the refresh button will simulate an AJAX call.

Portlet One

Without Scroll

When it comes to digital design, the lines between functionality, aesthetics, and psychology are inseparably blurred. Without the constraints of the physical world, there’s no natural form to fall back on, and every bit of constraint and affordance

Portlet Two

With Scroll

When it comes to digital design, the lines between functionality, aesthetics, and psychology are inseparably blurred. Without the constraints of the physical world, there’s no natural form to fall back on, and every bit of constraint and affordance must be introduced intentionally. Good design makes a product useful. A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it. It’s always obvious when design is an afterthought. The hallmarks of the engineering-first approach are everywhere: inscrutable interfaces, convoluted workflows, user guides the size of The Iliad. This was the dominant approach for the first several decades of personal computing, and it’s left its mark in the form of software designed with its creators in mind, rather than its users.

Style Options
Portlet Three

With Separator

When it comes to digital design, the lines between functionality, aesthetics, and psychology are inseparably blurred. Without the constraints of the physical world, there’s no natural form to fall back on, and every bit of constraint and affordance must be introduced intentionally. Good design makes a product useful. A product is bought to be used.

Portlet Four

Transparent

When it comes to digital design, the lines between functionality, aesthetics, and psychology are inseparably blurred. Without the constraints of the physical world, there’s no natural form to fall back on, and every bit of constraint and affordance must be introduced intentionally. Good design makes a product useful. A product is bought to be used.

Portlet Three

With Separator

When it comes to digital design, the lines between functionality, aesthetics, and psychology are inseparably blurred. Without the constraints of the physical world, there’s no natural form to fall back on, and every bit of constraint and affordance must be introduced intentionally. Good design makes a product useful. A product is bought to be used.

SVG animated progress indicators


Pages comes with two types of inderminate progress indicators: linear and circular. These have been created using animated SVGs to support various screen sizes and retina displays. We have integrated them into portlets too.

Portlet Title

Minimal Portlet

Click on the refresh icon to simulate an AJAX call and to see an animated circular progress indicatorabove the portlet. This is the Pages default progress indicator for portlets. Don't like this style? Simply change the style by setting portlet options.

Portlet Progress indicators
Portlet Title

Linear Progress

Click on the refresh icon to simulate an AJAX call and to see an animated progress bar indicator above the portlet. These progress bars come in seven different colors that are available in the Pages contextual color scheme.

Portlet Title

Circular Progress

Click on the refresh icon to simulate an AJAX call and to see an animated circular progress indicatorabove the portlet. This is the Pages default progress indicator for portlets. Don't like this style? Simply change the style by setting portlet options.

Portlet Progress Indicator colors
Portlet Title

Linear Progress

Click on the refresh icon to simulate an AJAX call and to see an animated progress bar indicator above the portlet. These progress bars come in seven different colors that are available in the Pages contextual color scheme.

Portlet Title

Circular Progress

Click on the refresh icon to simulate an AJAX call and to see an animated circular progress indicatorabove the portlet. This is the Pages default progress indicator for portlets. Don't like this style? Simply change the style by setting portlet options.

Portlet Title

Portlet with Errors

Anything that can go wrong will go wrong. Click on the refresh icon in the portlet controls to the top right to see how an error message can be displayed inside a portlet. Recommended to use with failed AJAX callbacks that are triggered from a portlet.

Draggable Portlets
Draggable Portlet

Drag me!

When it comes to digital design, the lines between functionality, aesthetics, and psychology are inseparably blurred. Without the constraints of the physical world, there’s no natural form to fall back on, and every bit of constraint and affordance must be introduced intentionally. Good design makes a product useful. A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic.

Draggable Portlet

Drag me!

When it comes to digital design, the lines between functionality, aesthetics, and psychology are inseparably blurred. Without the constraints of the physical world, there’s no natural form to fall back on, and every bit of constraint and affordance must be introduced intentionally. Good design makes a product useful. A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic.

Draggable Portlet

Drag me!

When it comes to digital design, the lines between functionality, aesthetics, and psychology are inseparably blurred. Without the constraints of the physical world, there’s no natural form to fall back on, and every bit of constraint and affordance must be introduced intentionally. Good design makes a product useful. A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic.

Draggable Portlet

Drag me!

When it comes to digital design, the lines between functionality, aesthetics, and psychology are inseparably blurred. Without the constraints of the physical world, there’s no natural form to fall back on, and every bit of constraint and affordance must be introduced intentionally. A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic.

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/14
21st april 2014 2:13am

Press enter to search

suggestions :

Pages Search Results

ice cream on pages

via john smith

T
ice cream related topics

via pages

ice cream music

via pagesmix

ice cream on facebook

via facebook

Tweats on ice cream

via twitter

Circles on ice cream

via google plus