Portlets

Portlets

Default Plone portlets markup

By default in Plone 4 the portlet markup is using definition lists instead of div elements, something that is changed in Plone 5. As we can see in the next code example we can also use the more modern html elements preserving the same look and feel.

Plone 5 portlets markup

For any newly created portlets this syntax is preferred over the classic Plone 4 syntax. The differences as explained in the previous section are minor, substituting dl, dt and dt tags for div tags.

Megatopic portlet

Used on the frontpage of the EEA website these portlets follow a typical card design with a header and a body area.

Wrap the portlet-megatopic divs with a megatopics-area parent div if you want to use more than 1 portlet on the same line.

Portlet like classes

Featured class

Used on the frontpage of the EEA website these portlets follow a tile design with a floated image followed by a header and description.

In the spotlight

Shaping the post-Corona planet: knowledge on Europe's environment and climate

What should a post-corona planet look like? How have corona measures impacted the environment and climate? Can we rebuild our economy on sustainable and fair foundations? As we take steps towards ...

Read more

Shortcut classes

Used on the frontpage of the EEA website these portlets follow a tile design with a floated image followed by a header and description.

Shortcut default class

COVID-19 virus outbreak

Meetings with external participants continue to be held via online platforms until further notice.

Shortcut light class

Used only in dc themes pages the only difference from the default and light class is the extra padding on the default variant.