Informationen zu Core Components

Für ein einheitliches Erscheinungsbild im Web haben wir das Audi CI um neue React-Komponenten ergänzt. Alle bisherigen React-Komponenten sind im Audi Storybook zu finden. Diese befinden sich momentan im MVP-Status und werden stetig weiterentwickelt.

Falls Sie Zugriffsprobleme haben, wenden Sie sich bitte an den CI-Support.

Durch den Einsatz der unterschiedlichen Schriftschnitte können Inhalte klar gegliedert und Seiten wirkungsvoll und abwechslungsreich inszeniert werden. Die hier zur Verfügung gestellten vordefinierten Schriftstile beruhen auf den Typografie-Basics.

Schriftschnitte

Folgende Schriftschnitte  stehen zur Verfügung:

 

  • Audi Type Extended Bold bis Normal für Headlines  und Zwischenüberschriften
  • Audi Type Extended und/oder Audi Type für Fließtexte
  • Audi Type Wide für interaktive Texte und Buttons (Textlinks, Formularfelder, Navigationspunkte, etc.)
  • Audi Type Bold, Audi Type Wide Bold, Audi Type Extended Bold für Hervorhebungen
  • Audi Type für Fußnoten und Hinweistexte

Auf den Schriftschnitt Audi Type Wide Bold kann zugunsten geringerer Ladelast (page weight) projektabhängig verzichtet werden.

Schriftgrößen und Zeilenabstände

Schriftgrößen können abhängig von Projekt, Endgerät und Viewportbreite gewählt werden.

Das Audi User Interface beinhaltet eine anpassbare Schriftgrößen-Systematik, basierend auf einer modularen Skala. Sie kann Designern und Entwicklern dabei helfen …

  • auch bei umfangreichen Projekten ein konsistentes, stimmiges Schriftbild zu erzeugen,
  • flexibel mit unterschiedlichen Endgeräten und Viewportbreiten umzugehen
  • und einen vertikalen Rhythmus einzuhalten.

Eine individuell angepasste Schriftgrößen-Systematik lässt sich mit Hilfe einer Formel erstellen. Grundlage dafür ist eine modulare Skala aus zwei Parametern, die projektabhängig festgelegt werden können: Basisschriftgröße und Ratio.

Die Basisschriftgröße bestimmt die Größe des Lesetexts. Die Ratio bestimmt die Stärke des Schriftgrößenkontrasts zwischen Formaten geringerer und höherer Hierarchieebene. Die Hierarchiebene wird durch den Schriftgrößenindex definiert, der einem Format zugewiesen ist.

Beide Parameter können für unterschiedliche Viewportbreiten festgelegt werden, um auf jeder Gerätegröße ein optimales Leseerlebnis zu schaffen.

Formel:

Schriftgröße = Basisschriftgröße * (Ratio^Schriftgrößenindex)
SASS-Mixin: aui-responsive-type(schriftgroessenindex, relativezeilenhoehe)

Zeilenabstände und andere vertikale Abstände zwischen Elementen können über das Vielfache einer Basiseinheit definiert werden. Sie berechnet sich aus der Basisschriftgröße. Über den Einsatz einer solchen Basiseinheit halten Textelemente einen vertikalen Rhythmus ein.

 

Formel:

Basiseinheit = Basisschriftgröße/4

Abstand = Basiseinheit × X

Vordefinierte Schriftstile

Überschriften

Headline 1

Headline 2

Headline 3

Headline 4

Headline 5
Headline 6
HTML
<h1 class="aui-headline-1">Headline 1</h1>
<h2 class="aui-headline-2">Headline 2</h2>
<h3 class="aui-headline-3">Headline 3</h3>
<h4 class="aui-headline-4">Headline 4</h4>
<h5 class="aui-headline-5">Headline 5</h5>
<h6 class="aui-headline-6">Headline 6</h6>
  • Seitentitel und Artikelüberschrift (.aui-headline-1)
    Schriftschnitt: Audi Type Extended Bold
    Schriftgrößenindex: 8
    Zeilenhöhe: 1,1×
    Zeichenabstand: -0.015em
    Farbe: #000000 / #ffffff

  • Kapitelüberschrift (.aui-headline-2)
    Schriftschnitt: Audi Type Extended Normal
    Schriftgrößenindex: 5
    Zeilenhöhe: 1,2×
    Zeichenabstand: -0.015em
    Farbe: #333333 / #f2f2f2

  • Sektionsüberschrift (.aui-headline-3)
    Schriftschnitt: Audi Type Extended Normal
    Schriftgrößenindex: 2
    Zeilenhöhe: 1,2×
    Zeichenabstand: -0.015em
    Farbe: #333333 / #f2f2f2
  • Infoboxüberschrift (.aui-headline-4)
    Schriftschnitt: Audi Type Extended Normal
    Schriftgrößenindex: 1
    Zeilenhöhe: 1,2×
    Zeichenabstand: -0.015em
    Farbe: #333333 / #f2f2f2

  • Teaser- und Cardtitel (.aui-headline-5)
    Schriftschnitt: Audi Type Extended Normal
    Schriftgrößenindex: 0
    Zeilenhöhe: 1,33×
    Zeichenabstand: -0.015em
    Farbe: #333333 / #f2f2f2

  • Absatzüberschrift (.aui-headline-6)
    Schriftschnitt: Audi Type Wide Bold
    Schriftgrößenindex: 0
    Zeilenhöhe: 1,5×
    Farbe: #333333 / #f2f2f2

Fließtexte

Hello, sir. I am See-Threepio, human-cyborg relations. My facilities are at your... Well, really! What's wrong with the Falcon? Hyperdrive. I'll get my people to work on it. Good. You know, that ship saved my life quite a few times. She's the fastest hunk of junk in the galaxy. How's the gas mine? Is it paying off for you? Oh, not as well as I'd like. We're a small outpost and not very self-sufficient. And I've had supply problems of every kind. I've had labor difficulties... What's so funny? You. Listen to you - you sound like a businessman, a responsible leader. Who'd have thought that, huh? You know, seeing you sure brings back a few things. Yeah. Yeah, I'm responsible these days. It's the price you pay for being successful.

HTML
<p>Hello, sir. I am See-Threepio, human-cyborg relations. My facilities are at your... Well, really! What's wrong with the Falcon? Hyperdrive. I'll get my people to work on it. Good. You know, that ship saved my life quite a few times. She's the fastest hunk of junk in the galaxy. How's the gas mine? Is it paying off for you? Oh, not as well as I'd like. We're a small outpost and not very self-sufficient. And I've had supply problems of every kind. I've had labor difficulties... What's so funny? You. Listen to you - you sound like a businessman, a responsible leader. Who'd have thought that, huh? You know, seeing you sure brings back a few things. Yeah. Yeah, I'm responsible these days. It's the price you pay for being successful.</p>
  • Längere Fließtexte (p)
    Schriftschnitt: Audi Type Wide Light
    Schriftgrößenindex: 0
    Zeilenhöhe: 1,75×
    Farbe: #333333 / #f2f2f2 

  • Kürzere Fließtexte (.aui-shortread)
    Schriftschnitt: Audi Type Wide Light
    Schriftgrößenindex: 0
    Zeilenhöhe: 1,5×
    Farbe: #333333 / #f2f2f2
  • Kleingedrucktes (.aui-small)
    Schriftschnitt: Audi Type Wide Light
    Schriftgrößenindex: -2
    Zeilenhöhe: 1,5×
    Farbe: #000000 / #ffffff
    Opazität: 40%

  • Lese-Fließtexte innerhalb von Portalen mit kompakter Basisschriftgröße (p.big)
    Schriftschnitt: Audi Type Wide Light
    Schriftgrößenindex: 1
    Zeilenhöhe: 1,75×
    Farbe: #333333 / #f2f2f2

Hervorhebungen

The Death Star plans are not in the main computer. Where are those transmissions you intercepted? What have you done with those plans? We intercepted no transmissions. Aaah… This is a consular ship. Were on a diplomatic mission. If this is a consular ship… were is the Ambassador? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner.

And, now Your Highness, we will discuss the location of your hidden Rebel base.

This little one isn't worth the effort. Come let me buy you something.

This little one isn't worth the effort. Come let me buy you something.

The second Death Star, was a massive battle station with enough firepower to destroy an entire planet.

HTML
<p class="aui-accentuated">
  The Death Star plans are not in the main computer. <a class="aui-textlink" href="#">Where are those transmissions you intercepted?</a> What have you done with those plans? We intercepted no transmissions. Aaah… This is a consular ship. Were on a diplomatic mission. If this is a consular ship… were is the <strong>Ambassador</strong>? Commander, tear this ship apart until you've found those plans and bring me the Ambassador. I want her alive! There she is! Set for stun! She'll be all right. Inform Lord Vader we have a prisoner.
</p>
<p class="aui-shortread">
  And, now <a class="aui-textlink" href="#">Your Highness</a>, we will discuss the location of your hidden <strong>Rebel base</strong>.
</p>
<p class="aui-big">
  This <a class="aui-textlink" href="#">little</a> one isn't worth the <strong>effort</strong>. Come let me buy you something.
</p>
<p class="aui-small">
  This <a class="aui-textlink" href="#">little</a> one isn't worth the <strong>effort</strong>. Come let me buy you something.
</p>
<p class="aui-caption">
  The second <strong>Death Star</strong>, was a massive <a class="aui-textlink" href="#">battle station</a> with enough firepower to destroy an entire planet.
</p>
  • Exzerpte, hervorgehobene Zitatblöcke (.aui-blockquote)
    Schriftschnitt: Audi Type Wide Normal
    Schriftgrößenindex: 1
    Zeilenhöhe: 1,5×
    Farbe: #333333 / #f2f2f2
  • Hervorgehobene Worte innerhalb eines Fließtextes (strong)
    Schriftschnitt: Audi Type Wide Bold

Listen

  • List with arrow
  • Second topic
  • Third topic
  1. List numbered
  2. Second topic
  3. Third topic
HTML
<ul class="aui-list aui-list--arrow">
  <li class="aui-list__item">List with arrow</li>
  <li class="aui-list__item">Second topic</li>
  <li class="aui-list__item">Third topic</li>
</ul>
<ol class="aui-list aui-list--number">
  <li class="aui-list__item">List numbered</li>
  <li class="aui-list__item">Second topic</li>
  <li class="aui-list__item">Third topic</li>
</ol>
  • Liste mit Pfeilen als Aufzählungszeichen (aui-list–arrow)
  • Nummerierte Liste (aui-list–number)

Abstand zwischen Listenelementen beträgt 1 x Basisschriftgröße.

Die Aufzählungszeichen sowie die Nummerierung haben eine Farbe von #000000/#ffffff bei 30% Opazität.

Sonstige

The second Death Star, was a massive battle station with enough firepower to destroy an entire planet.

HTML
<p class="aui-caption">
  The second <strong>Death Star</strong>, was a massive <a class="aui-textlink" href="#">battle station</a> with enough firepower to destroy an entire planet.
</p>
  • Links in Fließtexten (.aui-textlink)
    Schriftschnitt: Audi Type Wide Normal
    Unterstreichung mit border-bottom: 1px
  • :hover
    Farbe: #000000/#ffffff 
  • :visited
    Opacity: 60% 
  • Bildunterschrift und Abbildungslegenden (.aui-caption)
    Schriftschnitt: Audi Type Wide Light
    Schriftgrößenindex: -1
    Zeilenhöhe: 1,5×
    Farbe: #333333 / #f2f2f2
Audi UI Kit Sketch
ZIP
76.3 MB

Anwendungsbeispiele

Ihr CI-Support
Können wir Ihnen helfen?