OTTODesign System

Components

Action signifier

The action signifier is a visual cue to the user that they can interact with a component.

Configurator

LiveAction signifier: switch the scheme to Dark for the inverted look. On a page it always sits inside an interactive element, such as a card.
HTML
<oc-action-signifier-v1 variant="text" label="Ansehen"></oc-action-signifier-v1>

Usage

Anatomy

1 2
  1. Label (text variant only)
  2. Chevron icon
LiveAnatomy
HTML
<div class="anatomy">
<oc-action-signifier-v1 variant="text" label="Ansehen"></oc-action-signifier-v1>
<span class="anatomy-pin" style="left:30%;top:-40%">1</span>
<span class="anatomy-pin" style="left:92%;top:-40%">2</span>
<ol class="anatomy-key"><li data-n="1">Label (text variant only)</li><li data-n="2">Chevron icon</li></ol>

Variants

The action signifier is available in two variants. You can set both variants to inverted, if you place them on dark backgrounds:

  • Text
  • Icon

text

icon

text, inverted

icon, inverted

Livevariants and inverted
HTML
<div class="group" style="padding:24px 32px;background:#fff;box-shadow:0 0 0 1px #eee"><p class="demo-label">text</p><oc-action-signifier-v1 variant="text" label="Ansehen"></oc-action-signifier-v1></div><div class="group" style="padding:24px 32px;background:#fff;box-shadow:0 0 0 1px #eee"><p class="demo-label">icon</p><oc-action-signifier-v1 variant="icon"></oc-action-signifier-v1></div></div>
<div class="group" style="padding:24px 32px;background:#212121"><p class="demo-label" style="color:#fff">text, inverted</p><oc-action-signifier-v1 variant="text" label="Ansehen" inverted></oc-action-signifier-v1></div><div class="group" style="padding:24px 32px;background:#212121"><p class="demo-label" style="color:#fff">icon, inverted</p><oc-action-signifier-v1 variant="icon" inverted></oc-action-signifier-v1></div></div>

Behavior

States

The action signifier has no own states.

Interaction

Although the action signifier itself is not interactive, it highlights the interactivity of other components.

Hover and press the card: the action signifier is part of its target, not a separate button

Mojo Drop
Neu
Liveinteraction
HTML
<div style="width:100%;max-width:420px"><oc-media-object-card-v2><a href="#" aria-label="oc-auto"></a><img slot="img" src="/references/images/otto/otto-fashion-drop-mojo-06.jpg" alt=""><div slot="headline">Mojo Drop</div><div slot="subline">Neu</div><oc-action-signifier-v1 slot="action-signifier" variant="icon"></oc-action-signifier-v1></oc-media-object-card-v2></div>

Fitting

The width of the text action signifier is set to fit-content. The height is fixed.
The icon variant has fixed width and height.

Text: fit-content, 1.5rem high

Icon: 1.5rem × 1.5rem

Livefitting
HTML
<p class="demo-label">Text: fit-content, 1.5rem high</p><span style="outline:1px dashed #e5006b"><oc-action-signifier-v1 variant="text" label="Ansehen"></oc-action-signifier-v1></span></div>
<p class="demo-label">Icon: 1.5rem × 1.5rem</p><span style="outline:1px dashed #e5006b"><oc-action-signifier-v1 variant="icon"></oc-action-signifier-v1></span></div>

Placement

You can place the action signifier in interactive components to highlight their interactivity. Some components, like the media object card or promo card, already have an action signifier built in. The action signifier requires an interactive parent element and cannot stand alone.

In a media object card

Mojo Drop
Neu

In a promo card

Neu im Shop

Wohnzimmer
Liveaction signifier in media object card and promo card
HTML
<p class="demo-label">In a media object card</p>
<oc-media-object-card-v2><a href="#" aria-label="oc-auto"></a><img slot="img" src="/references/images/otto/otto-fashion-drop-mojo-06.jpg" alt=""><div slot="headline">Mojo Drop</div><div slot="subline">Neu</div><oc-action-signifier-v1 slot="action-signifier" variant="icon"></oc-action-signifier-v1></oc-media-object-card-v2>
<p class="demo-label">In a promo card</p>
<oc-promo-card-v2><a href="#" aria-label="Wohnzimmer entdecken"></a><span slot="header-overline">Neu im Shop</span><h3 slot="header-headline">Wohnzimmer</h3><img slot="main" src="/references/images/otto/otto-shop-teaser-wohnzimmer.jpg" alt=""><oc-action-signifier-v1 slot="action-signifier-header" variant="text" label="Entdecken"></oc-action-signifier-v1></oc-promo-card-v2>

Best practices

Neu im Shop

Kinderzimmer
DoPlace the action signifier inside an interactive component.
Don'tPlace the action signifier alone.

Content guidelines

DoUse a short label to describe the action.
Don'tUse a long and overdescriptive label to describe the action.

Accessibility

For information on accessibility, refer to the technical documentation.

Status

Implementation

Live demo

Mein Konto

Bestellungen
1 Paket ist unterwegs
Rücksendung
Kostenlos innerhalb von 30 Tagen
Rechnungen
Alle Belege als PDF
Neu im Shop

Wohnzimmer
LiveReal OTTO components, rendered by the OTTO component runtime
HTML
<div class="on-frame" style="margin:0;padding:24px">
<div style="display:grid;gap:16px;max-width:880px;margin:0 auto">
<p class="oc-headline-100">Mein Konto</p>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:16px;align-items:start">
  <div style="display:grid;gap:8px">
    <oc-media-object-card-v2 variant="icon" icon="order-shipped"><a href="#" aria-label="oc-auto"></a><div slot="headline">Bestellungen</div><div slot="subline">1 Paket ist unterwegs</div><oc-action-signifier-v1 slot="action-signifier" variant="icon"></oc-action-signifier-v1></oc-media-object-card-v2>
    <oc-media-object-card-v2 variant="icon" icon="order-return"><a href="#" aria-label="oc-auto"></a><div slot="headline">Rücksendung</div><div slot="subline">Kostenlos innerhalb von 30 Tagen</div><oc-action-signifier-v1 slot="action-signifier" variant="text" label="Anmelden"></oc-action-signifier-v1></oc-media-object-card-v2>
    <oc-media-object-card-v2 variant="icon" icon="payment-invoice"><a href="#" aria-label="oc-auto"></a><div slot="headline">Rechnungen</div><div slot="subline">Alle Belege als PDF</div><oc-action-signifier-v1 slot="action-signifier" variant="icon"></oc-action-signifier-v1></oc-media-object-card-v2>
  <oc-promo-card-v2><a href="#" aria-label="Wohnzimmer entdecken"></a><span slot="header-overline">Neu im Shop</span><h3 slot="header-headline">Wohnzimmer</h3><img slot="main" src="/previews/imagery/samples/otto-lifestyle-photo/lifestyle-living-room.webp" alt=""><oc-action-signifier-v1 slot="action-signifier-header" variant="text" label="Entdecken"></oc-action-signifier-v1></oc-promo-card-v2>

Code

Version Tag Status API
v1 <oc-action-signifier-v1> Stable, allowed for generation ActionSignifierV1

Overview (v1)

Action signifier

The action signifier component indicates that a component can be interacted with. It does not have any specific action associated with it, but it is a visual cue to the user that they can interact with the component. It either shows a simple right-arrow icon or a right-arrow icon with a label.

The color can not be changed, but it does have an inverted property, which is useful on dark backgrounds.

Default variation
HTML
<oc-action-signifier-v1></oc-action-signifier-v1>
Configuration

The action signifier component offers the styling variants icon and text. This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the action signifier component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Action signifier UX documentation for detailed user experience guidelines.

Accessibility

The action signifier component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

It is purely decorative and does not require user interaction. Ensure to add aria-hidden="true" so assistive technologies ignore it.

Configuration (v1)

Action signifier configuration

Configure the action signifier component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

HTML
<oc-action-signifier-v1></oc-action-signifier-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

API v1

Action Signifier v1 API

API: <oc-action-signifier-v1> (ActionSignifierV1)

The Action Signifier component indicates that a component can be interacted with. It does not have any specific action associated with it, but it is a visual cue to the user that they can interact with the component. It either shows a simple right-arrow icon or a right-arrow icon with a label. The color can not be changed, but it does have an inverted property, which is useful on dark backgrounds.

Attributes / properties
Attribute Type Default Required Description
variant "text" | "icon" "icon" no Sets the main styling variant of the action signifier. Use "text" for a text with icon, or "icon" for a standalone icon.
label string undefined no Sets the text content for the displayed label. Only applicable when the variant is set to "text".
inverted boolean false no Indicates whether the action signifier should be displayed in an inverted color scheme for dark backgrounds.
Events
Event Detail type Description
oc-property-change OcActionSignifierV1Events["oc-property-change"] Whenever a property value changes, this event triggers. Use this event to track all property changes within the component.

Refer to the Events documentation for more information.
oc-mount { component: string; } Fired when the component is mounted to the DOM. The event is fired when the onMount hook of the component is called by the runtime.
oc-unmount { component: string; } Fired when the component is unmounted from the DOM. The event is fired when the function returned by the onMount hook of the component is called by the runtime.

Variations (v1)

Variations

Listed below are the most common variations of the action signifier component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-action-signifier-variations--default · tags: components, action-signifier, v1, variations

The default configuration uses the icon variant displaying the right-arrow icon in size 100.

HTML
<oc-action-signifier-v1></oc-action-signifier-v1>
Text variant

Story: components-action-signifier-variations--text · tags: components, action-signifier, v1, variations

The text variant uses the default slot to display a text or link combined with a right-arrow icon in size 50. The text always renders in the same color.

Args: label=Action, variant=text

HTML
<oc-action-signifier-v1 label="Action" variant="text"></oc-action-signifier-v1>
With inverted icon

Story: components-action-signifier-variations--icon-inverted · tags: components, action-signifier, v1, variations

The icon variant combined with the inverted property renders the icon in white on a dark background with a right-arrow icon in size 100.

Args: inverted=true

HTML
<oc-action-signifier-v1 inverted></oc-action-signifier-v1>
With inverted text

Story: components-action-signifier-variations--text-inverted · tags: components, action-signifier, v1, variations

The text variant combined with the inverted property renders the text in white on a dark background with a right-arrow icon in size 50.

Args: variant=text, label=Action, inverted=true

HTML
<oc-action-signifier-v1 variant="text" label="Action" inverted></oc-action-signifier-v1>