TinyMCE styles
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:
- Color options:
- box-primary
- box-secondary
- box-tertiary
- Size options:
- box--full
- box--left
- box--right
All of these box variants are selectable from the editor style dropdown.
Example:
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
Two tiles with video content
What & how?
Key messages
Three tiles
10 years
10 years
10 years
Four tiles
10 years
10 years
10 years
10 years
Tiles options
Tiles have a tile--bordered modifier which if applied adds a top and bottom grey border to the tile section.
bordered tile
They can also be wrapped with fullwidth background sections in case we need to provide such a focus area for the tiles.
tile header
Permalinks
- Permalink to this version
- 0d2a486b91d846f584b0e402e0aa664a
- Permalink to latest version
- R1IQC94HZO
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 16 Jan 2021, 07:33 AM
Document Actions
Share with others