Allgemeines

Die definierten Farben dienen der Wiedererkennung der Bundeswebsites, der Auszeichnung von einzelnen Elementen und Interaktionen sowie der Orientierung. Die verwendete Farbpalette ist ein Markenelement: die Verwendung ist obligatorisch.

Es werden drei Farben verwendet: der Rot-Ton des Bundeslogos, der durch einen helleren Rot-Ton ergänzt wird, ein Blau-Ton und eine Palette von Grautönen.

Das Rot findet sich in der roten Linie, die den Header abschliesst, und als Selektionsfarbe in der Navigation und bei Mouseover über Links. Ansonsten wird mit verschiedenen Grautönen gearbeitet. So sind zum Beispiel die Headlines und der Fliesstext in einem dunklen Grauton umgesetzt.

#DC0018

$venetian-red

#F7001D

$red

#006699

$cerulean

#E7EDEF

$solitude

#F2F7F9

$clear-day

#FFFAB2

$mocassin

#D8E8EF

$pattens-blue

#66AFE9

$malibu

#000000

$black

#333333

$night-rider

#454545

$coal

#757575

$empress

#CCCCCC

$silver

#D5D5D5

$light-grey

#E5E5E5

$gainsboro

#F5F5F5

$smoke

#FFFFFF

$white

Als Hintergrundfarbe wird ein helles Grau verwendet. Sie wird automatisch auf <body> angewendet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur dolores adipisci minus nesciunt facilis. Iure, error, facilis, modi, soluta deleniti maiores corporis impedit ducimus laboriosam porro fugiat et esse blanditiis.

Bilder im Querformat haben ein Seitenverhältnis von 16:10 (volles Querformat - goldener Schnitt) oder 16:5 (halbes Querformat). Hochformatige Bilder haben kein spezifisches Seitenverhältnis. Wir empfehlen jedoch ein Verhältnis von 2:3

image description
image description
Caption content
Example Usage
image description Title + Image (16:10)
image description Title + Image 1/2 (16:5)
image description Video (16:9)
image description Teaser 2/4 (16:10)
image description Teaser 1/3 (16:10)
image description Teaser 1/4 (16:10)
image description Teaser Aside
image description Teaser Aside
image description Standard image + text / Standard infobox
image description Standard image + text / Standard infobox
image description Navigation teaser (16:10)
image description Teaser list

Icons

FLEX

Die verwendeten Icons sind einfarbig und flächig gestaltet. Sie sind als Webfont hinterlegt, der sich als True-Type-Font in den Ressourcen befindet.

Besteht ein Element nur aus einem Icon, so wie die Klasse in einem <span>-Container definiert. Die Funktion des Icons muss in diesem Fall in einem alt-Text erklärt werden: <span class="" alt="vorwärts">...</span>

Accessibility

Damit das Icon-Element von einem Screenreader gelesen werden kann, und/oder wenn es semantisch wichtig ist, soll es mit dem entsprechenden "aria"-Attribut versehen werden. Sonst wird ein aria-hidden="true"-Attribute hinzugefügt. Je nach Bedarf ist es auch möglich, <span class="sr-only">icon description</span> zu verwenden.

My document

Icon Class
icon--exclam
icon--info
icon--arrow-right
icon--arrow-left
icon--arrow-top
icon--arrow-bottom
icon--left
icon--right
icon--top
icon--bottom
icon--screen
icon--notebook
icon--tablet-portrait
icon--tablet-landscape
icon--smartphone-portrait
icon--smartphone-landscape
icon--eye
icon--trash
icon--cart
icon--star
icon--tools
icon--settings
icon--list
icon--list-alt
icon--menu
icon--message
icon--print
icon--search
icon--doc
icon--pdf
icon--word
icon--excel
icon--calendar
icon--rss
icon--external
icon--facebook-light
icon--facebook
icon--instagram
icon--whatsapp
icon--linkedin
icon--linkedin-box
icon--xing
icon--xing-box
icon--pinterest
icon--youtube
icon--twitter
icon--google
icon--play
icon--pause
icon--backward
icon--forward
icon--step-backward
icon--step-forward
icon--fast-backward
icon--fast-forward
icon--corner
icon--square
icon--disc
icon--less
icon--greater
icon--power
icon--root
icon--close