CKEditor styles

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:

1. 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;
2. To manage all knowledge produced by EIGE to enable timely and innovative communication that meets the targeted needs of key stakeholders;
3. 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

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!

A more link with inline arrow!

This is a highlighted link

A small more link

An external link

A highlighted external link

A download link

A normal button link

A tiny button link

An export link

An export button link

A back link

This is a list of highlighted links:

• A highlighted link
• Another highlighted link

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 box

Gray box

Blockquote

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

Test toggler label

A toggling action 

Another toggling action (valid usecase to have two of them together)

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

This the link that opens the 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

You are NOT using a small device. You can see this text. 

The text below is visible only in small devices

You are using a small device. You can see this text. 

How to use:

1. click CKEditor's Source button.
2. Locate the element you want to apply the custom visibility class to (paragraph, span, div, list etc.)
3. add
   

    class="[desired-visibility-class]"

   within the element. For example:

    <p class="show-for-small-only">

4. 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

Promo grid of 3 items with additional link

List of teasers

• 

  The title of the teaser item

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• 

  The title of the teaser item

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• 

  The title of the teaser item

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• 

  The title of the teaser item

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Tab 1
• Tab 2
• Tab 3
• Tab 4