Styles and icons
Below you can find examples of all the looks, icons, boxes etc. as examples.
No other styles are allowed!
Please do not attempt to use these styles yourself on a page, but contact the web content team for assistance.
Heading 1 = page title
Heading 2
Heading 3
Heading 4
Standard file / document types
CSV
<i class="estat-icon-csv"></i>
HTML
<i class="estat-icon-html"></i>
<i class="estat-icon-pdf"></i>
PPT
<i class="estat-icon-ppt"></i>
Word
<i class="estat-icon-doc"></i>
XLS
<i class="estat-icon-xls"></i>
ZIP
<i class="estat-icon-zip></i>
Image
<i class="estat-icon-image></i>
Eurostat specific icons
Database
<i class="estat-icon-database"></i>
Data browser
<i class="estat-icon-data-browser"></i>
Data explorer
<i class="estat-icon-data-explorer"></i>
Education corner
<i class="estat-icon-education-corner"></i>
Interactive publication
<i class="estat-icon-interactive-publication"></i>
Legislation
<i class="estat-icon-public-legislation"></i>
Metadata
<i class="estat-icon-metadata"></i>
News release
<i class="estat-icon-news-release"></i>
Publications
<i class="estat-icon-publication"></i>
Public consultation
<i class="estat-icon-public-consultation"></i>
Release calendar
<i class="estat-icon-calendar"></i>
Statistics Explained
<i class="estat-icon-statistics-explained"></i>
Multimedia file types
MP4
<i class="estat-icon-mp4"></i>
Video
<i class="estat-icon-video"></i>
Other icons
Bulb
<i class="estat-icon-bulb"></i>
Warning
<i class="estat-icon-warning"></i>
Copyright
<i class="estat-icon-copyright"></i>
Copy
<i class="estat-icon-copy"></i>
COVID
<i class="estat-icon-covid"></i>
Download
<i class="estat-icon-download"></i>
FAQ
<i class="estat-icon-faq"></i>
Important announcement
<i class="estat-icon-important-announcement"></i>
Internet
<i class="estat-icon-internet"></i>
New
<i class="estat-icon-new"></i>
Products & tools
<i class="estat-icon-products-tools"></i>
Services
<i class="estat-icon-services"></i>
Contact
<i class="estat-icon-contact"></i>
Contact by email
<i class="estat-icon-contact-email"></i>
Contact by phone
<i class="estat-icon-contact-phone"></i>
Social media
<i class="estat-icon-instagram"></i>
Youtube
<i class="estat-icon-youtube"></i>
<i class="estat-icon-facebook"></i>
<i class="estat-icon-twitter"></i>
<i class="estat-icon-linkedin"></i>
Type of list
- Standard [for text only]
<ul><li>text</li></ul>
- Arrow list [for links only]
<ul><li class="arrow">text</li></ul>
Standard file / document types
- CSV
<ul><li class="csv">text</li></ul>
- HTML
<ul><li class="html">text</li></ul>
<ul><li class="pdf">text</li></ul>
- PPT
<ul><li class="ppt">text</li></ul>
- Word
<ul><li class="doc">text</li></ul>
- XLS
<ul><li class="xls">text</li></ul>
- ZIP
<ul><li class="zip">text</li></ul>
- Image
<ul><li class="image">text</li></ul>
Eurostat specific icons
- Database
<ul><li class="database">text</li></ul>
- Data browser
<ul><li class="data-browser">text</li></ul>
- Data explorer
<ul><li class="data">text</li></ul>
- Education corner
<ul><li class="education-corner">text</li></ul>
- Interactive publication
<ul><li class="interactive-publication">text</li></ul>
- Legislation
<ul><li class="legislation">text</li></ul>
<ul><li class="meta">text</li></ul>
- News release
<ul><li class="news-release">text</li></ul>
- Publications
<ul><li class="publication">text</li></ul>
- Public consultation
<ul><li class="public-consultation">text</li></ul>
- Statistics Explained
<ul><li class="se">text</li></ul>
Multimedia file types
- MP4
<ul><li class="mp4">text</li></ul>
- Video
<ul><li class="video">text</li></ul>
Other icons
- Copyright
<ul><li class="copyright">text</li></ul>
- COVID
<ul><li class="covid">text</li></ul>
- Download
<ul><li class="download">text</li></ul>
- FAQ
<ul><li class="faq">text</li></ul>
- Important announcement
<ul><li class="important-announcement">text</li></ul>
- Internet
<ul><li class="internet">text</li></ul>
- New
<ul><li class="new">text</li></ul>
- Products & tools
<ul><li class="products-tools">text</li></ul>
- Services
<ul><li class="services">text</li></ul>
- Contact
<ul><li class="contact">text</li></ul>
- Contact by email
<ul><li class="contact-email">text</li></ul>
- Contact by phone
<ul><li class="contact-phone">text</li></ul>
Social media
<ul><li class="instagram">text</li></ul>
- Youtube
<ul><li class="youtube">text</li></ul>
<ul><li class="facebook">text</li></ul>
<ul><li class="twitter">text</li></ul>
<ul><li class="linkedin">text</li></ul>
The number of rows and columns can be customised as needed.
Example:
| Topic A | Section B | Aspect C | Link |
|---|---|---|---|
This is my text on top and then I want to hide some part to make the text appear shorter.
You need to translate the text in the code line number 5, 6 and 9 with the translations below:
| EN | FR | DE |
|---|---|---|
| Read more | Afficher plus | Mehr |
| Less | Moins | Weniger |
The identifier in the code line number 3 and 15 is the id of the element to be expanded or collapsed. It must be unique within the web page.
See the example used on this page with the different boxes (=accordion)
Usage: https://ec.europa.eu/component-library/ec/components/file/code/
You need to translate the text in the code line number 14 with the translations below:
| EN | FR | DE |
|---|---|---|
| Download | Télécharger | Herunterladen |