Updated: February 2, 2022

AR Cards

Intro

The AR card displays key information of a marker annotation with a thumbnail image, icon or app of an object. Users can tap on it to navigate to the full-screen view of the card and users can also swipe between the cards.

AR card with image preview (left) and AR card with icon (right)
AR card with image preview (left) and AR card with icon (right)

Anatomy

AR Cards may include variations of the following elements. The content should match with the information connected to the marker in the screen view. AR cards have a focused and unselected state.

A: Image Preview

The image preview can display a thumbnail of an image, video, document, barcode, or an app logo with the icon displayed on the marker.

B: Content Area

The content area can display the title and subtitle.

C: Action Button

The action button is optional. The action button will be hidden in the unselected state.

AR card anatomy
AR card anatomy

Behavior and Interaction

Change to focused state

To view a card in the focused state, the user can swipe the cards horizontally. When the user is swiping cards, the marker pulse will animate with a delay after the card is in the focused state to give enough time to the user to navigate the marker on the screen.

Horizontal swiping to change focused card
Horizontal swiping to change focused card

Variations

The content within the AR card is designed to be flexible so as to accommodate different use cases. The content you choose to include will depend on the needs of your specific user and the requirements.

Media card (left), AR card without image preview (middle) and media card with background blur (right)
Media card (left), AR card without image preview (middle) and media card with background blur (right)

Resources

Related Component / Pattern: AR Markers, AR Annotations