MENU - European Parliament - Europa

CHARTE WEB EUROPARL.EU / /
graphic web
charter
eUrOpeaN parLiaMeNt
Dg cOMM - MeDia MaNageMeNt
eUrOparL web MaSter
2012
1
eUrOparL.eUrOpa.eU

CHARTE WEB EUROPARL.EU / / 2

SUMMary
TEXT MENU IMAGES MENU TEXT MENU
IMAGES MENU
IntroductIon
GrAPHIcAL cHArtEr
colors
Fonts
comPosItIon
Grid
Areas
HEAdEr (ArEA A)
Language combo box
menu of Europarl galaxy
Logo, general title of the
website and free background
Logo
General title of the website
Free background
Promotion area
colour highlight
search tools
mEnu (ArEA b)
main menu
sub-menu
static sub-menu
06
07
08
09
10
11
12
13
14
15
CHARTE WEB EUROPARL.EU / SUmmARy
Authorised colours in Europarl websites
Europarl galaxy website grid
Definition of the various areas in a page
Structure of the header
Language combo box
Menu of Europarl galaxy
Header with illustrated background
Header with a promotion area
Header with a specific logo
Coloured highlight of the website
Search tool of the President website
Types of menus
Main menu of the News website with Press
service section selected
Static sub-menu
Expand/collapse menu
Expand/collapse menu closed
tree-like sub-menu
search form
map
contEnt (ArEAs c&d)
description of the areas
main content area
contextual
information
dEtAILs oF tHE common
ELEmEnts oF ZcP And ZIc
titles & sub-titles
Images
banners
Icons
Link Icons
Language icons
calendar icons
calendar
buttons
Flags
Application forms
16
17
18
19
20
22
23
24
25
26
27
28/31
Expand/collapse sub-menu in-line opened
Expand/collapse sub-menu in-line closed
Expand/collapse sub-menu in columns opened
Expandable menu
Treelike sub-menu
Search form linked to the main menu
Map linked to the main menu
Content areas
Title in an editorial product
Images formats
Banner over ZCP and ZIC
Banner with a slideshow
Scrolling banner
Links Icons
Language Icons
Calendar Icons
Calendar
Button
Flags
Application forms
4

TEXT MENU IMAGES MENU TEXT MENU
IMAGES MENU
ZcP sPEcIFIcs ELEmEnts
breakdown of the elements
titles and sub-titles
Page Header
Essentials
content elements
Further Information
containers without borders
container with borders
Header
Filter
sub-menu area
content
Pagination
Footer
Pagination
container of 11 pages or less
more than 11 pages container
maps
Examples of use
32
33
34
35
36/37
38
39
40/41
CHARTE WEB EUROPARL.EU / SUmmARy
Header
Essentials in an editorial product
Content elements
«Further information» icons
Examples of headers of a container with
borders from ZCP
Example of filter of a container with border
from ZCP
Examples of expandable list
Pagination of more than 11 pages
Intermediate navigation of more
than 11 pages
End of pagination of more than 11 pages
Europe map for the «MEPs» planet
World map for the «Delegations»
planet
Example of product
Example of list
Example of technical announcement
Example of a container with tabs
Example of an expandable element in a
container with borders
ZIc sPEcIFIcs ELEmEnts
breakdown of the elements
titles & sub-titles
Icones
content elements
containers without borders
containers with borders
Header
Filter
content
Pagination
Footer
Examples of use
“Further Information” container
“contacts” container
“Fact box” container
“social media” container
“share” container
“Press releases” container
“Press conferences” container
FootEr (ArEAs E&F)
Logo & General title
Legal notice
Links related to the current website
sitemap of the europarl galaxy
7 main websites
42
43
44
45
46
47
48
“Contact” Container
“Share Box” Container
Components of a container
with border from the ZIC
Examples of headers of containers with
border from the ZIC
Example of sub-header of containers
with border
“Contacts” container of a MEP details page
“Social media” Container
“Fact box” Container
“Further information“ container
“Press releases” Container
“Share” container with 4 elements
“Share” container with 2 elements
“Press conferences” container
Footer
5

iNtrODUctiON
The purpose of this document is to define the style of the
graphics used on the internet websites of the Europarl galaxy.
The former Europarl website is now divided into different
websites or ‘planets’ (such as the visitors’ website) and is being
revamped.
This style guide is based on on the new version of Europarl and
is divided into planets.
The former Europarl website had 5 information sections. This
is now being replaced by 7 websites (or planets) as part of the
Europarl galaxy:
• News
• About Parliament
• MEPs
• Plenary
• Committees
• Delegations
• EP TV
CHARTE WEB EUROPARL.EU / InTROdUCTIOn
This document is based on a strong study of these planets and
more precisely:
• their structure
• the grid used to compose the pages
• their graphical constitution
• the page elements
With this document, every designer, webmaster or web
professionals should be able to create a website with the
European Parliament’s web identity.
6

GRAPHICAL
charter
colours
Europarl publishes in black on white to enhance readability.
This is a general statement which means that page backgrounds
are usually bright and fonts generally dark in order to have a
minimum contrast of 500 (W3C recommandation for WCAG 2.0
AA standard) which every Europarl publication is supposed to
follow.
Fonts
Europarl fonts are:
• Arial regular
• Arial bold
• Arial italic
Sizes are usually fixed and
based on structural tags
while colours depend on their
contextual use.
So, a level 3 header in the
Main Content Area (ZCP3) is:
• Arial bold
• 18 px
While a level 3 header in the
Contextual Information Area
(ZIC3) is:
• Arial bold
• 12px
CHARTE WEB EUROPARL.EU / GRAPHICAL CHARTER / COLOURS
Authorised colours in europArl websites
sections
• #BA76C9
(mauve) news
• #d15d00
(Orange) Plenary,
Committees,
delegations
• #E09707
(yellow) mEPs
• #B8DD22 (Green)
EP TV
• # 2DA2FF (Blue)
About Parliament
Fonts
elements
• #D9DDE1
(dark grey) Stroke
backgrounds
• #FFFFFF
(White)
ex. Background
container Features
• #FBFBFB
(Light grey)
ex. General
background ZCP
• # F4F4F4
(medium grey)
ex. Background
footer*, Button
hover
• #EDEDED
(Grey)
ex. Selected
menu*,
General footer
background*,
Calendar hover
• #13334D
(dark blue)
ex. Container
Header ZIC
Fonts
• #363636
(Charcoal grey)
ex. Texts
• #13334D
(dark blue)
ex. Headings of
content
• #195B92
(Blue) ex. Subjects,
Links
* Background with grain
7

cOMpOSitiON
Europarl galaxy websites are based on a grid and are composed
of distinctive elements.
Grid
The Europarl galaxy website
grid is based on units of 25px
and 12px.
The size of elements are based
on units such as:
• space between paragraph
and title
• margin
• space between containers
• etc.
CHARTE WEB EUROPARL.EU / COmPOSITIOn / GRId
eUrOparL gaLaxy
webSite griD
Unit 1 = 25px
Unit 2 = 12px
European Parliament/Planet
Main Menu Main Menu Main Menu
Agendas Reports Motions for resolutions Debates Minutes
Title 1
Title 2 / Lawyer-linguists: making EU legislation mean the
same in all languages
Institutions - 19-07-2010 - 11:18
Some 27 member states, 23 languages but 1 set of
laws - how does the EU ensure the rules mean the
same across the whole bloc? Three of Parliament’s
lawyer-linguists talked to us about the challenges
and intricacies of their job.
Title 3 / Our features: everything you wanted to know…
in one place
Institutions - 19-07-2010 - 11:18
Title 3 / Parlamentarium: an interactive discovery of what
the EP and the EU are about at the heart of Brussels
Institutions - 19-07-2010 - 11:18
European Parliament/Planet
Institutions
European Parliament l European Council l Council l European
Commission l Court of Justice of the EU l European Central Bank l
Court of Auditors
News
Headlines Press service
Press archives
About Parliament
At your service Power and functions
Organisation and work
In the past
925px
650px 275px
MEPs
Search Full list
Incoming/outgoing Assistants
Plenary
Plenary sitting Ordinary legislative procedure
Budgetary procedure Questions and
declarations Calendar
News Parliament MEPs Committees Delegations EP TV More
Title 3 / Your voice in Europe
Your Voice in Europe: inform the EU and
be informed.
Title 3 / Your voice in Europe
Your Voice in Europe: inform the EU and
be informed.
Political groups
Group of the European People’s party (Christian Democrats)
Group of the Progressive Alliance of Socialists and Democrats
Alliance of Liberals and Democrats for Europe
< 37 U >
Committees
Overview Committee webpages
Archives
Delegations
Delegations Calendar
Archives
EP TV
Home Meetings Channels
Themes About EuroparlTV
A-Z
Complete website list
8

AreAs
Every page of the Europarl
galaxy is structured around
the following areas:
• header (A)
• menu (B)
• main content area (C)
• secondary/Contextual
Information Area (D)
• specific Footer (E)
• common footer (F)
Some areas are common (A
except banner, and F), some
are specific to each site (B, C,
D, and E).
According to the graphical
charter, these areas should be
respected.
CHARTE WEB EUROPARL.EU / COmPOSITIOn / AREAS
DefiNitiON Of the variOUS
areaS iN a page
a ce f
Zone a :
header
Zone c :
Main content - Zcp
Zone e :
Specific footer
b
D
Zone b :
Menu
Zone f :
general footer
Zone D :
Secondary / contextual
informations - Zic
9

heaDer
Webpage header (and footer) links every planet of the Europarl
galaxy.
Most elements are common to every website (language combo
box, europarl menu, European Parliament logo, search tool).
In contrast, the website’s name, promotion area, colour highlight
and banner are customisable, within the restrictions set out in
this chapter.
lAnGuAGe combo box
A combo box includes the
22 official languages of the
European Union following
protocol order.
Each language is displayed as
follows:
• two letters ISO code
• « - »
• language title in the language
concerned.
(AREA A)
Current navigation language is
displayed by default. Choosing
another language in the
combo box reloads the page in
the chosen language.
The font of the text in the
combo box is:
• Arial regular
• 11px
• blue on white background.
CHARTE WEB EUROPARL.EU / HEAdER (AREA A) / LAnGUAGE COmBO BOx
STrUCTUrE oF THE HEADEr
Menu of
europarl galaxy
Languages box
title
Menu
promotion area
Search box
LANGUAGE CoMBo BoX
10

menu oF
europArl
GAlAxy
This menu contains:
• the list of the 7 planets,
previously the main tabs in
Europarl in the navigation
language
• one entry «More» in the
navigation language.
The 7 historical planets are in
the following order:
• News
• About Parliament
• MEPs
• Plenary
• Committees
• Delegations
• EP TV
Font used is:
• Arial bold
• 11px
• white font on blue
background with shadow
effect.
Menu entry «More» displays
the list of the websites which
are part of the specific footer,
plus an A-to-Z link to a page
indexing every website of the
Europarl galaxy.
This is displayed by clicking
on ‘More’ and disappears by
clicking outside of the list.
CHARTE WEB EUROPARL.EU / HEADER (AREA A) / MEnU OF EUROPARL GALAxy
MENU oF EUroPArL GALAXY
Menu entry «More» in the navigation menu
11

loGo, GenerAl title oF
the website And Free
bAckGround
LOgO
The logo links to Europarl
portal page.
Its size is proportional to the
size of the EU flag held in it.
Its width must be equal to one
unit (25px).
It lies halfway down the
banner.
geNeraL titLe
Of the Site
The following required
elements lie below the logo:
• label «European Parliament»
in the current navigation
language
• « / »
• general title of the website in
lower case.
«European Parliament» label
links to the Europarl portal
page.
The general title of the
website links to the website’s
top page.
For example:
• «European Parliament /
Visiting» for the English
version of the visitors’ website.
• «Parlement européen /
Actualité» for the French
version of the news website.
Font used is:
• Arial bold
• 20px
• white colour.
free backgrOUND
The banner background is
customisable but has to
respect the following rules:
• a line drawing in grey or a
drawing using grey shading
may be added to the blue
background via the following
process: Multiply, Screen,
Overlay. This is possible only
so long as the drawing does
not alter the overall shade of
the background.
• the inlay should not hamper
the readability of the overall
title of the website and should
follow the rules of contrast
set out in the WCAG 2.0 AA
standards of the W3C.
CHARTE WEB EUROPARL.EU / HEADER (AREA A) / LOGO, GEnERAL TiTLE OF THE WEBsiTE AnD FREE BACkGROUnD
12

prOMOtiON area
The purpose of this area is to
highlight existing content from
another website. Depending
on the length of the existing
content, it may need to be
shortened.
For example:
• latest messages of European
Parliament Facebook profile
• latest tweets of European
Parliament twitter account in
the navigation language
• latest EuroparlTV videos.
This area may be used, as
necessary, to put the logo of
the owner of the website. In
this case, nothing else apears
in this area and the logo has to
be present on every page.
cOLOUr highLight
This line of colour specifies
the section via a contrasted
colour (cf. Authorised colours
in Europarl websites) and
uses the same colours as the
former Europarl website tabs.
This applies only to planets
extracted from the former
Europarl website.
Search tOOL
The search tool searches
within the current website.
For the planets extracted from
the former Europarl website,
results concerning the other
planets of the former Europarl
websites will be displayed
in the secondary/contextual
information area.
This tool may not apear in
shallow depth websites.
Text ‘Search in «name_of_the_
website»’ is displayed in the
search field by default in the
current navigation language.
Font used is:
• Arial regular
• 12px
• shallow grey colour
• clear grey background.
A magnifier pictogram
launches the search.
CHARTE WEB EUROPARL.EU / HEADER (AREA A) / LOGO, GEnERAL TiTLE OF THE WEBsiTE AnD FREE BACkGROUnD
HEADEr WITH ILLUSTrATED BACkGroUND
HEADEr WITH A ProMoTIoN ArEA
HEADEr WITH LoGo
CoLoUrED HIGHLIGHT oF THE CoMMITTEES WEBSITE
SEArCH TooL oF THE PrESIDENT WEBSITE
13

MeNU
Three levels of menu are available:
• main menu
• sub-menu (it can be static or with an expandable/collapsable
feature depending on contents)
• third level of menu (with treelike menu).
Moreover, a form can be added with the main menu.
Each type depends on the previous one and should follow a
hierarchy.
The choice of the menu rely on the depth of the website in
which it is used, keeping in mind that information should be
accessible in a minimum of clicks.
mAin menu
Main menu sums up the main
sections of the website.
Font used is:
• Arial bold
• 12px
• dark blue colour, white
• background.
(AREA B)
Once a menu entry is
selected, its background
changes to grey with grain.
If the menus decribed below
are optional, each website has
to display this main menu.
Line spacing is 1.6em.
CHARTE WEB EUROPARL.EU / mEnU (AREA B) / mAIn mEnU
Main Menu
expand /
collapse Menu
treelike
Sub-Menu
TYPES oF MENUS
MAIN MENU oF THE NEWS WEBSITE WITH PrESS SErvICE SECTIoN SELECTED
14

sub-menu
This type of menu depends on the main menu. It is visible only if an entry of the main menu is
selected.
This sub-menu has the same clear grey with grain background as the selected section of the main
menu and it can have two levels of titles:
• group links title is non clickable. It is only used when a group of links is displayed.
• the group of links.
Depending on its content, it can be displayed in three ways:
• static
• collapsable
• expandable.
The expandable and collapsable menu can be displayed following two models:
• in-line
• in columns.
This sub-menu covers the width of the content beause it concerns both area C and area D.
Static SUb-MeNU
Font
The title of a group of links
uses this font :
• Arial bold
• 12px
• dark blue colour, grey with
grain background.
Each links uses this font:
• Arial regular when a non
selected entry
• Arial bold when a selected
entry
• 12px
• clear blue colour, grey with
grain background
• underlined when mouse over
• line spacing is 1.6 em.
Structure
The following menu structure
is always preferred.
Syntax as follow:
• title of the group of links
• « : »
• link 1
• « | » in dark blue
• ...
• « | » in dark blue
• link n.
CHARTE WEB EUROPARL.EU / mEnU (AREA B) / SUB-mEnU
A new line should be used for
each group of links.
STATIC SUB-MENU
15

expaND/cOLLapSe
MeNU OpeNeD
Font
The title of a group of links
uses this font:
• Arial Bold
• 12px
• dark blue colour, grey with
grain background.
Each link uses this font:
• Arial regular when a nonselected
entry
• Arial bold when a selected
entry
• 12px
• clear blue colour, grey with
grain background
underlined when mouse
scrolls over
• line spacing is 1.6 em.
In-lIne Form
Syntax is the same as the
static menu.
By default, when visiting a
website using this type of
menu, the menu is expanded.
The menu is collapsed by
clicking on the arrow between
the two levels of navigation
or by clicking on the «Close»
button in the bottom right
corner of the menu.
The menu is closed while the
user is browsing until the user
re-opens it.
To open again the menu, the
user can click of the selected
main menu entry or or the
arrow placed between the two
levels of navigation.
CHARTE WEB EUROPARL.EU / mEnU (AREA B) / SUB-mEnU
In column Form
This layout is better than
the previous one when a
large number of links is to be
displayed.
The elements of the menu can
be read from top to bottom,
column to column, from left
to right.
EXPAND/CoLLAPSE SUB-MENU
IN-LINE oPENED
EXPAND/CoLLAPSE SUB-MENU
IN-LINE CLoSED
EXPAND/CoLLAPSE MENU IN CoLUMNS CLoSED
16

expaND/cOLLapSe
MeNU cLOSeD
Font
The title of a group of links
uses this font:
• Arial Bold
• 12 px
• dark blue colour, grey with
grain background.
Each link uses this font:
• Arial regular when a nonselected
entry
• Arial bold when a selected
entry
• 12px
• clear blue colour, grey with
grain background
• underlined when mouse
scrolls over
• line spacing is 1.6 em.
Structure
This structure of the menu is
always preferred.
Syntax as follow:
• title of the group of links
• « : »
• link 1
• « | » in dark blue
• ...
• « | » in dark blue
• link n.
A return should be inserted for
each group of links.
CHARTE WEB EUROPARL.EU / mEnU (AREA B) / SUB-mEnU
EXPANDABLE SUB-MENU
STrUCTUrE oF THE SUB-MENU
17

treelike
sub-menu
heaDer
Header can include:
• a logo (optional)
• a title
• a button (optional).
Font used in the header is:
• Arial Bold
• corps 12 px
• white colour, blue
background.
This type of menu (as a third level of navigation) can only be
used if there is already a sub-menu.
It is visible once a section of the sub-menu is selected.
• 875px width.
• 25px spacing between sub-menu and content area.
It contains:
• a header
• the menu itself.
MeNU
This menu is displayed like the
expand/collapse menu. It is
structured:
• with groups of links
• and links.
Font used for the title of the
group of links is:
• Arial Bold
• 12 px
• dark blue colour, grey with
grain background.
Each link uses this font:
• Arial regular when a nonselected
entry
• Arial bold when a selected
entry
• 12px
• clear blue colour, grey with
grain background
• underlined when mouse
scrolls over
• line spacing is 1.6em.
Syntax as follow:
• title of the group of links
• « : »
• link 1
• « | » in dark blue
• ...
• « | » in dark blue
• link n.
A new line should be used for
each group of links.
CHARTE WEB EUROPARL.EU / MEnU (AREA B) / TREELikE sUB-MEnU
TrEELIkE SUB-MENU
18

seArch Form
This is a sub-menu link to the
main menu as a mandatory
item, and it is placed there
because it is considered a
navigation tool.
The form is structured into
two sections (search criteria
and display of the search
results).
Here are the rules of
proceeding:
• if no search criteria has been
selected, nothing is displayed
• when a filter is activated, the
number of results is displayed
and the «Show results» button
appears
• when the user clicks on
the button, the results list
is displayed in the main
content area and the button is
deactivated.
• button is reactived if a
criteria is changed in the
filters.
CHARTE WEB EUROPARL.EU / MEnU (AREA B) / sEARCH FORM
SEArCH ForM LINkED
To THE MAIN MENU
19

mAp
A map can link to the main
menu.
In this case, it allows the user
to browse through the main
content area.
One click on a geopraghic
zone refreshes the page.
MAP LINkED To THE MAIN MENU
CHARTE WEB EUROPARL.EU / mEnU (AREA B) / mAP
20

cONteNt
description oF
the AreA
(AREAS C&d)
Content area of Europarl websites are split into 2 parts:
• Main Content Area (ZCP - Area C)
• Contextual Information Area (ZIC - Area D)
MaiN cONteNt area
(Zcp)
The main content area displays
the main content of the page.
It is 650px width.
CHARTE WEB EUROPARL.EU / COnTEnT (AREAs C&D) / DEsCRiPTiOn OF THE AREA
cONtextUaL
iNfOrMatiON area (Zic)
It is 275px width and may
contains:
• elements for sharing
tools
• social media widgets
• relevant content link to the
ZCP
• information feedback coming
from Europarl galaxy link to
the content of the ZCP
• links relevant for the ZCP
• contacts details
• download links relevant for
the content of the ZCP.
This area (ZIC) is neither a navigation
area nor a promotional area.
It should not contain any promotional
«vignettes».
22

CoNTENT ArEAS
Zcp Zic
Main content
area
CHARTE WEB EUROPARL.EU / COnTEnT (AREAs C&D) / DEsCRiPTiOn OF THE AREA
contextual
information area
23

DetaiLS Of
the cOMMON
ELEMEnTs OF
ZCP And ZIC
titles &
sub-titles
Main titles are defined in the
chapters concerning ZCP and
ZIC.
It should be noted that, in
the structure of the pages,
respecting the various
levels of title is important
if not essential to enhance
natural SEO (Search Engine
Optimisation).
Themes and Categories :
• Arial bold, 11 px.
Sous-titre en réserve :
(Broadcast Time, Plenary
sitting, press release):
• Arial bold, 11 px
• dark blue background or
mauve
• white text.
Date, Hour, Sub-title :
• Arial regular, 11 px.
TITLE IN AN EDITorIAL ProDUCT
CHARTE WEB EUROPARL.EU / DETAiLs OF THE COMMOn ELEMEnTs OF ZCP AnD ZiC / TiTLEs & sUB-TiTLEs
Usage: the elements of the
date must be separated by
dashes to correspond to this
format: dd-mm-yyyy. Dates
and hours are separated by
the sequence « - ».
Lead :
• Arial bold, 12 px.
Committtee acronym :
• Arial bold, 10 px
• orange background
• white text.
Paragraph :
• Arial regular, 12 px.
Buttons text :
• Arial Regular, 11 px
• text : All caps
• clear blue colour.
24

imAGes
Concerning the management
of the pictures, only width will
be specified.
Height of images may vary,
depending on the image or on
the set of images used as well
on the context of use.
The rule is to respect the unit
proportion as stipulated at the
beginning of the document
and a coherent logic should
be followed throughout the
website.
Four formats of images are
allowed:
• Format A (ZCP 1):
Full frame (600px width).
Usage: in the editorial
products in the case of a
vertical picture format B
should apply.
• Format B (ZCP 2):
1/2 zone (300px).
• Format C - list (ZCP 3):
1/6 zone (100px).
• Format D - Alert :
125 px.
• Format E - 3 columns :
180 px.
• Format F (ZIC 1):
full frame.
These are generic formats
and do not take into account
the margin of containers with
borders. If a picture is the
illustration of a container, 25px
(1U) are removed from the
picture size whenever it is in
ZCP or ZIC.
CHARTE WEB EUROPARL.EU / DETAiLs OF THE COMMOn ELEMEnTs OF ZCP AnD ZiC / iMAGEs
format a
format b
format c
format D
format e
IMAGES ForMATS
format f
25

Anners
For the top pages of the
Europarl websites, it is
possible to use a graphical
element, such as a banner
directly under the menu. This
spans the width of the page,
covering the ZCP and ZIC
without the border.
Its width is 925px.
Typographic rules of websites
apply also for this kind of
graphical element.
In general this type of banner:
has a text area (that may have
a coloured background for
readability purposes)
may contain interactive
elements (slideshow, list, etc.).
icons
LiNk icONS
Link icons are available for
ZCP and ZIC.
LaNgUage icONS
There are three types of
language icons :
• non available language
• normal status
• mouse over / selected
language.
caLeNDar icONS
Two calendar icons are
available, one for opening, one
for closing.
LINk ICoNS
Link
multimedia link
PDF Link
Word Link
Expand menu
Collapse menu
CALENDAr ICoNS
CHARTE WEB EUROPARL.EU / DETAiLs OF THE COMMOn ELEMEnTs OF ZCP AnD ZiC / BAnnERs
BANNEr ovEr ZCP AND ZIC
BANNEr WITH A SLIDESHoW
SCroLLING BANNEr
LANGUAGE ICoNS
26

cAlendAr
Calendar is used in both ZCP
and ZIC, it can :
• be accessed via the buttons
described above
• be embedded directly in the
page in both areas.
buttons
Buttons are used in both
ZCP and ZIC, for instance in
container headers and footers.
Form buttons are described in
the relevant chapter.
FlAGs
Country flags are 25px width.
CHARTE WEB EUROPARL.EU / DETAiLs OF THE COMMOn ELEMEnTs OF ZCP AnD ZiC / CALEnDAR
CALENDAr WITH EvENTS
FLAGS
BUTToNS
27

ApplicAtion
Forms
Application forms are split into
logical steps (personal details,
address, etc. following W3C
recommendations) and must
be qualified.
Application forms have to
be filled in to proceed to the
next step, a breadcrumb is
visible in the form header,
with the number of steps and
is non-clickable. The current
step is highlighted with a blue
background.
To go to the next step of a
form, all mandatory fields of
the current step have to be
complete and without errors.
Buttons
Two buttons are placed to the
bottom of the form :
• a «Reset» button which
converts current form fields
back into their initial state
• a «Next step» button which
allows users to go to the next
step. The text of this button
can also be «Update» when
users change a form field
afterwards or «Finish» for the
last step.
Font used is :
• Arial regular
• 11 px
• uppercase
• white or blue text depending
on the background (blue for
«Reset», green for «Next step»
and white for «Edit».
Steps
Once complete, each step is
displayed under the header of
the application form with this
format :
• «Step» in the current
navigation language, followed
by the number of the step.
• name of the step in
the current language of
navigation.
The step can still be edited via
an «Edit» button placed beside
the title of the step.
This button re-opens the
selected step and allows
users to edit and check the
information.
CHARTE WEB EUROPARL.EU / DETAiLs OF THE COMMOn ELEMEnTs OF ZCP AnD ZiC / APPLiCATiOn FORMs
Non-validated information
must be stored in the form
before moving on to the next
step, unless the next step
depends on the choices made
in the editing stage. A pop-up
screen will specify that what
needs to be done before the
next step can be displayed.
The step pages should be
displayed in two columns as
far as possible.
However in the case of
multiline text fields (e.g.
comments, description, etc.)
in one column display is
recommended.
The field to be filled in has
a 2px clear blue border and
mandatory information is
indicated.
If a user forgot a mandatory
field or if a specific format
is not respected, an error
message is displayed beneath
the relevant field. If more
than one error is stated, the
messages appear one under
the other.
28

application form
header
Summary of a
finalised step in an
application form
Summary of the
current step
Display of radio
buttons in an
application form
Display in two
columns in an
application form
Display on one column
in an application form
Next steps in an
application form
APPLICATIoN ForM
CHARTE WEB EUROPARL.EU / DETAiLs OF THE COMMOn ELEMEnTs OF ZCP AnD ZiC / APPLiCATiOn FORMs
application form buttons
29

Multiple choice
In the case of multiple choice,
two options can be displayed
depending of the number of
choices the user has.
If the choices can be displayed
on one line, the following
elements appear :
• field label
• thin line under the label
• radio buttons.
If the choices cannot be
displayed on one line, the
following elements appear :
• field label
• selection controllers
• thin border around the block.
After the last step is
validated, a confirmation
page is displayed, including a
summary of all the steps and a
confirmation message.
«Edit» buttons are then
replaced by icons meaning
step is validated.
An action button whose text
is customisable is displayed at
the bottom of the form.
calendar
Display of a multiple
choice container in an
application form
CHARTE WEB EUROPARL.EU / DETAiLs OF THE COMMOn ELEMEnTs OF ZCP AnD ZiC / APPLiCATiOn FORMs
DISPLAY oF A CoNFIrMATIoN MESSAGE IN AN APPLICATIoN ForM
30

DISPLAY oF A CoNFIrMATIoN MESSAGE IN AN APPLICATIoN ForM
CHARTE WEB EUROPARL.EU / DETAiLs OF THE COMMOn ELEMEnTs OF ZCP AnD ZiC / APPLiCATiOn FORMs
31

Zcp sPECiFiC
eLeMeNtS
breAkdown oF
the elements
titLeS aND SUb-titLeS
The different elements should
follow these rules :
Type of title ZCP1 :
• Arial bold / 24 px.
In the case of an
“Essential“ completing
it (e.g. an Article)
the title and subtitle
publication area
shrinks to 400px (and
not 650px anymore),
25px margin included.
Type of title ZCP2 :
• Arial bold / 20 px.
Type of title ZCP3 :
• Arial bold / 18 px.
Type of title ZCP4 :
• Arial bold / 15 px.
Type of title ZCP5 :
• Arial bold / 13 px.
CHARTE WEB EUROPARL.EU / ZCP sPECiFiC ELEMEnTs / BREAkDOWn OF THE ELEMEnTs
Title ZCP1
Title ZCP2
Title ZCP3
Title ZCP4
Title ZCP5
32

page heaDer
A page header, usually used in
product pages, opens the page
with an H title.
It may be accompanied with
the following options:
• committee acronym
• reserve sub-title
• theme
• date
• etc.
A line is automatically inserted
below with the usual 25px
(1U) margin with the content,
except if followed by a format
A picture.
eSSeNtiaLS
Essentials are contained in a
frame of 250px, beside the H1
title of the product page.
This kind of element only
belongs to an article of a
product page. This allows you
to promote the important
point of the article.
The font used for each point is:
• Arial regular
• 11px
• dark blue colour
• line space is 12px.
CHARTE WEB EUROPARL.EU / ZCP sPECiFiC ELEMEnTs / BREAkDOWn OF THE ELEMEnTs
PAGE HEADEr
ESSENTIALS IN
AN EDITorIAL ProDUCT
450 px
650 px
33

cONteNt eLeMeNtS
Content elements can have
the following items :
• title
• lead (chapo)
• theme
• date / location
• hour
• photos
• paragraphs
• lists : with or without bullets,
with or without H3
• links
...
They are part of:
• a box without border
• a box with border,
expandable or not
• lists.
fUrther iNfOrMatiON
This block with grey
background contains one
or more links related to
preceding content.
The list contains link icons, but
here their size is 75% of the
original size.
CHARTE WEB EUROPARL.EU / ZCP sPECiFiC ELEMEnTs / BREAkDOWn OF THE ELEMEnTs
CoNTENT ELEMENTS «FUrTHEr INForMATIoN» ICoNS
34

cONtaiNerS
withOUt bOrDer
A whole group of information
with a floating appearance
is called a Container without
border.
These are used for :
• editorial products
• some containers of the top
• pages
• intro texts
...
cONtaiNerS with
bOrDerS
A container with borders can
be composed of the following
elements :
• header
• filter
• sub-menu area
• content
• pagination
• footer
Only the «Content» element is
mandatory.
Margin between frame and
the elements is half a unit
(12px).
Header
Two types of headers can be
found in the ZCP :
• with tabs
• without tabs (simple title).
The font used is (title H3) :
• Arial Bold
• 15 px
• dark blue colour
• grey background with grain.
When there are tabs :
• the selected tab is displayed
with a white background
• titles of the tabs have a 25px
(1U) space on each side.
CHARTE WEB EUROPARL.EU / ZCP sPECiFiC ELEMEnTs / BREAkDOWn OF THE ELEMEnTs
EXAMPLES oF HEADErS oF A
CoNTAINEr WITH BorDErS
FroM ZCP
EXAMPLE oF FILTEr oF A CoNTAINEr
WITH BorDEr FroM ZCP
35

FIlter
This allows you to filter the
elements of the content area
and has a grey background.
Sub-menu area
The sub-menu area exists only
when the container has tabs in
the header.
Tabs are superior to submenus
in the information
hierarchy. When there is only
one level, therefore tabs are
used.
This area is split into 2
columns. The height of each is
based on margins of 1U (25px).
The font used is:
• Arial regular, bold for the
element displayed in the
«content».
• 12px
• dark blue colour.
Each column ends with a miniline.
An H4 title can be placed 2
units below (50px), followed
or not by an icon and an RSS
link.
content
Two types of separator can be
placed between two elements
of content :
• line separator
• mini-line separator.
It is possible that elements of
content are expandable.
In this case, the first element
is always expanded and
illustrated by the pictogram
« - » on the left side.
The other containers are
closed when opening the
page and illustrated by the
pictogram « + » on the left
side.
Depending on the length of
the content there is the choice
to:
close the opened container
when opening antoher one
open all containers.
pagInatIon
Pagination appears when more
than 10 items are listed in the
container. This pagination is
the same as the main content
area without the «Previous»
and «Next» buttons.
Footer
Footer is a link to :
• the complete list
• the full program
• the pages list of the content
of the container.
CHARTE WEB EUROPARL.EU / ZCP sPECiFiC ELEMEnTs / BREAkDOWn OF THE ELEMEnTs
36

EXAMPLES oF EXPANDABLE LIST
CHARTE WEB EUROPARL.EU / ZCP sPECiFiC ELEMEnTs / BREAkDOWn OF THE ELEMEnTs
37

pagiNatiON
Pagination is common to every
container with or without
borders that contain more
than 10 items.
It displays in two different
ways depending on whether
the pagination covers :
• 11 pages or less
• more than 11 pages.
contaIner oF 11 pageS
or leSS
The following elements are
displayed in the navigation bar
of the intermediate pages :
• «Previous page» button
in the current navigation
language from the second
page.
• clickable numbers of the
previous and next pages from
the current page leading to
the corresponding pages.
Number of the current page is
non clickable.
• «Next page» button in the
current navigation language,
always present except in the
last page.
more tHan 11 pageS
contaIner
Three cases are foreseen :
• pagination of the first
6 pages
• intermediate navigation
• pagination of the last 6
pages.
Pagination of the first 6
pages works as follow :
• «Previous page» button
in the current navigation
language from the second
page.
• number of the 9 first pages
leading to the corresponding
pages. Number of the current
page is non clickable.
• «...»
• number of the last page
leading to the corresponding
page.
• «Next page» button in the
current navigation language
leading to the corresponding
page.
Pagination of the
intermediate pages works as
follow :
• «Previous page» button
in the current navigation
language.
• number of the first page
leading to that page.
• «...»
• number of the 3 previous
pages before the current page
leading to the corresponding
pages.
• number of the current page,
non clickable.
• number of the 3 next pages
after the current page leading
to the corresponding pages.
• «...»
• number of the last page
leading to that page.
• «Next page» button in the
current navigation language
leading to that page.
Pagination of the last 6
pages works as follows :
• «Previous page» button
in the current navigation
language.
• number of the first page,
leading to that page.
• «...»
• number of the 9 last pages,
leading to the corresponding
pages. Number of the current
page is non clickable.
• «Next page» button in the
current navigation language,
always present except in the
last page.
CHARTE WEB EUROPARL.EU / ZCP sPECiFiC ELEMEnTs / BREAkDOWn OF THE ELEMEnTs
PAGINATIoN oF MorE THAN 11 PAGES
INTErMEDIATE NAvIGATIoN oF MorE THAN 11 PAGES
END oF PAGINATIoN oF MorE THAN 11 PAGES
38

MapS
Two maps are available :
• europe map
• world map.
These two maps are for
illustrative purpose only and
allow users to browse through
the main content.
CHARTE WEB EUROPARL.EU / ZCP sPECiFiC ELEMEnTs / BREAkDOWn OF THE ELEMEnTs
EUroPE MAP For THE «MEPS» PLANET
WorLD MAP For THE «DELEGATIoNS» PLANET
39

exAmples oF use
EXAMPLE oF ProDUCT EXAMPLE oF LIST
CHARTE WEB EUROPARL.EU / ZCP sPECiFiC ELEMEnTs / ExAMPLEs OF UsE
40

EXAMPLE oF TECHNICAL ANNoUNCEMENT
EXAMPLE oF A CoNTAINEr WITH TABS
CHARTE WEB EUROPARL.EU / ZCP sPECiFiC ELEMEnTs / ExAMPLEs OF UsE
EXAMPLE oF AN EXPANDABLE ELEMENT IN A CoNTAINEr WITH BorDErS
41

Zic
SPECIFIC
eLeMeNtS
breAkdown oF
the elements
titLeS aND SUb-titLeS
The various elements must
follow these rules :
ZIC1 title :
• Arial bold
• body 18 px
ZIC2 title :
• Arial bold
• body 14 px
ZIC3 title :
• Arial bold
• body 12 px.
icONS
Three types of additional icons
are available :
• social media icons
• link icons
• contact icons
• share icons.
cONteNt eLeMeNtS
Content elements can contain
the following components :
• titles
• lead (chapo)
• theme
• date / location
• hour
• pictures
• paragraph
• lists: with ot without bullets,
with or without H3
• links.
They can be displayed in:
• a box without a border
• a box with a border,
expandable or not.
cONtaiNerS withOUt
bOrDer
Each group of information
appearing in a floating format is
a container without border.
There are two types of this kind
of container :
• text areas associated with
pictures (e.g. Top page of News)
• illustrative texts or pictures
• when a ZIC element is beside
a container with a border in
the ZCP (e.g. Parliamentary
committees) to avoid distracting
vertical lines.
CHARTE WEB EUROPARL.EU / ZiC sPECiFiC ELEMEnTs / BREAkDOWn OF THE ELEMEnTs
“CoNTACTS” CoNTAINEr
«SHArE» CoNTAINEr
42

This container (without 25
px margin) can contain the
following elements :
Image / Video / Slideshow
• title H3
• lead (chapo)
• text
• links.
cONtaiNer with
bOrDer
A container with border
can contain the following
elements :
• header
• filter
• content
• pagination
• footer.
Only the «content» element is
mandatory.
Margin between the frame
and the elements is 1U (25px).
Header
A header is composed of :
• a dark blue or grey
background
• a blue H3 title with grey,
white or blue background
• an optional sub-title.
Line spacing is 16e.m.
FIlter
A filter allows the user to
limit the number of elements
displayed in the content area.
Where a filter is present,
the header has a dark blue
background.
content
Two types of separators can
be placed between different
elements of content :
• line separator
• mini-line separator.
Like in the ZCP, it is possible
the elements of a content are
expandable.
In that, the first element is
always expanded along with
the « - » pictogram on the left.
Meanwhile the other elements
are collapsed along wtih the
« + » pictogram on the left.
Depending on the length of
the content there is the choice
to:
• close the opened element
when opening another one
• open all elements.
pagInatIon
Pagination appears as soon
as more than 10 elements
are listed in the container.
Pagination is the same as
in the ZCP without the
«Previous» and «Next»
buttons.
Pagination cannot go further
than 3 elements, the other
ones are therefore accessible
via the footer.
Footer
The footer is a link to:
• a complete liste
• a complete program
• a list page with the whole
content of the container.
CHARTE WEB EUROPARL.EU / ZiC sPECiFiC ELEMEnTs / BREAkDOWn OF THE ELEMEnTs
CoMPoNENTS ELEMENTS IN A
CoNTAINEr WITH BorDEr
IN THE ZIC
EXAMPLES oF HEADErS IN A
CoNTAINEr WITH BorDEr IN THE ZIC
EXAMPLE oF SUB-HEADEr IN A
CoNTAINEr WITH BorDEr
43

exAmples
oF use
The purpose of this chapter is
to illustrate, via examples of
the Europarl galaxy websites,
how the previously defined
components can be used.
“FurtHer InFormatIon“
contaIner
This container can be found in
the editorial products of the
news website, for example.
This container displays the
following elements :
• a blue H3 title in a header
with grey background
• two types of different
contents separated by a line
• links (green multimedia icon,
or blue for other content)
separated by a mini-line.
«contactS» contaIner
This type of container is
displayed on a MEP details
page of the «MEPs» section.
This container is composed of :
• a blue H3 title in a header
with grey background
• 3 sections separated with
mini-lines.
«Fact box» contaIner
This container displays the
following elements :
• a blue H3 title in a header
with grey background
• 3 sections separated with
mini-lines.
«SocIal medIa» contaIner
This container associates
a page or a website to the
relevant social media. It can
contain 1 or more links to
various social media websites.
This container has neither
header nor footer; its title is in
bold at the top of the content,
and each element is separated
by a mini-line.
CHARTE WEB EUROPARL.EU / ZiC sPECiFiC ELEMEnTs / ExAMPLEs OF UsE
MEP’S “CoNTACTS” CoNTAINEr
“SoCIAL MEDIA” CoNTAINEr
“FACT BoX” CoNTAINEr
“FUrTHEr INForMATIoN“
CoNTAINEr
44

«SHare» contaIner
This container is displayed
on every page, with various
versions going from 2 to 4
elements: PDF version, Send
to a friend and Get a short
URL being optional.
«preSS releaSeS» contaIner
This container is on the
«News» website.
This container displays the
following elements :
• a header with a dark blue
background with a white title
on three lines max.
• 2 content sections separated
• by a line, each displaying :
• a dark blue link
• a theme
• date and hour of publication.
«preSS conFerenceS»
contaIner
This container is displayed on
the «News» website.
This container displays the
following elements :
• a blue H3 title and blue subtitle
in a header with a grey
background
• two content sections
seperated by a line, each
displaying :
- a dark blue link
- a time of broadcast
- a location
• a footer linking to the agenda
page.
CHARTE WEB EUROPARL.EU / ZiC sPECiFiC ELEMEnTs / ExAMPLEs OF UsE
“PrESS rELEASES” CoNTAINEr
“SHArE” CoNTAINEr
4 ELEMENTS
“SHArE” CoNTAINEr
2 ELEMENTS
“PrESS CoNFErENCES”
CoNTAINEr
45

fOOter
The Europarl galaxy website
footer is structured around 4
mandatory sections :
• logo and general title
• legal notice
• links related to the current
website
• sitemap of the 7 main
websites of the Europarl
galaxy.
(AREAs E&F)
loGo And
GenerAl title
The logo and general title
work the same way as in the
header.
The logo leads the user to the
Europarl portal page.
The following elements are
displayed below the logo :
• «European Parliament»
label in the current navigation
language
• « / »
• general title of the website
in the current navigation
language.
«European Parliament» label
links to the Europarl portal
page.
The general title of the
website links to the top page
of the website.
For example :
• «European Parliament /
Visiting» for the English
version of the visitors’ website
• «Parlement européen /
Actualité» for the French
version of the «News»
website.
Font used is :
• Arial bold
• 20 px
• blue colour.
CHARTE WEB EUROPARL.EU / FOOTER (AREAs E&F) / LOGO AnD GEnERAL TiTLE
FooTEr
46

leGAl notice
This area displays a group of
links leading users to a set of
pages placed under the portal
page.
links relAted
to the current
website
This area displays links related
to the website displayed and
its general content. It is not
specifically related to the
section in which the user finds
him/herself.
Links may vary depending
on the linguistic version of
the website (e.g. links to the
Information Offices related
to the current navigation
language) but it is always
leading to a website.
Links alone or groups of links
can be proposed.
Structure of a group of links :
• non-clickable title
• Arial bold, 12px, dark blue
• Link
• Arial regular, 12px, clear blue,
separated by « | »
• line spacing 15px between
menus and links
• margin 1U between blocks.
Link alone :
• clickable title
• Arial bold, 12px, dark blue
• line spacing 15px between
menus and links
• margin 1U between blocks.
CHARTE WEB EUROPARL.EU / FOOTER (AREAs E&F) / LEGAL nOTiCE
Legal notice on the footer
Links related to the current
website displayed in the
footer
Links to the main websites
displayed in the footer
47

sitemAp oF
the europArl
GAlAxy 7 mAin
websites
This area is invariable and
displays the first level of
menus of the Europarl galaxy’s
7 main websites. Added is the
A-to-Z link leading to the full
list of Europarl websites.
CHARTE WEB EUROPARL.EU / FOOTER (AREAs E&F) / siTEMAP OF THE EUROPARL GALAxy 7 MAin WEBsiTEs
48

EUROPARL WEB MASTER
75, RUE MONTOYER
BRUXELLES

CHARTE WEB EUROPARL.EU / ZiC / CHARTE WEB EUROPARL.EU / FOOTER (AREAs E&F) / siTEMAP OF THE EUROPARL GALAxy 7 MAin WEBsiTEs 50

EUROPARL WEB MASTER
75, RUE MONTOYER
BRUXELLES