next
previous
items

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
 

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?

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.

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.

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.

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.

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

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.

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.

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.

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

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.

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

Two tiles with video content

What & how?

Key messages

Three tiles

10 years

of tracking industrial emissions

10 years

of tracking industrial emissions

10 years

of tracking industrial emissions

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

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

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

Permalinks

Geographic coverage

Tags

Filed under:
Filed under: corporate design
Document Actions