EUROPARLGRAPhic chARtER

EUROPEAN PARLiAMENtDG cOMM - MEDiA DiREctORAtE

EUROPARL WEB MAStER UNit2015

EUROPARL.EUROPA.EU

2

I N D E X

3 I N T R O D U C T I O N

4 G R A P H I C C H A R T E R4 C O L O U R S4 F O N T S

5 C O M P O S I T I O N5 G R I D C O N C E P T6 A R E A S

7 H E A D E R ( A R E A A )7 L A N G U A G E D R O P D O W N8 E U R O P A R L m E N U9 L O G O , G E N E R A L T I T L E O F T h E S I T E

1 1 M E N U ( A R E A B )11 m A I N m E N U11 D R O P D O W N m E N U O F C O m m I T T E E S S I T E1 3 S E A R C h F O R m1 3 m A P

1 4 C O N T E N T ( A R E A S C A N D D )1 4 D E S C R I P T I O N O F A R E A S1 4 m A I N C O N T E N T A R E A ( m C A )1 4 C O N T E x T U A L I N F O R m A T I O N A R E A ( C I A )

1 5 B R E A K D O W N O f C O N T E N T E l E M E N T S 1 6 I m A G E S2 0 C A L E N D A R2 0 F L A G S2 0 B U T T O N S2 1 A P P L I C A T I O N F O R m S

2 4 M C A - S P E C I f I C E l E M E N T S2 4 B R E A k D O W N O F E L E m E N T S2 9 P A G I N A T I O N3 0 m A P S3 1 E x A m P L E S O F U S E

3 3 C I A - S P E C I f I C E l E M E N T S3 3 B R E A k D O W N O F E L E m E N T S3 4 C O N T A I N E R S W I T h B O R D E R S3 5 E x A m P L E S O F U S E

3 7 f O O T E R ( A R E A S E A N D f )3 7 I N T R O D U C T I O N3 7 L O G O A N D G E N E R A L T I T L E3 8 L E G A L N O T I C E3 8 L I N k S R E L A T E D T O C U R R E N T S I T E3 8 S I T E m A P O F T h E E I G h T m A I N S E C T I O N S O F E U R O P A R L

3

I N T R O D U C T I O N

On the main menu, the site is divided into the following sections:• News• mEPs• About Parliament• Plenary• Committees• Delegations• At your service• EP TV

This document is based on an analysis of these sections, and specifically• their structure• the grid used to compose the pages• their graphical makeup• the various elements of which they are comprised

4

G R A P H I C C H A R T E R

C O L O U R s

Europarl publishes in black on white to enhance readability.Of course, this is only a general principle. The backgrounds used are mostly bright and the fonts generally dark, with a minimum contrast of 500 in line with the contrast concept defined by the W3C in the WCAG 2.0 AA WCAG 2.0 AA, which all Europarl publications are required to follow.

AUTHORISED COlOURS

S E C T I O N S

• #BA76C9 (mauve) News

• #D15D00 (Orange) Plenary, Committees,Delegations

• #E09707 (Yellow) mEPs

• #B8DD22 (Green) EP TV

• # 2DA2FF (Blue) About Parliament, At your service

f O N T E l E M E N T S

• #D9DDE1 (Dark grey) Thin lines

B A C K G R O U N D S

• #FFFFFF (White) e.g. Container with border background

• #FBFBFB (Light grey) e.g. General background mCA

• #F4F4F4 (medium grey)e.g. Background footer, Button hover

• #EDEDED (Grey) e.g. Selected menu,General footer background, Calendar hover

• #13334D (Dark blue) e.g. mCA header container

f O N T S

• #363636 (Charcoal grey) e.g. Texts

• #13334D (Dark blue) e.g. Content titles

• #195B92 (Blue) e.g. Subjects, Links

F O N T s

The fonts used are:• Arial regular• Arial bold• Arial italic

The font size is mostly fixed and based on structural tags, while the colours are determined by the context in which they are used.

Thus a typical level-3 title in the main Content Area (mCA3) will be in:• Arial bold• corps 18 px

A typical level-3 title in the Contextual Information Area (CIA3) will be in:• Arial bold• corps 12 px

5

C O M P O S I T I O N

Europarl sites are based on a grid principle and made up of different areas.

G R I D C O N C E P T

The Europarl grid is based on units of 25px and 12px.

This determines the size of:• spaces• margins• separations between areas• etc.

The sizes of images and text blocks are in most cases multiples of these units.

Main menu Main menu Main menu

Texts tabled Ordres du jour Reports Agendas Debates

Title 1Title 2 / Digital single market – committee chairs welcome proposalFree movements of goods - 19-07-2010 - 11:18

The proposed Digital Single Market strategy is needed to build trust in the online world, boost growth and protect the rights of citizens, creators and companies. These were among the first reactions from the chairs of the three committees that will work intensively on today’s Commission proposal. This afternoon and tomorrow morning, the Commissioners responsible will visit Parliament to discuss the proposal with MEPs.

Title 3 / MEPs call for a strong Paris deal on carbon

Title 3 / MEPs close deal with Council on first ever EU rules on cybersecurityInformation society - 19-07-2010 - 11:18

markets, aviation and shippingEnvironment - 19-07-2010 - 11:18

Title 3 / TTIP documentsAll Members of the European Parliament will have access to all categories of confidential documents

ToolsLegislative ObservatoryAudiovisual websiteEbS

Institutions européennesEuropa.eu l Council l Presidency of the councilCourt of auditors l European CommissionEuropean Central Bank l European Investment Bank

NewsNewsroom Top storiesContacts and services

About ParliamentHome Powers and procedureOrganisation and rulesHuman rights In the past

Title 3 / Tax RullingsPlenary vote this evening, says that it will run for six months.

MEPsSearch MEPs Lists Assistants

PlenaryPlenary Sitting Ordinary legislative procedureBudgetary procedure

CommitteesHome Meetings Documents Events

DélégationsDelegations Calendar Archives

EP TVHome Meetings Channels ThemesAbout EuroparlTV

A-ZComplete website list

< 37 U >

<11 U>

News MEPs About Parliament Plenary Committees Delegations At your service EP TV More

9 2 5 p x

6 5 0 p x 2 7 5 p xUnit 1 = 25pxUnit 2 = 12px

European ParliamentPlanet

European ParliamentPlanet

6

A R E A s

All Europarl pages comprise the following areas:

• (A) header• (B) menu• (C) main content = mCA• (D) secondary/contextual information= CIA• (E) specific footer• (F) common footer

Some areas are common (A except banner and F), while some are specific to each site (B, C, D and E).

To comply with the graphic charter every site has to follow this composition.

AB

C D

E

F

7

H E A D E R ( A R E A A )

The header (and general footer) on Europarl sites links to all sections of Europarl.

most of the elements are common to every site (language dropdown, Europarl menu, European Parliament logo, search tool).

Logo and title of sitemenu Search boxSub-menu

Language dropdown Europarl menuL A N G U A G E D R O P D O W N

A dropdown list containing the 24 official languages of the European Union in protocol order. Each language is displayed as follows:

In open mode:• two-letter language code• ‘ - ‘• name of the language in the language concerned

In closed mode:• two-letter language code

The current navigation language is displayed by default. Choosing another language from the dropdown box reloads the page in the chosen language.

The following font is used:• Arial regular• corps 11 px• dark blue #13334D on grey backround #DCE1E4

DROPDOWN lIST Of lANGUAGES

8

E U R O P A R L M E N U

This menu contains:• a list of the main sections of the site• a menu entry ‘more’, in the navigation language.

The eight sections, in order, are:• News• About Parliament• mEPs• Plenary• Committees• Delegations• At your service• EP TV

The following font is used:• Arial bold• body 11 px• colour: white on blue background (#363636) with 1px shadow effect

The menu entry ‘more’ displays a superimposed list of the sites in the specific footer, plus a link to a list of all Europarl sites.

Click on the ‘more’ link to display the list. It disappears when you click outside the superimposed area.

EUROPARl MENU

menu entry «+»

9

L O G O , G E N E R A L T I T L E O F T H E s I T E

l O G O

The logo links to the Europarl portal page.Its size is proportional to the size of the EU flag, which must be equal to two units (50 px).

G E N E R A l T I T l E O f T H E S I T E

The logo has the following elements:• a vertical separation bar• the title ‘European Parliament’ in the navigation language• a hard return• the general title of the site in the navigation language in Arial black(see example opposite)The title ‘European Parliament’ links to the Europarl portal page.The general title of the site links to the site’s home page.

For the European Parliament:

The font used is:• Arial• body 20 px• colour white

For the title of the site:

The font used is:• Arial black• body 20 px• colour white

European ParliamentVisiting

1 0

P R O M O T I O N A R E A

The purpose of this area is to highlight content on other sites.For example:• Parliament’s latest Facebook posts• the latest tweets on Parliament’s Twitter account in the navigation language• the latest EuroparlTV videos.

C O l O U R H I G H l I G H T

This coloured line determines the section by means of contrasting colour (see Authorised colours for Europarl sites) and uses the same colours as were previously used in the information areas on Europarl.This only applies to the main sections.

S E A R C H T O O l

The search tool searches within the current site.

It might not appear on shallow sites.

The text ‘ Search on “name_of_site” ’ in the navigation language is displayed in the search field.

The font used is:• Arial regular• corps 12 px• colour: medium grey• light grey background

A search is launched by clicking the magnifier pictogram.

HEADER WITH BANNER BACKGROUND

HEADER WITH PROMOTION AREA

HEADER WITH PROPRIETORY lOGO

COlOUR HIGHlIGHTING Of SITE

SEARCH TOOlON THE PRESIDENT’S SITE

11

M E N U ( Z O N E B )

Three menu levels are available:• main menu• sub-menu (static or scrolling)• the third menu level (tree structure) is only used in the Delegations section.

In addition, a search tool may be available in the main menu.Each type depends on the previous type and should be hierarchically inferior to it.The choice of the menu depends on the information depth of the site in which it is used, keeping in mind that information should be accessible in a minimum of clicks.

M A I N M E N U

The font used is:• Arial bold• body 12 px• colour: dark blue, white background

As soon as a menu element has been selected its background changes from dark grey to white.While menu levels are optional, each site is required to display the main menu.The line spacing used is 12 px.

D R O P D O W N M E N U O F C O M M I T T E E s s I T E

This is an exception on Europarl.In order to speed up and simplify access to the various committees, a dropdown menu has been added to the header, under the title of the site.

Each committee name is preceded by its official abbreviation in an orange (#D15D00) box.

DROPDOWN MENU Of THE ‘COMMITTEES’ SITE

DROPDOWN MENU AND SUB-MENU

1 2

s U B - M E N U

This menu depends on the main menu. It is only visible when a main menu element is selected.This sub-menu has the same grey background (with grain) as the main menu in the selected mode.It comprises a single line. When the number of entries exceeds the total width of the menu area, the sub-menu may extend over more than one line* or may become scrollable.

f O N T

The font used for the title of a group of links is:• Arial bold• body 12 px• colour: blue #0086CF, white background

The font used for each link is:• Arial regular for a non-selected menu entry• Arial bold for a selected menu entry • body 12 px • colour: dark blue (#195B92), grey background • underlined when mouse over *The line spacing used is 1.6 em

S T R U C T U R E

The following menu structure is always preferred:• link 1• ‘ | ‘ in grey• ....• ‘ | ‘ in grey• link 2

STATIC SUB-MENU

SCROllING SUB-MENU

SUB-MENU WITH NON-ClICKABlE HEADER

1 3

s E A R C H F O R M

This is contained in the sub-menu area but must be linked to a main menu element. It functions like a page navigation element.

The form is structured into two sections (search criteria and results display).

The following rules are applied:• if no search criteria have 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 the button, the results list is displayed in the mCA and the button is deactivated. The button is reactivated if a filter criterion is changed.

SEARCH fORM lINKED TO THE MAIN MENU

M A P

A map may be linked to the main menu.In this case, the user can browse in the main content area.One click on a geographic area refreshes the area.

MAP lINKED TO THE MAIN MENU

1 4

C O N T E N T ( A R E A S C A N D D )

D E s C R I P T I O N O F A R E A s

The content area of the Europarl site is split into two parts:• the main Content Area (mCA - Area C)• the Contextual Information Area (CIA - Area D)

M A I N C O N T E N T A R E A( M C A )

The main content area displays the main content of the page.It is 650 px wide.

C O N T E X T U A l I N f O R M A T I O N A R E A ( C I A )

It is 275 px wideand must contain:• share elements• social media widgets on the home page• tools• social media modules • content relating to the mCA• feedback on elements from Europarl sites relating to the mCA• links relating to the mCA• contacts• download boxes relating to the mCA.

The CIA is not a browsing area and must not contain any promotional clips.

AB

C D

E

F

CIAMCA

1 5

B R E A K D O W NO F C O N T E N T E L E M E N T S

T I T L E s

The main titles are defined in the chapters on the mCA and the CIA.

Note that, as regards page composition, it is essential to comply with the different title levels so as to promote the natural referencing of pages.

Title of articles:Title in an article list• Arial bold, body 14 px, #13334DTitle in an article page• Arial bold, body 17 px, #13334D

Themes and categories:• Arial bold, body 11 px, #195B92

Reserve sub-title:Broadcast time, plenary sitting, press release• Arial bold, body 11 px• blue #195B92 or mauve #BA76C9 background • white text.

Date, Time, sub-title:• Arial regular, body 11 px.Conditions of use:the date elements must be separated by dashes following the format dd-mm-yyyy. Dates and times are separated by the sequence ‘ - ‘.

Lead :• Arial bold, body 12 px.

Committee abbreviation:• Arial bold, corps 10 px• fond orange #D15D00• texte blanc.

Paragraph:• Arial regular, body 12 px.

Text of buttons:• Arial Regular, body 11 px• couleur: bleu #195B92

1 6

I M A G E s

As far as the management of images is concerned, only the width is specified.

The height of the images may vary, depending on the image or set of images used and on the context.

The grid unit measurements specified above must be applied and consistency must be maintained across the entire site.

There are five basic image formats:

• format A (MCA+CIA)Full area (width 925 px). Comparable to a banner (static or scrolling). When static may be clickable, and must be clickable when scrolling.> see page 19 on banners

• format B (MCA1) : Full area (width 600 px).

A

B

1 7

E

D

C• format C (MCA2) : ½ area (300 px). • format D - (CIA): 225 px • format E - (MCA4) 125 px. Conditions of use: in slideshows

These formats are generic and do not take into account the margins of containers with borders. If a photo is used as an illustration in a container it will need to be reduced in size by 25 px.

But if the photo is in a box with a border then only 24 px (25 px - 1 px border) will need to be cut.

1 8

B A N N E R s

For the top pages of the various Europarl sites, banner-type graphical elements can be used directly beneath the menu and spanning the width of the central area, covering the mCA and the CIA without the border.It is therefore 925 px wide.

The site’s typographical rules must be applied to these types of graphical elements.

In general, this type of banner:• has a text area (which may have a coloured background to aid readability)• may contain interactive elements (slideshows, lists, etc.)• may be clickable when static, and must be clickable when scrolling.

SIMPlE BANNER (ClICKABlE)

BANNER WITH ClICKABlE AREA

BANNER WITH ClICKABlE SCROllING AREA

1 9

I C O N s

l I N K I C O N SLink icons are available in the mCA and the CIA.

l A N G U A G E I C O N SThe three types of language icon are:• language unavailable• normal status• mouse over / language selected.

C A l E N D A R I C O N STwo calendar icons are available, one for opening and one for closing.

lANGUAGE ICONS

lINK ICONS

Link

Multimedia link

Link to a pdf

Link to a Word document

Opening of an expandable menu

Closing of an expandable menu

CAlENDAR ICONS

2 0

C A L E N D A R

The calendar is used in both the mCA and the CIA. It can be:• accessed via the buttons described above• embedded directly in either of the two areas.

F L A G s

Country flags are 25 px wide.

B U T T O N s

Buttons can be used in both the mCA and the CIA, for instance in container headers and footers.Form buttons are described in the relevant chapter.

Colours:Blue: secondary actionsGreen: call to action / validation

CAlENDAR WITH ElEMENTS

BUTTONS

flAGS

2 1

A P P L I C A T I O N F O R M s

Application forms are split into logical steps (personal details, address, etc., following W3C recommendations) and must be correctly approved.

Each step in an application form has 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 in the current step have to be completed without error.

Buttons Each form will have at least two buttons at the bottom:• a ‘Reset’ button to return the current form fields to their initial state• a ‘Next step’ button to go to the next step. The text of this button can also change when a user amends a completed form field or reaches the final step.

steps Once complete, each step is displayed under the header of the application form in the following format :• ‘step’ in the navigation language, followed by the number of the step• the name of the step in the navigation language

The step can still be edited via an ‘Edit’ button next to the title of the step.

This button re-opens the selected step so that the information in it can be edited and checked.

Non-validated information in the current step must be stored in the form before moving on to the next step, unless the next steps depend on the choices made in the edited step.A pop-up will specify that the information needs to be re-entered before the editing 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.) a single-column display is recommended.

CONfIRMATION Of STEPS IN THE fORM

2 2

information on the

current step

information on

following steps

Summary of

finalised steps

Summary of

current step

two-column display

in an application form

Radio buttons

in an application form

Single-column display

in an application form

Buttons

in an application form

BREAKDOWN Of ElEMENTS IN THE fORM

2 3

The field being completed has a 2 px light blue border and the mandatory information is indicated.

If a user forgets a mandatory field or if the specified format is not used, an error message is displayed beneath the relevant field. Where there is more than one error, the messages appear one under the other.

Multiple choiceWhere information is to be entered using multiple choice, there are two options, depending on the number of alternatives proposed.

If the choices can be displayed on one line, the following elements are shown:• field description• thin line under the description• radio buttons.

If the choices cannot be displayed on one line, the following elements are shown:• field description• selection controls• thin surrounding border.

After the last step is validated, a confirmation page is displayed, which contains a summary of all the steps and a confirmation message. The ‘Edit’ buttons are then replaced by images indicating that the step has been validated.

An action button with customisable text is displayed at the bottom of the form page.

CONfIRMATION PAGE

ERROR MESSAGE IN THE fORM

CAlENDAR IN THE fORM

2 4

B R E A K D O W N O F E L E M E N T s

T I T l E S A N D S U B - T I T l E S

The various elements must comply with the following rules:

MCA1 title:• Arial bold• body 24 px.

MCA2 title:• Arial bold• body 20 px.

MCA3 title:• Arial bold• body 18 px.

MCA4 title:• Arial bold• body 15 px.

MCA5 title:• Arial bold• body 13 px.

M C A - S P E C I F I C E L E M E N T S

2 5

H E A D E R

A page header, usually used for product pages, opens the page with an h1 title.It may optionally be accompanied by the following information:• committee abbreviation• reserve sub-title• theme• date• etc.

A line is automatically inserted below with the standard 25 px margin separating it from the content, except if followed by an A format picture.

HEADER

650 px

2 6

C O N T E N T E l E M E N T S

Content elements may contain the following items:• titles• lead• theme• date / place• time• photos• paragraphs• lists: with or without bullets, with or without h3• links• ‘Read more’•...

They may be displayed in:• a box without borders• a box with borders, expandable or not• lists.

‘ R E A D M O R E ’

Articles in a list are presented by means of a short text as a catch line followed by an invitation to ‘read more’.The font used is:• Arial regular• body 12 px.• colour : #195B92

CONTENT ElEMENTS

ICONS IN THE ‘fURTHER INfORMATION’ BlOCK

‘READ MORE’ OPTION IN THE SUMMARY Of AN ARTIClE

f U R T H E R I N f O R M A T I O N

This block with a grey background provides one or more links relating to the content area which it follows.The list contains the link icons described before, but here they are 75% of the size of the original icons.

2 7

C O N T A I N E R SW I T H O U T B O R D E R S

Any floating information group is called a container without borders.Such containers are used for:• editorial products• some top pages• introductory texts• etc.

C O N T A I N E R SW I T H B O R D E R S

A container with borders may contain the following elements:• header• filter• sub-menu area• content• pagination• footer

Only the ‘content’ element is mandatory.

The margin between the frame and the elements is half a unit (12 px).

Header

Two types of header can be foundin the mCA:• with tabs• without tabs (simple title).

The font used is (h3 title):• Arial Bold• body 18 px• colour: dark blue• grey background (with grain)

When there are tabs:• the tab corresponding to the displayed content is shown on a white background• the titles of each tab have a 25 px space on each side

EXAMPlE Of A HEADER Of A CONTAINER WITH BORDERS fROM THE MCA

2 8

Filter

This allows you to filter the elements of the container area and has a medium grey background.

Content

Two types of separator can be placed between content elements:• a line separator• a mini-line separator.

Content elements can be expandable.If they are, the first element is always expanded and accompanied by the pictogram ‘ - ‘ on the left.The other containers are closed when opening the page and accompanied by the pictogram ‘ + ‘ on the left.Depending on the length of the content, two options are available:• close the open container when opening another container• expand all containers.

EXAMPlES Of EXPANDABlE ElEMENTSPagination

Pagination appears when there are more than 10 elements in the container.

Footer of a container

The footer consists of a link to:• the complete list• the complete programme • the list page corresponding to the content of the container.

EXAMPlE Of A fIlTER Of A CONTAINER WITH BORDERS fROM THE MCA.

2 9

P A G I N A T I O N

Pagination is common to all containers with or without borders that contain more than 10 elements.It displays in two different ways depending on whether the pagination covers:• 11 pages or fewer • more than 11 pages.

Container with 11 pages or fewer

The following elements are displayed in the navigation bar of the intermediate pages:• ‘Previous page’ button in the active navigation language from the second page.• clickable numbers for the previous and next pages leading to the corresponding pages. The number of the current page is non-clickable(encircled by a thin grey line, see opposite).• Next page’ button in the active navigation language on all pages except the last.

Container with more than 11 pages

Three cases are foreseen:• pagination of the first six pages• intermediate pagination• pagination of the last six pages

Pagination of the first six pages works as follow:• ‘Previous page’ button in the active navigation language from the second page.• numbers of the first nine pages leading to the corresponding pages.The number of the current page is non-clickable.

• ‘ - ‘• number of the last page leading to this page.• ‘Next page’ button in the navigation language leading to this page.

Pagination of intermediary pages works as follow:• ‘Previous page’ button in the navigation language.• number of the first page leading to this page.• ‘ - ‘• numbers of the three pages preceding the current page leading to the corresponding pages.

• the number of the current page is non-clickable.• numbers of the three pages following the current page leading to the corresponding pages.• ‘ - ‘• number of the last page leading to the current page.• ‘Next page’ button in the navigation language.

Pagination of the last six pages works as follow:• ‘Previous page’ button in the navigation

language.• number of the first page leading to this page.• ‘ - ‘• numbers of the last nine pages leading to the corresponding pages.The number of the current page is non-clickable.• ‘Next page’ button in the active navigation language on all pages except the last.

PAGINATION Of MORE THAN 11 PAGES

INTERMEDIATE PAGINATION Of MORE THAN 11 PAGES

END Of PAGINATION Of MORE THAN 11 PAGES

3 0

M A P s

maps may be simply illustrative or interactive to allow users to browse in the main content area.

WORlD MAP fOR THE ‘DElEGATIONS’ SECTION

WORlD MAP fOR THE ‘MEPS’ SECTION

3 1

E X A M P L E s O F U s E

EXAMPlE Of A PRODUCT EXAMPlE Of A lIST

3 2

EXAMPlE Of AN ANNOUNCEMENT

EXAMPlE Of A CONTAINER WITH TABS

EXAMPlE Of ElEMENTS Of A CONTAINER WITH BORDERS

• ‘-’ buttons are used to collapse segment• ‘+’ buttons are used open segment, closing the previously open segment.

3 3

C I A - S P E C I F I C E L E M E N T S

B R E A K D O W N O F E L E M E N T s

T I T l E S A N D S U B - T I T l E S

The various elements must comply with the following rules:CIA1 title:• Arial bold• body 18 pxCIA2 title:• Arial bold• body 14 pxCIA3 title:• Arial bold• body 12 px.

C O N T E N T E l E M E N T S

Content elements may contain the following items:• titles• lead• theme• date / place• time• photos• paragraphs• lists: with or without bullets, with or without h3• links

They may be displayed in:• a box without borders• a box with borders, expandable or not.

C O N T A I N E R S W I T H O U T B O R D E R S

Any floating information group is called a container without borders.

Such containers are used for:• text areas associated with photos (e.g. Top page of ‘News’)• photos or texts accompanying illustrations

This container (without 25 px margin) may contain the following elements:• image / video / slideshow• h3 title• lead• text• links

Boîte de ContactLe titre est de 14px.

Boîte de partageLa boîte reprend les éléments dans l’ordre:Au dessus de la boîte :• Un lien vers l’article au format PDF• Un bouton pour suivre un fil RSS• Un bouton vers Email updatesDans la boîte :• Les boutons Facebook |Twitter | mail• Le bouton «j’aime»• Un bouton pour envoyer la page• L’url de la page.

Ces éléments ne doivent pas obligatoirement être tous présents.

CONTACTS BOX

3 4

C O N T A I N E R s W I T H B O R D E R s

A container with borders is made up of the following elements:• header• filter• content• pagination• footer.

Only the ‘content’ element is mandatory.The margin between the frame and the elements is one unit (25 px).

Header

A header is composed of:• a blue or grey background• a blue h3 title on a grey background or white on a blue background• an optional sub-titleThe line spacing used is 1.6 em.The colours should be alternated, with blue being used for important boxes.

Filter

A filter allows the user to limit the number of elements displayed in the content area. Where a filter is present, the header must have a blue background.

Content

Two types of separator can be placed between content elements:• a line separator• a mini-line separator.

As with the mCA, content elements can be expandable.If they are, the first element is always expanded and accompanied by the pictogram ‘ - ‘ on the left.The other elements are closed and accompanied by the pictogram ‘+’ on the left.Depending on the length of the content, two options are available:• close the open element when opening another element• expand all elements.

Pagination

Pagination appears when there are more than 10 elements in the container.The pagination is the same as in the main content area, without the ‘Previous’ and ‘Next’ buttons.The pagination may not exceed three elements. The other elements are then accessible from the footer.

Footer

The footer consists of a link to:• the complete list• the complete programme• the list page corresponding to the content of the container.

COMPOSITION ElEMENTS Of A CONTAINER WITH BORDERS fROM THE CIA

EXAMPlE Of A HEADER Of A CONTAINER WITH BORDERS fROM THE CIA

EXAMPlE Of A SUB-HEADER Of A CONTAINER WITH BORDERS

3 5

E X A M P L E s O F U s E

The purpose of this chapter is to illustrate, using examples from Europarl sites, how the elements described in previous chapters can be used.

‘ f U R T H E R I N f O R M A T I O N ’ C O N T A I N E RThis container can be found, for example, in the editorial products of the ‘News’ site.It contains the following elements:• a blue h3 title in a grey header• two different content types, separated by a line separator• links (green for multimedia, blue for other content)

‘ C O N T A C T S ’ C O N T A I N E RThis type of container is displayed on the mEP info pages in the ‘mEPs’ section.It is composed of:• a blue h3 title in a grey header• three sections separated by mini-line separators.

‘ f A C T B O X ’ C O N T A I N E RThis container has the following elements:• a blue h3 title in a grey header• three different content sections separated by a mini-line separator.

‘ S O C I A l M E D I A ’ C O N T A I N E RThis container displays the social media relevant to a site. It may contain one or

more links to social media sites.This container has neither a header nor a footer. The title is in bold in the first content element, and the elements are separated by a mini-line separator.It is on the home page of the site and always at the bottom of the CIA.

‘CONTACTS’ CONTAINER Of AN MEP INfO SHEET

‘SOCIAl MEDIA’ CONTAINER

‘fACT BOX’ CONTAINER

‘fURTHER INfORMATION’ CONTAINER

3 6

S H A R E B O XThis box is displayed on every page, with different versions containing between two and four content elements: ‘PDF version’, ‘Send to a friend’ and ‘Get a short URL’ are optional.

‘ P R E S S R E l E A S E S ’ C O N T A I N E RThis container is on the ‘News’ site.It is made up of the following elements:• a header on a blue background with a white title on three lines• two content sections separated by a line separator, each displaying:- a dark blue link- a theme- the date and time of publication.

‘ P R E S S C O N f E R E N C E S ’ C O N T A I N E RThis container is on the ‘News’ site.It is made up of the following elements:• a header with a grey background containing a blue h3 title and a blue sub-title• content sections separated by a line separator, each displaying:- a dark blue link- a broadcast time- a location• a footer linking to the agenda page.

‘PRESS RElEASES’ CONTAINERSHARE BOX WITH TWO ElEMENTS

SHARE BOX WITH THREE ElEMENTS

‘PRESS CONfERENCES’ CONTAINER

3 7

F O O T E R ( A R E A S E A N D F )

I N T R O D U C T I O N

The footer on Europarl sites comprises four mandatory sections:• Logo and general title• Legal notice• Links related to current site• Sitemap of the eight main sections of Europarl

L O G O A N D G E N E R A L T I T L E

The logo and general titlework the same way as in the header.The logo links to the Europarl portal page.

The logo has the following elements:• a vertical separation bar• the title ‘European Parliament’ in the navigation language• a hard return• the general title of the site in the navigation language in lower case with an initial capital.

The title ‘European Parliament’ links to the Europarl portal page.The general title of the site links to the site’s home page.

For example:European Parliament Visiting

... for the English version of the visitors’ site

Parlement européenActualité

… for the French version of the ‘News’ site

For the European Parliament:The font used is:• Arial• body 20 px• colour #13334D

For the title of the site:The font used is:• Arial black• body 20 px• colour #13334D

fOOTER

3 8

L E G A L N O T I C E

This area contains various links to pages under the Europarl portal page.

L I N K s R E L A T E D T O C U R R E N T s I T E

This area contains unvarying links related to the current site and its general content.It is not specifically related to the current section.

Links may vary depending on the language version of the site (e.g. links to Information Offices in the current navigation language), but they always lead to a website.

There may be single links or groups of links.

Properties of a group of links:• non-clickable title • Arial bold, body 12px, dark blue• links• Arial regular, body 12px, light blue, separated by ‘ | ‘• 15 px line spacing between menus and links• one unit line spacing between blocks

Single link:• clickable title

• Arial bold, body 12px, dark blue• 15 px line spacing between menus and links• one unit line spacing between blocks.

If there are no links to the current site, this area disappears and is replaced by an area containing links to the various sections of Europarl

s I T E M A P O F T H E E I G H T M A I N s E C T I O N s O F E U R O P A R L

This area is invariable and displays the first menu level of the eight main sections of Europarl. It also contains a link to a list of all Europarl sites.

Legal notice in the footer

Links related to the site

displayed in the footer

Links to main sites

displayed in the footer

BREAKDOWN Of fOOTER

fOOTER WITHOUT lINKS RElATED TO THE SITE

DGCOMM - WebMasterSupport@europarl.europa.eu