CK-Editor styles

Headings

Please nest headings by their rank (or level) for better accessibility.

Also avoid using h1 since it is the page title. If you need a bigger font size heading please use the heading classes bellow. 

A heading 2

A heading 3

A heading 4

A heading 5

A heading 6

Heading classes

Heading classes can be used on any element in order to apply a specific heading style on any element.

Available heading classes: .h2, .h3, .h4, .h5, .h6

Examples

A h2 html element styled as a h4 | class="h4"

A h3 html element styled as a h2 | class="h2"

A paragraph html element styled as a h3 | class="h3"

Heading display classes

Heading styling classes with light font weight, mostly used in display cases like banners, landing pages etc.

A heading 4 html element with | class="display-1"

A heading 4 html element with | class="display-0"

A heading 4 html element with | class="display-h2"

A heading 4 html element with | class="display-h3"

---

Paragraphs

A paragraph. 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.

A small paragraph. | class="small-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.

An extra small paragraph. | class="xsmall-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.

---

Lists

Bullet list | the ul html element

• A bullet list item
• A bullet list item
• A bullet list item
• A bullet list item

With small text | ul with class="small-text"

• A bullet list item
• A bullet list item
• A bullet list item
• A bullet list item

With extra small text | ul with class="xsmall-text"

• A bullet list item
• A bullet list item
• A bullet list item
• A bullet list item

Number list | the ol html element

1. A number list item
2. A number list item
3. A number list item
4. A number list item

With small text | ol with class="small-text"

1. A number list item
2. A number list item
3. A number list item
4. A number list item

With extra small text | ol with class="xsmall-text"

1. A number list item
2. A number list item
3. A number list item
4. A numbrer list item

Icon List

• An item with a checklist icon. | class="icon-checklist"

• An item with a megaphone icon. | class="icon-megaphone"

• An item with a file icon. | class="icon-file"

• An item with a dialogue icon. | class="icon-dialogue"

• An item with an action-plan icon. | class="icon-action-plan"

• An item with a money icon. | class="icon-money"

• An item with a strategy icon. | class="icon-strategy"

• An item with a chart icon. | class="icon-chart"

• An item with a conduct icon. | class="icon-conduct"

• An item with a handshake icon. | class="icon-handshake"

• An item with a indicators icon. | class="icon-indicators"

• An item with a allocate icon. | class="icon-allocate"

• An item with a roadmap icon. | class="icon-roadmap"

• An item with a feedback icon. | class="icon-feedback"

• An item with a target icon. | class="icon-target"

• An item with a tree-structure icon. | class="icon-tree-structure"

• An item with an users icon. | class="icon-users"

• An item with a lightbulb icon. | class="icon-lightbulb"

• An item with a check icon. | class="icon-check"

• An item with a x icon. | class="icon-close"

---

Links

Lorem ipsum dolor sit amet, consectetur adipiscing elit, A link inside a paragraph | the a (link) html element

Lorem ipsum dolor sit amet An external link | class="external" and should always have rel="external noopener noreferrer" consectetur adipiscing elit.

Lorem ipsum dolor sit amet A thesaurus reference link | class="thesaurus-reference" consectetur adipiscing elit.

---

Special links

A special link with a more arrow | class="special-link more"

A special link with a back arrow | class="special-link back"

A small special link with a more arrow | class="special-link more small"

A small special link with a back arrow | class="special-link back small"

---

Highlighted links

A highlighted link | class="highlighted-link"

An external highlighted link | class="highlighted-link external" should always have rel="external noopener noreferrer"

An alternative highlighted link | class="highlihgted-link alt"

An alternative external highlighted link | class="highlighted-link external alt" should always have rel="external noopener noreferrer"

Yellow highlighted links

A yellow highlighted link | class="highlihgted-link yellow"

A yellow external highlighted link | class="highlighted-link external yellow" should always have rel="external noopener noreferrer"

An alternative yellow highlighted link | class="highlihgted-link alt yellow"

An alternative yellow external highlighted link | class="highlighted-link external alt yellow" should always have rel="external noopener noreferrer"

Highlighted links with extra content

In case you need to add some more text inside a highlighted link there are two options.

Content above the main title

Content above the title | span class="above" A highlighted link | class="highlighted-link"

Content above the title | span class="above" A yellow highlighted link | class="highlighted-link yellow"

Content below the main title

A highlighted link | class="highlighted-link" Content below the title | span class="below"

A yellow highlighted link | class="highlighted-link yellow" Content below the title | span class="below"

Highlighted links list

A list of highlighted links without spacings between them.

• A highlighted link | class="highlighted-link"
• A highlighted link | class="highlighted-link"
• A highlighted link | class="highlighted-link"
• A highlighted link | class="highlighted-link"

Yellow highlighted links list

In order for the links to be yellow just add class="yellow" on each link.

• A highlighted link | class="highlighted-link yellow"
• A highlighted link | class="highlighted-link yellow"
• A highlighted link | class="highlighted-link yellow"
• A highlighted link | class="highlighted-link yellow"

---

Download links

What is gender mainstreaming? (EIGE, 2016)

---

Decorative icon links

Mostly used in landing pages but can be used throughout the website.

• With number one icon | class="decorative-icon-link icon-number-one"
• With number two icon | class="decorative-icon-link icon-number-two"
• With number three icon | class="decorative-icon-link icon-number-three"
• With number four icon | class="decorative-icon-link icon-number-four"
• With books icon | class="decorative-icon-link icon-books"
• With text icon | class="decorative-icon-link icon-text"
• With check icon | class="decorative-icon-link icon-check"
• With x icon | class="decorative-icon-link icon-x"
• With info icon | class="decorative-icon-link icon-info"
• With question icon | class="decorative-icon-link icon-question"
• With Gender Equality Index icon | class="decorative-icon-link icon-gei"
• With publication icon | class="decorative-icon-link icon-publication"
• With toolkit icon | class="decorative-icon-link icon-toolkit"
• With video icon | class="decorative-icon-link icon-video"
• With lightbulb icon | class="decorative-icon-link icon-lightbulb"
• With contract icon | class="decorative-icon-link icon-contract"
• With gender equality icon | class="decorative-icon-link icon-gender-equality"
• With evaluator icon | class="decorative-icon-link icon-evaluator"
• With commissioner icon | class="decorative-icon-link icon-commissioner"
• With calendar icon | class="decorative-icon-link icon-calendar"
• With share icon | class="decorative-icon-link icon-share"
• With image icon | class="decorative-icon-link icon-image"
• With voice-over icon | class="decorative-icon-link icon-voice-over"

---

Buttons

Primary | class="button"

A primary button | class="button"

A small primary button | class="button small"

A primary outlined button | class="button outline"

A small primary outlined button | class="button outline small"

A primary hollow button | class="button hollow"

A small primary hollow button | class="button hollow small"

Secondary| class="button secondary"

A secondary button | class="button secondary"

A small secondary button | class="button secondary small"

A secondary outlined button | class="button secondary outlined"

A small secondary outlined button | class="button secondary outlined small"

---

Buttons with icons

In order to add an icon on a button you need to add 2 extra classes along with class="button".

The first class defines the icon position:

• Icon on the left | class="icon-left"
• Icon on the right | class="icon-right"
• Only icon without text | class="icon-only"

The second class defines the icon:

• More | class="more" more
• Arrow right (same as more) | class="arrow-right" arrow-right
• Arrow left | class="arrow-left" arrow-left
• Arrow up | class="arrow-up" arrow-up
• Arrow down | class="arrow-down" arrow-down
• Caret left | class="caret-left" caret-left
• Caret right | class="caret-right" caret-right
• Double caret left | class="caret-double-left" caret-double-left
• Double caret right | class="caret-double-right" caret-double-right
• External | class="external" external
• Search | class="search" search
• Close | class="close" close
• Download | class="download" download
• Export (same as download)| class="export" export
• Menu | class="menu" menu
• Reset | class="reset" reset
• Print | class="print" print
• Pdf | class="pdf" pdf
• Feed icon | class="feed-icon" feed-icon
• Add to calendar | class="add-to-calendar" add-to-calendar
• Info | class="info" info
• Info | class="settings" settings
• Info | class="share" share

---

Button groups

Button groups come in three sizes according to the spacing between elements

A button group with normal spacing between elements | a ul with class="button-group"

• A primary button | class="button"
• A primary outlined button | class="button outline"
• A primary hollow button | class="button hollow"
• A secondary button | class="button secondary"
• A secondary outlined button | class="button secondary outlined"

Normal button group with small buttons

• A primary button | class="button"
• A primary outlined button | class="button outline"
• A primary hollow button | class="button hollow"
• A secondary button | class="button secondary"
• A secondary outlined button | class="button secondary outlined"

A button group with small spacing between elements | class="button-group small"

• A primary button | class="button"
• A primary outlined button | class="button outline"
• A primary hollow button | class="button hollow"
• A secondary button | class="button secondary"
• A secondary outlined button | class="button secondary outlined"

Normal button group with small buttons

• A primary button | class="button"
• A primary outlined button | class="button outline"
• A primary hollow button | class="button hollow"
• A secondary button | class="button secondary"
• A secondary outlined button | class="button secondary outlined"

A button group with extra small spacing between elements | class="button-group xsmall"

• A primary button | class="button"
• A primary outlined button | class="button outline"
• A primary hollow button | class="button hollow"
• A secondary button | class="button secondary"
• A secondary outlined button | class="button secondary outlined"

Normal button group with small buttons

• A primary button | class="button"
• A primary outlined button | class="button outline"
• A primary hollow button | class="button hollow"
• A secondary button | class="button secondary"
• A secondary outlined button | class="button secondary outlined"

---

Highlighted Frame

---

Blockquote

A blockquote | the blockquote html element

Gender analysis provides the necessary data and information to integrate a gender perspective into policies, programmes and projects.

Gender analysis provides the necessary data and information to integrate a gender perspective into policies, programmes and projects.

---

Boxes

Grey box

Light grey box

Yellow box

Light yellow box

Highlighted box

Light highlighted box

---

Border boxes

Border box blue

Border box yellow

Border box green

Border box red

Border box purple

Border box orange

---

Note box

---

Contact card

---

Tables

Default

Table caption

Heading 1	Heading 2	Heading 3	Heading 4	Headign 5
Test content	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.
Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	test	test	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	test
test	test	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	test	test
test	test	test	test	test

Small | class="small"

Table caption

Heading 1	Heading 2	Heading 3	Heading 4	Headign 5
Test content	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.
Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	test	test	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	test
test	test	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	test	test
test	test	test	test	test

Extra Small | class="xsmall"

Table caption

Heading 1	Heading 2	Heading 3	Heading 4	Headign 5
Test content	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.
Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	test	test	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	test
test	test	Lorem ipsum dolor sit amet in erat vitae odio porta suscipit vel sed lacus.	test	test
test	test	test	test	test

---

Images

Align left

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.

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.

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.

Align center

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.

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

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.

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.

---

Videos

In order for videos to be responsive and keep the correct ratio, they should be wrapped in a div width class="video-wrapper".

---

Expandables

With border and title

Read more

---

Tooltips

Lorem ipsum dolor sit amet. A Tooltip | span class="has-tip" title="Tooltip content" 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

---

Teasers

1. Media on top | class="teaser"
2. Media at the bottom | class="teaser media-bottom"
3. Media on the left | class="teaser media-left"
4. Media as background | class="teaser media-background"

Feel free to change the teaser title from a <p> to the appropriate html heading element in order to enhance accessibility. This change will not alter the title's styling.

• Media top (default) | class="teaser"

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Libero, fermentum sollicitudin tristique amet amet, volutpat vel.

  Content type

  Add Content Type here

  

• Media bottom| class="teaser media-bottom"

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Libero, fermentum sollicitudin tristique amet amet, volutpat vel.

  Content type

  Add Content Type here

  

• Media left | class="teaser media-left"

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Libero, fermentum sollicitudin tristique amet amet, volutpat vel.

  Content type

  Add Content Type here

  

• Media background | class="teaser media-background"

  Content type

  Add Content Type here

  

---

Layouts

• A div / ul / ol wrapper | class="layout" with div / li children.
• The number of children should be equal or greater than the number of columns.
• Can create a grid if more div children are added.
• Div children also work as boxes if the aforementioned box classes are added.
• Except from boxes the rest of content elements should be placed inside the div / li children

One column

One column layout | class="layout columns-1"

Can be useful with teasers.

• Lorem ipsum dolor sit amet. 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.
• Lorem ipsum dolor sit amet. 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.
• Lorem ipsum dolor sit amet. 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.

One column layout with dividers | class="layout columns-1 dividers"

• Lorem ipsum dolor sit amet. 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.
• Lorem ipsum dolor sit amet. 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.
• Lorem ipsum dolor sit amet. 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.

Two columns

Add class="columns-2" on layout wrapper | class="layout columns-2"

Two columns with dividers | class="layout columns-2 dividers"

Please avoid using this class with grid layouts.

Expand first column | class="layout columns-2 expand-1"

Expand first column with dividers | class="layout columns-2 expand-1 dividers"

Expand second column | class="layout columns-2 expand-2"

Expand second column with dividers | class="layout columns-2 expand-2 dividers"

Three columns

Add class="columns-3" on layout wrapper | class="layout columns-3"

There are no expansion rules for 3 column layouts

Three columns with dividers | class="layout columns-3 dividers"

Please avoid using this class with grid layouts.

Four columns

Add class="columns-4" on layout wrapper | class="layout columns-4"

Mostly used in landing pages. Please use it in pages with large width.

Four columns with dividers | class="layout columns-4 dividers"

Please avoid using this class with grid layouts.

Without spacings

Removes spacings between columns | class="remove-spacings"

It works with columns-2 and columns-3 and assists in creating combinations of boxes, image and box or blockquote pairs etc.

A combination of boxes in two columns.

A combination of boxes in three columns.

---

Tabs

---

Arrow steps

With 6 items

1. Emergency contraception
2. STI prevention and treatment
3. Obstetric and gynaecological care
4. Short-term psychological counselling
5. Long-term psychological counselling
6. Safe abortion and post-abortion care

With 9 items

1. Emergency contraception
2. STI prevention and treatment
3. Obstetric and gynaecological care
4. Short-term psychological counselling
5. Long-term psychological counselling
6. Safe abortion and post-abortion care
7. Short-term psychological counselling
8. Long-term psychological counselling
9. Safe abortion and post-abortion care

---

Flip cards

Added from the templates dropdown.

This example contains a flip card with content on the left and an empty one on the right.

• Question

  

  Reveal the answer

  Anwer

  

  Hide the answer
•  

---

Steps list

In templates dropdown.

1. Step one

2. Step two

3. Step three

---

Connection arrows

In templates dropdown.

• Main text
• Secondary text
• Secondary text
• Secondary text

Bottom to top version

Add extra class ".bottom-to-top"

• Main text
• Secondary text
• Secondary text
• Secondary text

---

Expandable cards