Cards contain elements and functions on a single topic and can be used as teasers for further content. They optionally show text, icons, an image or a video, links and triggers – either alone or in combination. The format, size and layout of a card are flexible within the layout structure. Cards can contain the brand colours as defined in the basics.

Card as an Interactive Block

An entire card can be created as an interactive block if it does not contain any other interactive elements. In this case it has a hover effect.

Headline

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

HTML
<div class="aui-card aui-color-white aui-color-text-dark">
  <div class="aui-card__body">
    <div class="aui-card__content">
      <h2 class="aui-headline-5">Headline</h2>
      <p class="aui-shortread">And, now Your Highness, we will discuss the location of your hidden <strong>Rebel base</strong>.</p>
    </div>
  </div>
</div>

Card with Interactions

In addition to text and images, cards can contain interactive elements such as buttons, icon buttons and text links. A hover effect across the entire card is omitted in this case.

Headline

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

HTML
<div class="aui-card aui-color-white aui-color-text-dark">
  <div class="aui-card__body">
    <div class="aui-card__content">
      <h2 class="aui-headline-5">Headline</h2>
      <p class="aui-shortread">And, now Your Highness, we will discuss the location of your hidden <strong>Rebel base</strong>.</p>
    </div>
    <div class="aui-card__content aui-card__content--bottom">
      <div class="aui-button-group">
        <button class="aui-button aui-button--primary aui-js-response" type="button">Action</button>
        <button class="aui-button aui-button--secondary aui-js-response" type="button">Action</button>
      </div>
    </div>
  </div>
</div>

Card with Background Image

Visuals are bled to the edge in cards. For improved readability of the content items placed on them, the image can be darkened with a transparent area by up to 30%. The differing display sizes of the card in varying viewport sizes has to be accounted for.

HTML
<a class="aui-card aui-card--action aui-card--image aui-color-black aui-color-text-light" style="background-image:url('http://dev.strichpunkt-design.de/audi/gui-kit/assets/content/card-390x480.jpg');background-position:100% 50%;" href="#">
  <div class="aui-card__content">
    <p class="aui-small">
      31.07.2016
    </p>
    <h2 class="aui-headline-3">
      Headline
    </h2>
    <p class="aui-shortread">
      Card with background image
    </p>
  </div>
</a>

Card Grid

Cards can be combined in identical or differing formats in grids or lists. They are placed at a narrow spacing from one another. For this reason, the recommend value for a defined basic unit is 0.25 rem (on this point, see Layout structure).

Grow and shrink

Use align-right and align-center on card content to align Button Group as you want.

December

24

Your Confi­guration

30.02.2025

A4

Your Model

HTML
<div class="abp-pattern__card-grid">
  <div class="aui-card-grid">
    <div class="aui-card-grid__item">
     <a class="aui-card aui-card--action aui-card--image aui-color-black aui-color-text-light" style="background-image:url('http://dev.strichpunkt-design.de/audi/gui-kit/assets/content/card-390x480.jpg');background-position:100% 50%;" href="#">
       <div class="aui-card__content">
         <p class="aui-small">31.07.2016</p>
         <h2 class="aui-headline-3">Headline</h2>
         <p class="aui-shortread">Card with background image; clickable.</p>
       </div>
     </a>
    </div>
    <div class="aui-card-grid__item">
     <div class="aui-card aui-color-white aui-color-text-dark">
       <div class="aui-card__body">
         <div class="aui-card__content">
           <h2 class="aui-headline-5">Grow and shrink</h2>
           <p class="aui-shortread">Use align-right and align-center on card content to align Button Group as you want.</p>
         </div>
         <div class="aui-card__content aui-card__content--bottom align-right">
           <div class="aui-button-group">
             <button class="aui-js-response aui-button aui-button--secondary" type="button">Action</button>
             <button class="aui-js-response aui-button aui-button--secondary" type="button">Action</button>
           </div>
         </div>
       </div>
     </div>
    </div>
    <div class="aui-card-grid__item aui-card-grid__item--column">
     <div class="aui-card aui-color-black aui-color-text-light">
       <div class="aui-card__body">
         <div class="aui-card__content">
           <p class="aui-small">December</p>
           <p class="aui-headline-1">24</p>
           <button class="aui-js-response aui-button aui-button--text aui-theme-light" type="button">Text Button</button>
         </div>
       </div>
     </div>
     <div class="aui-card-grid">
       <div class="aui-card-grid__item" style="width:50%;">
         <div class="aui-card aui-color-white aui-color-text-dark">
           <div class="aui-card__body">
             <div class="aui-card__content">
               <h6 class="aui-headline-6">Your Confi&shy;guration</h6>
               <p class="aui-small">30.02.2025</p>
             </div>
             <div class="aui-card__content aui-card__content--bottom">
               <div class="aui-button-group aui-button-group--icons">
                 <button class="aui-button aui-button--round aui-button--icon aui-button--icon--large aui-js-response"><svg class="audiicon audiicon-large"><use xlink:href="#system-download-large"></use></svg></button>
                 <button class="aui-button aui-button--round aui-button--icon aui-button--icon--large aui-js-response"><svg class="audiicon audiicon-large"><use xlink:href="#system-download-large"></use></svg></button>
               </div>
             </div>
           </div>
         </div>
       </div>
       <div class="aui-card-grid__item" style="width:50%;">
         <div class="aui-card aui-color-white aui-color-text-dark">
           <div class="aui-card__body">
             <div class="aui-card__content align-center">
               <h6 class="aui-headline-2">
                 A4
               </h6>
               <p class="aui-small">
                 Your Model
               </p>
             </div>
             <div class="aui-card__content aui-card__content--bottom align-center">
               <button class="aui-button aui-button--round aui-button--icon aui-button--icon--large aui-js-response"><svg class="audiicon audiicon-large"><use xlink:href="#system-download-large"></use></svg></button>
             </div>
           </div>
         </div>
       </div>
     </div>
    </div>
  </div>
</div>

Audi UI Kit – Integration into Sketch library

(supported until 30.06.2023)

To ensure designers are using the most up-to-date components and icons in their products, the Audi UI Kit was created as a sketch library. Integrate these UI Kits to get the latest Audi Sketch Libraries. Updates will be made regularly and users will be informed when new versions of the Librarys are available.

 

The current Audi Sketch UI kit will only be supported until June 30, 2023. In order to enable the development of digital products in the future, we provide and update UI libraries for Figma.

Audi UI Kit for Figma

To enable as many designers as possible to work with the Audi user interface components the UI Kit and icons is also offered for Figma. Updates are made regularly and all changes are documented for users in the changelog.

We strongly recommend to join the Audi Figma Workspace for being always up-to-date and to collaborate with others.The Audi Design Kits are already included into the Figma teams in the Audi Workspace. To get access to a team or project please reach out to us here.

In case you are not working directly in the Audi Figma workspace you find the latest version as download below.

Audi Figma UI-Kit and Icons
Figma Files for UI-Komponents, Icon Library and a Readme-file to get started and how to proceed with updating the files.
ZIP
34.4 MB

Examples

Dos & Dont’s

Elements in a card can be placed freely based on content and function. A card can also be divided into several blocks following the layout structure, each being assigned a visual, a video or a brand colour as the background.
A card can be assigned any brand colour as the background.
The selected background visual should not be too agitated so as ensure good readability. The use of long copy text should be avoided.
The colour of the card and the background should match but also be sufficiently contrasted.