Headings and text styles
Α ToC Header
The European Institute for Gender Equality (EIGE) is an autonomous body of the European Union, established to contribute to and strengthen the promotion of gender equality, including gender mainstreaming in all EU policies and the resulting national policies, and the fight against discrimination based on sex, as well as to raise EU citizens’ awareness of gender equality.
A ToC subheader
As an autonomous body, EIGE operates within the framework of European Union policies and initiatives. The European Parliament and the Council of the European Union defined the grounds for the Institute’s objectives and tasks in its Founding Regulation and assigned it the central role of addressing the challenges of and promoting equality between women and men across the European Union.
A normal list:
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
A numbered list:
- To provide high quality research and data to support better informed and evidence based decision-making by policymakers and other key stakeholders working to achieve gender equality;
- To manage all knowledge produced by EIGE to enable timely and innovative communication that meets the targeted needs of key stakeholders;
- To meet the highest administrative and financial standards while supporting the needs of EIGE's personnel.
Text of smaller font. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in erat vitae odio porta suscipit vel sed lacus. Fusce mollis, augue at finibus imperdiet, arcu nibh elementum odio, nec ultrices nulla erat quis felis. Nam rutrum eget mi vel tristique. Quisque ac leo a augue egestas dapibus non et tellus. Vestibulum at mi vitae est pretium interdum eget sit amet elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vehicula iaculis nisi in porttitor.
Other headings
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in erat vitae odio porta suscipit vel sed lacus. Fusce mollis, augue at finibus imperdiet, arcu nibh elementum odio, nec ultrices nulla erat quis felis. Nam rutrum eget mi vel tristique. Quisque ac leo a augue egestas dapibus non et tellus. Vestibulum at mi vitae est pretium interdum eget sit amet elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vehicula iaculis nisi in porttitor
A heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
A heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
A heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
A table
| Table header | Table header |
|---|---|
| 1-2 March 2018 | 1st JHA network meeting |
| 12 April 2018 | Workshop on gender statistics |
| 18 May 2018 | Data protection meeting |
| 14 June 2018 | Prevention of sexual harassment: experience sharing among the confidential counsellors |
| 19 June 2018 | Workshop on digitalisation |
| 20-21 June 2018 | 2nd JHA network meeting |
| 17-18 July 2018 | Training meeting (CEPOL) |
| 27-28 September 2018 | 3rd JHA network meeting |
| 8 October 2018 | Prevention of sexual harassment: experience sharing among HR coordinators |
| 22-23 November 2018 | Heads of JHA agencies’ meeting |
| tbc | Meeting on external dimension (FRONTEX) |
Images within text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in erat vitae odio porta suscipit vel sed lacus. Fusce mollis, augue at finibus imperdiet, arcu nibh elementum odio, nec ultrices nulla erat quis felis. Nam rutrum eget mi vel tristique. Quisque ac leo a augue egestas dapibus non et tellus. Vestibulum at mi vitae est pretium interdum eget sit amet elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vehicula iaculis nisi in porttitor. Nulla finibus est in est faucibus, sollicitudin luctus ligula venenatis.
Sed lacinia tincidunt purus ut ultricies. Aliquam rhoncus metus leo, eget tincidunt sem vestibulum sed. In eget blandit nisi. Pellentesque dictum tellus lectus, nec tincidunt orci luctus nec. Suspendisse id lectus sed erat sagittis pellentesque et ut est. Vivamus sollicitudin ligula lacus, vehicula tristique sem dapibus eu. Praesent in tortor eu ex dignissim condimentum. Donec varius turpis nisl, nec varius lorem vestibulum eget. Etiam finibus lacinia leo id pharetra. Ut vel augue vulputate, iaculis eros quis, venenatis ante. Mauris molestie eros odio, in pharetra mauris semper varius. Nunc ut purus ut massa lacinia porta sit amet ornare ante. Aenean porttitor ultricies tincidunt. Sed nec imperdiet arcu. Etiam turpis est, finibus ut mollis quis, ullamcorper ut ex.
Morbi at eros tempus, gravida lorem id, luctus erat. Mauris aliquam viverra venenatis. Maecenas venenatis blandit justo vel pharetra. Phasellus sed pretium nunc. Aliquam at lacus maximus, convallis nunc eu, eleifend leo. Suspendisse interdum dui semper, semper nulla at, faucibus magna. Pellentesque hendrerit, justo fermentum vestibulum ultrices, est leo volutpat ligula, congue faucibus augue nibh quis risus. Sed rutrum ante massa, in hendrerit sapien mollis quis. Sed pellentesque risus at luctus volutpat. Donec dictum eleifend tellus, id faucibus justo tempor at. Nullam feugiat metus eget odio facilisis dapibus. Praesent at diam imperdiet, consectetur enim sit amet, consectetur lectus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in erat vitae odio porta suscipit vel sed lacus. Fusce mollis, augue at finibus imperdiet, arcu nibh elementum odio, nec ultrices nulla erat quis felis. Nam rutrum eget mi vel tristique. Quisque ac leo a augue egestas dapibus non et tellus. Vestibulum at mi vitae est pretium interdum eget sit amet elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vehicula iaculis nisi in porttitor. Nulla finibus est in est faucibus, sollicitudin luctus ligula venenatis.
Mauris fermentum tristique eros. Proin vitae faucibus magna. Ut sagittis mollis neque. Nullam turpis metus, condimentum mollis scelerisque bibendum, consectetur id massa. Pellentesque ac rutrum sem. Nunc at velit eu nunc efficitur auctor quis quis nunc. Quisque nec elit dignissim, efficitur ligula at, rhoncus orci. Ut vulputate massa lobortis, porta dui in, dapibus arcu. Vestibulum vestibulum neque ut odio molestie posuere. Aliquam erat volutpat. Duis vel sollicitudin elit, nec aliquam risus. Mauris interdum ullamcorper orci vitae accumsan. Cras iaculis tellus eu nibh maximus, vitae consectetur urna tempus.
An image that looks bigger upon click.
Image with caption
Mauris fermentum tristique eros. Proin vitae faucibus magna. Ut sagittis mollis neque. Nullam turpis metus, condimentum mollis scelerisque bibendum, consectetur id massa. Pellentesque ac rutrum sem. Nunc at velit eu nunc efficitur auctor quis quis nunc. Quisque nec elit dignissim, efficitur ligula at, rhoncus orci. Ut vulputate massa lobortis, porta dui in, dapibus arcu. Vestibulum vestibulum neque ut odio molestie posuere. Aliquam erat volutpat. Duis vel sollicitudin elit, nec aliquam risus. Mauris interdum ullamcorper orci vitae accumsan. Cras iaculis tellus eu nibh maximus, vitae consectetur urna tempus.
Mauris fermentum tristique eros. Proin vitae faucibus magna. Ut sagittis mollis neque. Nullam turpis metus, condimentum mollis scelerisque bibendum, consectetur id massa. Pellentesque ac rutrum sem. Nunc at velit eu nunc efficitur auctor quis quis nunc. Quisque nec elit dignissim, efficitur ligula at, rhoncus orci. Ut vulputate massa lobortis, porta dui in, dapibus arcu. Vestibulum vestibulum neque ut odio molestie posuere. Aliquam erat volutpat. Duis vel sollicitudin elit, nec aliquam risus. Mauris interdum ullamcorper orci vitae accumsan. Cras iaculis tellus eu nibh maximus, vitae consectetur urna tempus.
Mauris fermentum tristique eros. Proin vitae faucibus magna. Ut sagittis mollis neque. Nullam turpis metus, condimentum mollis scelerisque bibendum, consectetur id massa. Pellentesque ac rutrum sem. Nunc at velit eu nunc efficitur auctor quis quis nunc. Quisque nec elit dignissim, efficitur ligula at, rhoncus orci. Ut vulputate massa lobortis, porta dui in, dapibus arcu. Vestibulum vestibulum neque ut odio molestie posuere. Aliquam erat volutpat. Duis vel sollicitudin elit, nec aliquam risus. Mauris interdum ullamcorper orci vitae accumsan. Cras iaculis tellus eu nibh maximus, vitae consectetur urna tempus.
Mauris fermentum tristique eros. Proin vitae faucibus magna. Ut sagittis mollis neque. Nullam turpis metus, condimentum mollis scelerisque bibendum, consectetur id massa. Pellentesque ac rutrum sem. Nunc at velit eu nunc efficitur auctor quis quis nunc. Quisque nec elit dignissim, efficitur ligula at, rhoncus orci. Ut vulputate massa lobortis, porta dui in, dapibus arcu. Vestibulum vestibulum neque ut odio molestie posuere. Aliquam erat volutpat. Duis vel sollicitudin elit, nec aliquam risus. Mauris interdum ullamcorper orci vitae accumsan. Cras iaculis tellus eu nibh maximus, vitae consectetur urna tempus.
Mauris fermentum tristique eros. Proin vitae faucibus magna. Ut sagittis mollis neque. Nullam turpis metus, condimentum mollis scelerisque bibendum, consectetur id massa. Pellentesque ac rutrum sem. Nunc at velit eu nunc efficitur auctor quis quis nunc. Quisque nec elit dignissim, efficitur ligula at, rhoncus orci. Ut vulputate massa lobortis, porta dui in, dapibus arcu. Vestibulum vestibulum neque ut odio molestie posuere. Aliquam erat volutpat. Duis vel sollicitudin elit, nec aliquam risus. Mauris interdum ullamcorper orci vitae accumsan. Cras iaculis tellus eu nibh maximus, vitae consectetur urna tempus.
Link styles
A more link with inline arrow!
This is a list of highlighted links:
Styling snippets of text with editor '<div>' button
Read more content
This style allows the CM to temporarily hide a snippet of text and to replace it with label "Read more". When the user clicks on this label, the text will appear, allowing the user to read it. This style is different than "Toggling content" style analyzed below in the following ways:
- the more minimal UI gives less emphasis to the hidden text
- the text for the label that toggles (shows/hides) the text is not manageable in this case; it is always "Read more" and automatically added
- requires much simpler actions for the CM to apply this style
Highlighted frame
Highlighted frame: Equality between women and men is a fundamental value of the European Union. Therefore ‘Making equality between women and men a reality for all Europeans and beyond’ is our vision.
Our mission is to become the European knowledge centre on gender equality issues.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Highlighted box
A highlighted box changes color depending on the website section! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in erat vitae odio porta suscipit vel sed lacus. Fusce mollis, augue at finibus imperdiet, arcu nibh elementum odio, nec ultrices nulla erat quis felis. Nam rutrum eget mi vel tristique. Quisque ac leo a augue egestas dapibus non et tellus. Vestibulum at mi vitae est pretium interdum eget sit amet elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vehicula iaculis nisi in porttitor.
Gray box
A gray box is always gray! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in erat vitae odio porta suscipit vel sed lacus. Fusce mollis, augue at finibus imperdiet, arcu nibh elementum odio, nec ultrices nulla erat quis felis. Nam rutrum eget mi vel tristique. Quisque ac leo a augue egestas dapibus non et tellus. Vestibulum at mi vitae est pretium interdum eget sit amet elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vehicula iaculis nisi in porttitor.
Blockquote
A blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in erat vitae odio porta suscipit vel sed lacus. Fusce mollis, augue at finibus imperdiet, arcu nibh elementum odio, nec ultrices nulla erat quis felis. Nam rutrum eget mi vel tristique. Quisque ac leo a augue egestas dapibus non et tellus. Vestibulum at mi vitae est pretium interdum eget sit amet elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vehicula iaculis nisi in porttitor
Off grid image
This style should be used only when Table of Contents is not displayed in the page, as it will ovelap with the image. See: https://projects.invisionapp.com/share/ZWMZUOZK7F2#/screens/309097210 for the UI example of an off grid image; it is no longer aligned with the content, it expands on the right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in erat vitae odio porta suscipit vel sed lacus. Fusce mollis, augue at finibus imperdiet, arcu nibh elementum odio, nec ultrices nulla erat quis felis. Nam rutrum eget mi vel tristique. Quisque ac leo a augue egestas dapibus non et tellus. Vestibulum at mi vitae est pretium interdum eget sit amet elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed vehicula iaculis nisi in porttitor.
Responsive video
Special cases/styles
Column layout
Toggling content
Embedding a policy cycle node
Adding a tooltip
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec risus sit amet turpis efficitur pharetra non in enim. Duis euismod id quam at rutrum. Nam vestibulum risus leo, vitae euismod urna pretium quis. Nam sit amet lorem eros. In sit amet lacus ligula. Duis ut tristique felis. Aliquam a ipsum a quam tincidunt condimentum et nec tellus. Phasellus tincidunt ac tortor sit amet elementum. Vestibulum pellentesque purus et eros feugiat consequat.
Thesaurus reference/link
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec risus sit amet turpis efficitur pharetra non in enim. Duis euismod id quam at rutrum. Nam vestibulum risus leo, vitae euismod urna pretium quis. Nam sit amet lorem eros. In sit amet lacus ligula. Duis ut tristique felis. Aliquam a ipsum a quam tincidunt condimentum et nec tellus. Phasellus tincidunt ac tortor sit amet elementum. Vestibulum pellentesque purus et eros feugiat consequat.
Adding a GSD iframe
Adding a GSD iframe (example 2)
Adding a GSD iframe (example 3)
Adding a modal
Visibility classes
List of available css classes to manage an element's visibility depending on device: https://foundation.zurb.com/sites/docs/v/5.5.3/components/visibility.html Examples:
The text below is hidden from small devices
The text below is visible only in small devices
You are using a small device. You can see this text.
How to use:
- click CKEditor's Source button.
- Locate the element you want to apply the custom visibility class to (paragraph, span, div, list etc.)
- add
class="[desired-visibility-class]"
within the element. For example:
<p class="show-for-small-only">
- if a class is already present for that element, add the visibility class literal in the existing class attribute. For example:
<p class="small-text show-for-small-only">
Templates
Some examples of the available templates:
Promo gird of 4 items
Title
content with bold text
Title
content with bold text
Title
content with bold text
Title
content with bold text
Title
content with bold text
Title
content with bold text
Title
content with bold text
Title
content with bold text
Promo grid of 3 items with additional link
List of teasers
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.