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-red 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 Sketch
Version 1.4 (Releases: <a href="https://github.com/audi/audi-templates/releases" target="_blank">https://github.com/audi/audi-templates/releases</a>)
ZIP
76.3 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.
There should be a difference between the colour of the card and that of 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.