ÖAMTC Digital Styleguide

Alle ÖAMTC Seiten werden in einem dynamischen Seitenraster entworfen, dessen zentrales Element der Content-Bereich ist.

Header

Der ÖAMTC Header beherbergt das zur Startseite verlinkte ÖAMTC Logo (Wortmarke), die Haupt-Navigation, die Suche, den Login-Bereich sowie einen Link "Zurück zum Seitenanfang". Abhängig von der Größe des Browserfensters, der Scrolltiefe des Users oder der Art der Applikation das Logo wahlweise groß überhalb der Navigation, oder klein Links von der Navigation angezeigt. Die Navigation ist abhängig von der Größe des Browserfensters entweder horizontal offen, oder vertikal hinter einem Burger-Button aufrufbar. Im Horizontalen bietet die Navigation als zusätzliche Informationsebene Flyouts an.

Mittiges Layout

Mittige Layouts kommen auf Seiten zum Einsatz, welche für sich als Werbung für ein Produkt oder einen Service stehen. (z.B. "Mitgliedschaft", oer "Reisen"). Zweck des Mittigen Layouts ist es, den Fokus des Nutzers zu zentrieren, um Abschlüsse zu generieren

<main class="oeamtc-main oeamtc-main--center">
	<section class="oeamtc-main__content oeamtc-main__content--up">
		...
	</section>
</main>

Artikel Layout

Artikel-Layouts werden, wie der Name schon sagt, zur Darstellung von redaktionellem Content verwendet. Der Content-Bereich hängt leicht Links, um rechts platz für 300 Pixel breite Werbeformen zu gewähren.

<main class="oeamtc-main">
	<section class="oeamtc-main__content oeamtc-section">
		<div class="oeamtc-section__label">
			<a name="section1" class="oeamtc-section__target">></a>Section Label
		<div>
		<div>...</div>
		<div class="oeamtc-banner"></div>
	</section>
</main>

Seiten-Navigation Layout

Layouts mit Seitennavigation kommen bei Applikationen wie dem Routenplaner oder Mein ÖAMTC zum Einsatz

<main class="oeamtc-main oeamtc-main--leftnav">
	<nav class="oeamtc-sidenav">...<nav>
	<div class="oeamtc-main__content">...<div>
</main>

Wortmarke

Die Wortmarke des ÖAMTC kann als Inline-Quelltext oder Image-Tag in einer Mindestgröße von 35 x 10 Pixel gesetzt werden. Alle vielfachen Multiplikatoren (70x20,140x40,350x100...) haben pixelbündige Kanten. Folgende Farbvarianten sind legitim:

<svg viewBox="0 0 35 10" height="80">
	<use href="#oeamtc-wortmarke" />
</svg>

Marken- und Produktname

Die Wortmarke kann in Kombination mit einem Produktnamen in Franklin Gothic Demi verwendet werden.

Reisen

Shop

Clubkarte

<p class="oeamtc-brand oeamtc-paragraph">
	<svg class="oeamtc-brand__wortmarke" viewBox="0 0 35 10">
		<use href="#oeamtc-wortmarke" />
	</svg>
	<span class="oeamtc-brand__name oeamtc-color--green">Clubkarte
</p>

Auch eine Kombination aus Bildmarke, Wortmarke und Produktname ist möglich.

Produktname

<p class="oeamtc-brand oeamtc-paragraph" style="font-size: 5vmin">
	<svg class="oeamtc-brand__bildmarke" viewBox="0 0 40 40">
		<rect stroke="black"
			stroke-width=".5"
			fill="transparent"
			x="1" y="1" rx="5"
			width="38" height="38"
		/>
		<use href="#oeamtc-bildmarke" />
	</svg>
	<svg class="oeamtc-brand__wortmarke"
		xmlns="http://www.w3.org/2000/svg"
		viewBox="0 0 35 10"
		height="1em">
		<use href="#oeamtc-wortmarke" />
	</svg>
	<span class="oeamtc-brand__name">Produktname</span>
</p>

Bildmarke

Die Bildmarke des ÖAMTC kommt immer dann zum Einsatz, wenn der verfügbare Platz quadratisch ist, und die Wortmarke dadurch schlecht lesbar wäre. Beispielweise als (Fav-)Icon. Die Bildmarke besteht aus einer Fläche mit abgerundeten Ecken, einem Wappen und optional einer Trennlinie. Die Bildmarke ist für die Darstellung auf Bildschirmen in einer Mindestgröße von 40 x 40 Pixel optimiert. Im Gegensatz zur Print-Variante werden weniger Linien im Brustwappen des Adlers verwendet, um Moiré- und Unschärfe-Effekte zu vermeiden.

Hat der Hintergrund dieselbe Farbe, wie die Bildmarke, ist eine Trennlinie in der Farbe des Wappens zu verwenden. Die Trennlinie hat dieselbe Dicke wie der Kreis um das Adler-Wappen (1,875% der Seitenlänge, bei 160px Seitenbreite = 3px), und wird vom Außenrand nach Innen abgezogen. Ausnahme: Auf gelbem Grund ist eine weiße Trennlinie zu setzen:

<svg viewBox="0 0 40 40" width="160">
	<rect fill="#FFDC00" x="1" y="1" rx="5" width="38" height="38" />
	<use href="#oeamtc-bildmarke" />
</svg>

Zentrale SVG-Map

Icons werden im ÖAMTC Style unter einer zentralen Ressource bereit gestellt. Dabei handelt es sich um eine SVG-Map mit Symbolen, welche über das SVG-Element <use href="..." /> mit ihrer eindeutigen ID referenziert werden können. Alle Icons sind auf 16 x 16 Pixel optimiert, und werden auf hochauflösenden Bildschirmen automatisch schärfer aufgelöst. Das Icon oeamtc-icon__heart kann beispielsweise wie folgt eingebunden werden:

<svg>
	<use href="{path-to}icons.svg#oeamtc-icon__heart"/>
</svg>

Über das use-tag können Icons auch skaliert und eingefärbt werden. Eine vollständige Liste aller Icons kann unter folgendem Link eingesehen werden:

Zum Icon-Cheatsheet

Icon-Variationen

3-Spaltige Liste

• Listen Eintrag
• Verlinkter Listen Eintrag
• Listen Eintrag
• Listen Eintrag
• Listen Eintrag
• Lorem ipsum dolor sit amet, consetetur sadipscing elitr

<li class="oeamtc-list__item">Listen Eintrag</li>

Liste mit check-bullets

• Listen Eintrag
• Listen Eintrag
• Listen Eintrag

<li class="oeamtc-list__item oeamtc-list__item--check">Listen Eintrag</li>

4-Spaltige Tabelle

<div class="oeamtc-table">
	<div class="oeamtc-table__row">
		<a class="oeamtc-table__cell oeamtc-table__cell--header oeamtc-table__cell--sort">Spalte 1</a>
		<a class="oeamtc-table__cell oeamtc-table__cell--header oeamtc-table__cell--sort">Spalte 2</a>
		<a class="oeamtc-table__cell oeamtc-table__cell--header">Spalte 3</a>
		<a class="oeamtc-table__cell oeamtc-table__cell--header">Spalte 4</a>
	</div>
	<div class="oeamtc-table__row oeamtc-table__row--body">
		<div class="oeamtc-table__cell">In einem wundervollen Land</div>
		<div class="oeamtc-table__cell">vor gar nicht allzulanger Zeit</div>
		<div class="oeamtc-table__cell">war eine Biene sehr bekannt</div>
		<div class="oeamtc-table__cell">von der sprach alles Weit und Breit</div>
	</div>
</div>

© 2020 ÖAMTC

<figure class="oeamtc-image">
<div class="oeamtc-image__frame">
<img
	width="100% "
	src="https://picsum.photos/600/390?random=4"
	alt="Lamborghini"
/>
<span class="oeamtc-image__copyright">© 2020 ÖAMTC</span>
</div>
<figcaption class="oeamtc-image__caption">Bild-Caption</figcaption>