User Interface / Components / Drag & Drop

The Drag & Drop mechanism enables the user to shift elements, change a sorting order or put an element in a particular place.

The size of the Drag & Drop components depends on the basic type size used, which adapt to the viewport width in question. As such, the size of the components is flexible. They are available in a dark and a light version.

Draggable List

Elements of the sortable list can be shifted in terms of their positioning relative to each other. When an entry is moved, possible destinations are shown graphically.

Item 1
Item 2
Item 3
Item 4
Item 5

HTML

<ul class="aui-draggable-list">
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 1</li>
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 2</li>
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 3</li>
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 4</li>
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 5</li>
</ul>

Dropzone

The dropzone allows files to be uploaded intuitively. When shifting a file by means of Drag & Drop, the area in which it can be deposited can be graphically highlighted.

The dropzone should only be applied if Drag & Drop shifting of files is possible in the system.

Drop here

HTML

<div class="aui-dropzone">
  <div class="aui-dropzone__message">
    Drop here
  </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.

Integrate Sketch library

Integrate Sketch icon library

Integrate Sketch UI styles library

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.

Write us for access Figma workspace

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.