Header
Portal Header
Der Portalheader mit der id header besteht grob aus zwei Teilen. Einerseits der Header des Landes Berlin und seiner Marke, dessen Inhalt und Markup komplett vorgegeben sind. Der zweite Teil ist vom Markup vorgegeben und muss mit eigenen Daten gefüllt werden. Im Bereich pageheader__logo kann das eigene Logo eingefügt werden und der Link soll auf die Startseite zeigen. Außerdem sollten die Quicklinks auf relevante Seiten verlinken und das Menü muss vollständig ausgefüllt werden, entsprechend der Seitenstruktur. Die Erklärung zur Barrierefreiheit muss ergänzt werden und mit entsprechenden Nachweisen verlinkt sein.
<header id="header" class="kiekma">
<!-- Portallogo Berlin Brand -->
<div class="header__row-portalbrand">
<div class="logo">
<a href="../../patterns/05-styleguide-startseite/05-styleguide-startseite.html">
<img class="logo" title="Zur Startseite" src="../../images/logo_berlin_m_srgb.svg" alt="Berlin.de">
</a>
</div>
</div>
<div class="header__row-pageheader">
<!-- Vertical Logo -->
<div class="pageheader__logo">
<p class="textlogo">
<a href="../../patterns/09-vertical_marketing-page-startseite/09-vertical_marketing-page-startseite.html" title="Zur Startseite">
<span class="institution">Designsystem Berlin.de</span>
<span class="title">Vertical Marketing</span>
</a>
</p>
</div>
<!-- Quicklinks -->
<!-- ### Service button area with different overlays ## -->
<div class="pageheader__services">
<!-- Accessability button and overlay -->
<div id="servicebuttonAccessibility" class="service-button-overlay js-service-button-overlay accessibility">
<div class="service-button-overlay__button">
<button type="button" class="icon-button js-button-overlay-open" aria-haspopup="true" aria-label="Overlay Öffnen: Barrierefreiheit">
<i class="icon bicon bicon-universal-access" aria-hidden="true"></i>
<span class="text">Barrierefrei</span>
</button>
</div>
<!--noindex--><!--googleoff: index-->
<div class="service-button-overlay__overlay overlay js-overlay-container robots-nocontent" role="dialog" aria-modal="true" hidden="hidden">
<div class="overlay__header">
<h2 class="heading"><span>Barrierefreiheit</span></h2>
<button type="button" class="close-button js-button-overlay-close" aria-label="Overlay Schließen: Barrierefreiheit">
<i class="bicon bicon-times" aria-hidden="true"></i>
</button>
</div>
<div class="overlay__body"><h3>Einstellungen</h3>
<ul class="wcag-linklist">
<li>
<a href="#">
<i class="bicon bicon-leichte-sprache" aria-hidden="true"></i>Leichte Sprache <span class="aural">für diese Seite anzeigen</span>
</a>
</li>
<li>
<a href="#">
<i class="bicon bicon-dgs" aria-hidden="true"></i>Gebärdensprache <span class="aural">für diese Seite anzeigen</span>
</a>
</li>
</ul>
<h3>Wie barrierefrei ist diese Webseite?</h3>
<p>
<a href="#">Erklärung zur digitalen Barrierefreiheit</a>
</p>
<h3>Wen können Sie bei Anmerkungen oder Fragen zur digitalen Barrierefreiheit (Feedbackoption) kontaktieren?</h3>
<p>
Name: Name<br>
Email: <a href="mailto:">email@empfaenger.dummy</a><br>
Telefon: Telefonnummer
</p>
<h3>Wo gibt es zusätzliche Informationen zur Barrierefreiheit im Land Berlin?</h3>
<p>
<a href="#" class="extern" target="_blank">Link</a>
</p> </div>
</div>
<!--googleon: index--><!--/noindex-->
</div>
<!-- Search button and overlay -->
<div id="servicebuttonSearch" class="service-button-overlay js-service-button-overlay search fullwidth">
<div class="service-button-overlay__button">
<button type="button" class="icon-button js-button-overlay-open" aria-haspopup="true" aria-label="Overlay Öffnen: Suche">
<i class="icon bicon bicon-search" aria-hidden="true"></i>
<span class="text">Suche</span>
</button>
</div>
<!--noindex--><!--googleoff: index-->
<div class="service-button-overlay__overlay overlay js-overlay-container robots-nocontent" role="dialog" aria-modal="true" hidden="hidden">
<div class="overlay__header">
<h2 class="heading"><span class="aural">Suche</span></h2>
<button type="button" class="close-button js-button-overlay-close" aria-label="Overlay Schließen: Suche">
<i class="bicon bicon-times" aria-hidden="true"></i>
</button>
</div>
<div class="overlay__body">
<div class="search-container">
<form >
<div class="searchform-slot ">
<div class="form-group">
<label class="notaural" for="searchFormInput_q">Suche auf der Internetseite "Portalname"</label>
<div class="searchterm">
<div class="input-wrapper">
<i class="bicon bicon-search lens" aria-hidden="true"></i>
<input type="search" class="form-control search" value="" placeholder="Suchbegriff" name="q" id="searchFormInput_q" title="Hier können Sie einen Text eingeben, um die Internetseite "Die Regierende Bürgermeisterin von Berlin – Senatskanzlei Informationen zum Coronavirus (Covid-19)" zu durchsuchen">
</div>
<button class="submit " type="submit" title="Suchen">
<span class="aural">Suchen</span><i class="bicon bicon-arrow-right icon" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!--googleon: index--><!--/noindex-->
</div>
<!-- Hamburger navigation button and overlay -->
<div id="servicebuttonMenu" class="service-button-overlay js-service-button-overlay menu">
<div class="service-button-overlay__button">
<button type="button" class="icon-button js-button-overlay-open" aria-haspopup="true" aria-label="Overlay Öffnen: Menü">
<i class="icon bicon bicon-bars" aria-hidden="true"></i>
<span class="text">Menü</span>
</button>
</div>
<!--noindex--><!--googleoff: index-->
<div class="service-button-overlay__overlay overlay js-overlay-container robots-nocontent" role="dialog" aria-modal="true" hidden="hidden">
<div class="overlay__header">
<h2 class="heading"><span>Menü</span></h2>
<button type="button" class="close-button js-button-overlay-close" aria-label="Overlay Schließen: Menü">
<i class="bicon bicon-times" aria-hidden="true"></i>
</button>
</div>
<div class="overlay__body"> <nav id="navigation-primary" class="js-navigation-primary" aria-label="Hauptnavigation" data-auralopentext="Untermenü öffnen" data-auralclosetext="Untermenü schließen">
<div class="tree-wrapper js-navigation-tree-wrapper">
<ul class="navigation-tree">
<li>
<a href="#" >Global</a>
<ul class="navigation-tree">
<li>
<a href="../../patterns/09-vertical_marketing-page-global-first-steps/09-vertical_marketing-page-global-first-steps.html" >First Steps</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-global-landmarks/09-vertical_marketing-page-global-landmarks.html" >Page Structure</a>
</li>
<li>
<a href="#" >Zielseite</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-global-header/09-vertical_marketing-page-global-header.html" >Header</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-global-footer/09-vertical_marketing-page-global-footer.html" >Footer</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-global-files/09-vertical_marketing-page-global-files.html" >CSS / JS Files</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-global-fonts/09-vertical_marketing-page-global-fonts.html" >Fonts</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-global-colors/09-vertical_marketing-page-global-colors.html" >Colors</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-global-imagesizes/09-vertical_marketing-page-global-imagesizes.html" >Images Markup and Ratios</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-global-favicon/09-vertical_marketing-page-global-favicon.html" >Favicon</a>
</li>
</ul>
</li>
<li>
<a href="#" >Elements</a>
<ul class="navigation-tree">
<li>
<a href="../../patterns/09-vertical_marketing-page-element-panels/09-vertical_marketing-page-element-panels.html" >Blocks and Panels</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-breadcrumb/09-vertical_marketing-page-element-breadcrumb.html" >Breadcrumb</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-buttons/09-vertical_marketing-page-element-buttons.html" >Buttons and Links</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-forms/09-vertical_marketing-page-element-forms.html" >Forms</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-flexgrid/09-vertical_marketing-page-element-flexgrid.html" >Grids</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-helper/09-vertical_marketing-page-element-helper.html" >Helper</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-trennstrich/09-vertical_marketing-page-modul-trennstrich.html" >Horizontal rule</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-icons/09-vertical_marketing-page-element-icons.html" >Icons</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-content-language-select/09-vertical_marketing-page-element-content-language-select.html" >Language select</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-lists/09-vertical_marketing-page-element-lists.html" >Lists</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-tablelist/09-vertical_marketing-page-element-tablelist.html" >List with two columns</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-messages/09-vertical_marketing-page-element-messages.html" >Messages</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-navigation-primary/09-vertical_marketing-page-element-navigation-primary.html" >Navigation Primary</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-pagination/09-vertical_marketing-page-element-pagination.html" >Pagination</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-pills/09-vertical_marketing-page-element-pills.html" >Pills</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-shariff/09-vertical_marketing-page-element-shariff.html" >Shariff</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-spinner/09-vertical_marketing-page-element-spinner.html" >Spinner</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-element-tables/09-vertical_marketing-page-element-tables.html" >Tables</a>
</li>
<li>
<a href="#" >Zielseite</a>
</li>
</ul>
</li>
<li>
<a href="#" >Modules</a>
<ul class="navigation-tree">
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-accordion/09-vertical_marketing-page-modul-accordion.html" >Accordion</a>
</li>
<li>
<a href="#" >Zielseite</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-azlist/09-vertical_marketing-page-modul-azlist.html" >A-Z List</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-flyin-overlay/09-vertical_marketing-page-modul-flyin-overlay.html" >Flyin Overlay</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-calenderinclude/09-vertical_marketing-page-modul-calenderinclude.html" >Calendar</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-card/09-vertical_marketing-page-modul-card.html" >Card</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-carousel/09-vertical_marketing-page-modul-carousel.html" >Carousel</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-contact/09-vertical_marketing-page-modul-contact.html" >Contact</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-download/09-vertical_marketing-page-modul-download.html" >Download and Downloads Multi</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-emperorlist/09-vertical_marketing-page-modul-emperorlist.html" >Emperorlist</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-facetingform/09-vertical_marketing-page-modul-facetingform.html" >Facetingform</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-faq/09-vertical_marketing-page-modul-faq.html" >FAQ</a>
</li>
<li>
<a href="#" >Zielseite</a>
</li>
<li>
<a href="#" >Zielseite</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-imagegallery/09-vertical_marketing-page-modul-imagegallery.html" >Image Gallery</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-infofigures/09-vertical_marketing-page-modul-infofigures.html" >Infofigures</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-linklist/09-vertical_marketing-page-modul-linklist.html" >Linklist</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-locationaccessibility/09-vertical_marketing-page-modul-locationaccessibility.html" >Location Accessibilty</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-logogalerie/09-vertical_marketing-page-modul-logogalerie.html" >Logo Gallery</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-geomap/09-vertical_marketing-page-modul-geomap.html" >Map</a>
</li>
<li>
<a href="#" >Zielseite</a>
</li>
<li>
<a href="#" >Opener</a>
<ul class="navigation-tree">
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-buehne/09-vertical_marketing-page-modul-buehne.html" >Stage</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-buehnev2/09-vertical_marketing-page-modul-buehnev2.html" >Tilesopener</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-herounit-image-with-overlay/09-vertical_marketing-page-herounit-image-with-overlay.html" >Fullwidth Image with Overlay</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-herounit-image-with-aside/09-vertical_marketing-page-herounit-image-with-aside.html" >Image with Aside</a>
</li>
</ul>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-openings/09-vertical_marketing-page-modul-openings.html" >Openings</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-publictransport/09-vertical_marketing-page-modul-publictransport.html" >Publictransport</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-rsslist/09-vertical_marketing-page-modul-rsslist.html" >Rss List</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-searchform-simple/09-vertical_marketing-page-modul-searchform-simple.html" >Searchform (slot)</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-servicepanel/09-vertical_marketing-page-modul-servicepanel.html" >Servicepanel</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-stickybutton/09-vertical_marketing-page-modul-stickybutton.html" >Stickybutton</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-toc/09-vertical_marketing-page-modul-toc.html" >Table Of Contents</a>
</li>
<li>
<a href="#" >Teaser</a>
<ul class="navigation-tree">
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-teaser/09-vertical_marketing-page-modul-teaser.html" >Teaser and Multiteaser</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-teaser-marketing/09-vertical_marketing-page-modul-teaser-marketing.html" >Teaser Marketing</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-teaser-poster/09-vertical_marketing-page-modul-teaser-poster.html" >Teaser Poster</a>
</li>
</ul>
</li>
<li>
<a href="#" >Tiles</a>
<ul class="navigation-tree">
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-teasertiles/09-vertical_marketing-page-modul-teasertiles.html" >Teasertiles</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-icontiles/09-vertical_marketing-page-modul-icontiles.html" >Icontiles</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-arrowtiles/09-vertical_marketing-page-modul-arrowtiles.html" >Arrowtiles</a>
</li>
</ul>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-testimonial/09-vertical_marketing-page-modul-testimonial.html" >Testimonial</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-textbild/09-vertical_marketing-page-modul-textbild.html" >Text Image</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-text_wichtig/09-vertical_marketing-page-modul-text_wichtig.html" >Text Important</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-linkup/09-vertical_marketing-page-modul-linkup.html" >To-top Link</a>
</li>
<li>
<a href="#" >Zielseite</a>
</li>
<li>
<a href="#" >Zielseite</a>
</li>
<li>
<a href="../../patterns/09-vertical_marketing-page-modul-video/09-vertical_marketing-page-modul-video.html" >Video (twoclick)</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!--googleon: index--><!--/noindex-->
</div>
</div>
</div>
</header>
Content Header
Das Markup für den Content Header muss im entsprechenden Div-Tag mit der ID layout-grid__area--contentheader eingefügt werden und kann üblicherweise den Language Select und Breadcrumb enthalten. Diese Einheiten sind jedoch optional und der komplette Content Header kann auch entfallen.
<div id="content-header">
<nav class="breadcrumb" aria-label="Sie befinden sich hier">
<ol>
<li>
<a href="#">Breadcrumb 1</a>
</li>
<li>
<span class="active" aria-current="page">Breadcrumb 2</span>
</li>
</ol>
</nav>
<div class="content-language-select js-content-language-select">
<div role="button" id="language_select_button" aria-haspopup="true" aria-controls="language_select" aria-label="Sprache der Seite ändern" tabindex="0" class="trigger js-trigger">
<i class="language-icon" aria-hidden="true">de</i>
<span class="aural">Aktuelle Sprache: Deutsch</span>
<i class="bicon bicon-chevron-down arrow" aria-hidden="true"></i>
</div>
<div class="dropdown js-dropdown">
<ul class="list--clean" id="language_select">
<li>
<a href="#">
<i class="language-icon" aria-hidden="true">de</i>
<span lang="de">Deutsch</span>
</a>
</li>
<li>
<a href="#">
<i class="language-icon" aria-hidden="true">en</i>
<span lang="en">English</span>
</a>
</li>
<li>
<a href="#">
<i class="language-icon" aria-hidden="true">fr</i>
<span lang="fr">Français</span>
</a>
</li>
</ul>
</div>
</div>
</div>