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.
- Subscriptions
- Sign up to receive our reports (print and/or electronic) and quarterly e-newsletter.
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
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 ...
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.
Permalinks
- Permalink to this version
- 0dc0f5f8381e4702917b899b846e66fc
- Permalink to latest version
- 9QY2S36GHB
Geographic coverage
For references, please go to https://www.eea.europa.eu/code/design-elements/portlets or scan the QR code.
PDF generated on 17 May 2022, 04:38 AM
Document Actions
Share with others