Typography

Page Last modified 31 Jul 2023

3 min read

This page was archived on 31 Jul 2023 with reason: Other (new version on http://eea.github.io/)

Site typography, including global settings, headings, body text, lists.

Menu

Contents

Headers

      This is a h1
      This is a h2
      This is a h3
      This is a h4
    

Text styles

Paragraph text styles

This is a paragraph.

This is a moreLink

Discreet text style

Added by editors when selecting the Discreet style from the TinyMCE style dropdown, this class allows us to have a text that is discreet with a size of 85% of the normal size for which this class is applied.

Besides the font decrease there is also a contrast filter which dims the color regardless if the primary color is black or white.

This is an example of a paragraph that is discreet.

This is an example of a paragraph that is discreet out of the secondary color.

This is an example of a paragraph that is using the secondary color. Check out the difference in color between this paragraph and the one above it.

Lists

Unstyled lists

      Item 1
Item 2

Styled lists

Outside of content-core column add list-items class to ul element if you want them to look like those found within content-core.

      Item 1
Item 2

Bullet lists

This bullet style is used within themes section where the bullet is inside the ul and not outside as regular unordered lists behave.

      Item 1
Item 2

Inline lists

      Item 1
Item 2

Unordered lists

This square style is default for lists found within content area, added as a simple ul tag by the TinyMCE editor.

Consider using list-items class on the ul if you want to preserve this style outside of content-core area.

      Item 1
Item 2

Unordered lists nested

      Item 1
Item 2
          Item 2.1
Item 2.2

Ordered lists

      Coffee
Tea
Milk

    

Ordered lists nested

      Coffee

          Tea
          Black tea
Green tea

Milk

Definition lists

      Term item 1
      Description 1
      Term item 2
      Description 2
    

Abbreviations

Stylized implementation of the HTML abbr tag for abbreviations and acronyms, showing an expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover.

EEA acronym

Quotations

Inline quote

Europe has made considerable progress over recent decades in cleaning the air that we breathe, but air pollution remains a serious problem and continues to damage our health and the environment.

Stavros Dimas, Commissioner for Environment

Pullquote left

Europe has made considerable progress over recent decades in cleaning the air that we breathe, but air pollution remains a serious problem and continues to damage our health and the environment.

Stavros Dimas, Commissioner for Environment

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

Europe has made considerable progress over recent decades in cleaning the air that we breathe, but air pollution remains a serious problem and continues to damage our health and the environment.

Stavros Dimas, Commissioner for Environment

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.