next
previous
items
European Union flag
Home
Topics
Analysis and data
Countries
Newsroom
About us

TinyMCE styles

Page Last modified 31 Jul 2023
4 min read
This page was archived on 31 Jul 2023 with reason: Other (new version on http://eea.github.io/)
Documentation of styles and templates provided for editors to use on website content.
Contents
  1. Box Styles
    1. Note
    2. KeyFacts box
    3. Fullwidth box
    4. Left box
    5. Right box
    6. Boxes options
  2. Quotes
    1. Inline quote
    2. Pullquote left
    3. Pullquote right
  3. Fullwidth background sections
    1. Fullwidth background section with other elements
  4. TinyMCE templates
    1. Tiles
      1. One tile
      2. Two tiles with video content
      3. Three tiles
      4. Four tiles
      5. Tiles options
 

Box Styles

Just like pullquote styles, box styles can be used to add emphasis to a section of content wrapping the selected content with a given box background color.

Note

Note style is used for info message mimicking those found within charts.

Due to compatibility reasons the font size for this style is fixed to 12px.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid eaque inventore ipsum, iure quidem quisquam. A autem deserunt dicta ducimus eos expedita facilis hic illo perferendis possimus quo voluptate, voluptatum? 


<p class="callout">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  Aliquid eaque inventore ipsum, iure quidem quisquam.
  A autem deserunt dicta ducimus eos expedita facilis hic
  illo perferendis possimus quo voluptate, voluptatum?
</p>

KeyFacts box

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Architecto cumque dignissimos dolor exercitationem fugiat, harum laborum, officiis optio reiciendis sed similique totam vero.
  • Esse eum laborum qui quibusdam sint tempore. 

<ul class="keyFact">
  <li>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </li>
  <li>
    Architecto cumque dignissimos dolor exercitationem fugiat,
    harum laborum, officiis optio reiciendis sed similique totam vero.
  </li>
  <li>
    Esse eum laborum qui quibusdam sint tempore.
  </li>
</ul>

Fullwidth box

Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. 


<div class="box box--full box-primary">
  <p>Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in
    mollis nunc. Quisque non tellus orci ac auctor augue mauris.
    Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget.
    A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse
    platea dictumst vestibulum rhoncus.
  </p>
</div>

Left box

Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.

Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Amet consectetur adipiscing elit pellentesque habitant. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl vel. Viverra mauris in aliquam sem. Turpis massa sed elementum tempus egestas sed sed risus pretium. Fermentum iaculis eu non diam phasellus. Consequat id porta nibh venenatis. 


<div class="box box--left box-secondary">
  <p>Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in
    mollis nunc. Quisque non tellus orci ac auctor augue mauris.
    Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget.
    A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse
    platea dictumst vestibulum rhoncus.
  </p>
</div>

<p>Quisque non tellus orci ac auctor augue mauris. Faucibus vitae
  aliquet nec ullamcorper sit amet risus nullam eget. A diam sollicitudin
  tempor id. Sed viverra tellus in hac habitasse platea dictumst
  vestibulum rhoncus. Amet consectetur adipiscing elit pellentesque
  habitant. Fermentum odio eu feugiat pretium nibh ipsum consequat
  nisl vel. Viverra mauris in aliquam sem. Turpis massa sed elementum
  tempus egestas sed sed risus pretium. Fermentum iaculis eu non diam
  phasellus. Consequat id porta nibh venenatis.
</p>

Right box

Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus.

Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse platea dictumst vestibulum rhoncus. Amet consectetur adipiscing elit pellentesque habitant. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl vel. Viverra mauris in aliquam sem. Turpis massa sed elementum tempus egestas sed sed risus pretium. Fermentum iaculis eu non diam phasellus. Consequat id porta nibh venenatis. 


<div class="box box--right box-tertiary">
  <p>Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in
    mollis nunc. Quisque non tellus orci ac auctor augue mauris.
    Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget.
    A diam sollicitudin tempor id. Sed viverra tellus in hac habitasse
    platea dictumst vestibulum rhoncus.
  </p>
</div>

<p>Quisque non tellus orci ac auctor augue mauris. Faucibus vitae
  aliquet nec ullamcorper sit amet risus nullam eget. A diam sollicitudin
  tempor id. Sed viverra tellus in hac habitasse platea dictumst
  vestibulum rhoncus. Amet consectetur adipiscing elit pellentesque
  habitant. Fermentum odio eu feugiat pretium nibh ipsum consequat
  nisl vel. Viverra mauris in aliquam sem. Turpis massa sed elementum
  tempus egestas sed sed risus pretium. Fermentum iaculis eu non diam
  phasellus. Consequat id porta nibh venenatis.
</p>

Boxes options

Each box has the following options:

  1. Color options:
    1. box-primary
    2. box-secondary
    3. box-tertiary
  2. Size options:
    1. box--full
    2. box--left
    3. box--right

All of these box variants are selectable from the editor style dropdown.

Example:

Box with box--full size and box-tertiary background color 

<div class="box box--full box-tertiary">
  Box with box--full size and box-tertiary background color
</div>

Quotes

Inline quote

Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla. Elementum nibh tellus molestie nunc non blandit. Et malesuada fames ac turpis egestas maecenas pharetra. 


<blockquote>
  <p>Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla.
    Elementum nibh tellus molestie nunc non blandit.
    Et malesuada fames ac turpis egestas maecenas pharetra.
  </p>
</blockquote>

Pullquote left

Donec enim diam vulputate ut pharetrasit amet aliquam id. Euismod lacinia at quis risus sed vulputate odio ut.

Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Venenatis tellus in metus vulputate eu. Sagittis id consectetur purus ut. Ultricies mi eget mauris pharetra et ultrices. Eu lobortis elementum nibh tellus molestie nunc non blandit massa.

Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. 


<blockquote class="pullquote-left">
  <p>Donec enim diam vulputate ut pharetrasit amet aliquam id.
    Euismod lacinia at quis risus sed vulputate odio ut.
  </p>
</blockquote>

<!--  content that wraps the left pullquote  -->
<p>Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Venenatis tellus in metus vulputate eu. Sagittis id consectetur purus ut. Ultricies mi eget mauris pharetra et ultrices. Eu lobortis elementum nibh tellus molestie nunc non blandit massa.</p>
<p>Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. </p>

Pullquote right

Donec enim diam vulputate ut pharetrasit amet aliquam id. Euismod lacinia at quis risus sed vulputate odio ut.

Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Venenatis tellus in metus vulputate eu. Sagittis id consectetur purus ut. Ultricies mi eget mauris pharetra et ultrices. Eu lobortis elementum nibh tellus molestie nunc non blandit massa.

Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget.


<blockquote class="pullquote-right">
  <p>Donec enim diam vulputate ut pharetrasit amet aliquam id.
    Euismod lacinia at quis risus sed vulputate odio ut.
  </p>
</blockquote>

<!--  content that wraps the right pullquote  -->
<p>Cursus turpis massa tincidunt dui ut ornare lectus sit amet. Venenatis tellus in metus vulputate eu. Sagittis id consectetur purus ut. Ultricies mi eget mauris pharetra et ultrices. Eu lobortis elementum nibh tellus molestie nunc non blandit massa.</p>
<p>Mattis pellentesque id nibh tortor id aliquet. Amet nisl purus in mollis nunc. Quisque non tellus orci ac auctor augue mauris. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget.</p>

Fullwidth background sections

Just like boxes we can also make use of fullwidth background sections to add emphasis to the given area.

Also like the boxes we have 3 color options:

Full width background section with primary background color

Full width background section with secondary background color

Full width background section with tertiary background color


<div class="fullwidth-bg eea-block bg-primary">
  <p>Full width background section with primary background color</p>
</div>

<div class="fullwidth-bg eea-block bg-secondary">
  <p>Full width background section with secondary background color</p>
</div>

<div class="fullwidth-bg eea-block bg-tertiary">
  <p>Full width background section with tertiary background color</p>
</div>

Fullwidth background section with other elements

Besides the simple styles, you can also nest several styles for a combined effect in case it fit's the page design.

This way you can nest a Inline quote within a Fullwidth background section. 


<div class="fullwidth-bg eea-block bg-primary">
  <blockquote>
    <p>Besides the simple styles, you can also nest several styles
      for a combined effect in case it fit's the page design.
    </p>
  </blockquote>
  <p>This way you can nest a <strong>Inline quote</strong> within a
    <strong>Fullwidth background section</strong>.
  </p>
</div>

TinyMCE templates

Besides the styles that you can select from the style dropdown we also have several templates that wrap several html tags in order to have more complex styles.

Here we list the following templates:

Tiles

Tiles are templates used to write a large impact text or a title followed by a video.

Within tiles we have the following variations:

One tile

10 years

of tracking industrial emissions

<div class="tiles tiles--1">
  <div class="tile tile--bordered">
    <div class="tile-item">
      <h3 class="tile-item-header notoc" id="10-years">10 years</h3>
      <div class="tile-item-body">of tracking industrial emissions</div>
    </div>
  </div>
</div>

Two tiles with video content

What & how?

Key messages


<div class="tiles tiles--2">

  <div class="tile">
    <div class="tile-item">
      <h3 class="tile-item-header h1 notoc" id="10-years">What &amp; how?</h3>
      <div class="tile-item-body"><video style data-matomo-title="SOER 2020 - Tobias" controls="controls" preload="auto" poster="resolveuid/05f995b884f94542929de52b451baeb8" src="https://cmshare.eea.europa.eu/s/M3AExbKXxJ6W6yt/download" type="video/mp4" width="320" height="180"> </video>
      </div>
    </div>
  </div>

  <div class="tile">
    <div class="tile-item">
      <h3 class="tile-item-header h1 notoc" id="10-years">Key messages</h3>
      <div class="tile-item-body"><video style data-matomo-title="SOER 2020 - Key messages_Hans_short version" controls="controls" preload="auto" poster="resolveuid/fa8f4918d59f4f64928593140aadc328" src="https://cmshare.eea.europa.eu/s/28eMmEAnkpn2NaP/download" type="video/mp4" width="320" height="180"> </video>
      </div>
    </div>
  </div>

</div>

Three tiles

10 years

of tracking industrial emissions

10 years

of tracking industrial emissions

10 years

of tracking industrial emissions

<div class="tiles tiles--3">
  <div class="tile tile--bordered">
    <div class="tile-item">
      <h3 class="tile-item-header notoc" id="10-years">10 years</h3>
      <div class="tile-item-body">of tracking industrial emissions</div>
    </div>
  </div>

  <div class="tile tile--bordered">
    <div class="tile-item">
      <h3 class="tile-item-header notoc" id="10-years">10 years</h3>
      <div class="tile-item-body">of tracking industrial emissions</div>
    </div>
  </div>

  <div class="tile tile--bordered">
    <div class="tile-item">
      <h3 class="tile-item-header notoc" id="10-years">10 years</h3>
      <div class="tile-item-body">of tracking industrial emissions</div>
    </div>
  </div>

</div>

Four tiles

10 years

of tracking industrial emissions

10 years

of tracking industrial emissions

10 years

of tracking industrial emissions

10 years

of tracking industrial emissions

<div class="tiles tiles--4">
  <div class="tile tile--bordered">
    <div class="tile-item">
      <h3 class="tile-item-header notoc" id="10-years">10 years</h3>
      <div class="tile-item-body">of tracking industrial emissions</div>
    </div>
  </div>

  <div class="tile tile--bordered">
    <div class="tile-item">
      <h3 class="tile-item-header notoc" id="10-years">10 years</h3>
      <div class="tile-item-body">of tracking industrial emissions</div>
    </div>
  </div>

  <div class="tile tile--bordered">
    <div class="tile-item">
      <h3 class="tile-item-header notoc" id="10-years">10 years</h3>
      <div class="tile-item-body">of tracking industrial emissions</div>
    </div>
  </div>

  <div class="tile tile--bordered">
    <div class="tile-item">
      <h3 class="tile-item-header notoc" id="10-years">10 years</h3>
      <div class="tile-item-body">of tracking industrial emissions</div>
    </div>
  </div>
  
</div>

Tiles options

Tiles have a tile--bordered modifier which if applied adds a top and bottom grey border to the tile section.

bordered tile

this section is bordered

<div class="tiles tiles--1">
  <div class="tile tile--bordered">
    <div class="tile-item">
      <h3 class="tile-item-header notoc" id="10-years">bordered tile</h3>
      <div class="tile-item-body">this section is bordered</div>
    </div>
  </div>
</div>

They can also be wrapped with fullwidth background sections in case we need to provide such a focus area for the tiles.

tile header

background wrapped tile

<div class="fullwidth-bg eea-block bg-secondary">
  <div class="tiles tiles--1">
    <div class="tile">
      <div class="tile-item">
        <h3 class="tile-item-header notoc" id="10-years">tile header</h3>
        <div class="tile-item-body">background wrapped tile</div>
      </div>
    </div>
  </div>
</div>

Permalinks

Geographic coverage

For references, please go to https://www.eea.europa.eu/code/design-elements/tinymce_styles or scan the QR code.

PDF generated on 03 Nov 2025, 12:17 PM

EEA Page URL QR

Tags

Filed under: corporate design
Document Actions
The EEA is an agency of the European Union

Engineered by: EEA Web Team

Software updated on 26 September 2023 08:13 from version 23.8.18

Software version: EEA Plone KGS 23.9.14

Code for developers

Systems Status

Legal notice

Creative commons license

CMS login