Logo

Version	Tag	Status	API
v1	`<oc-logo-v1>`	Stable, allowed for generation	LogoV1

Overview

Source: ./src/components/logo/Overview.mdx

The logo component allows users to display any Logo from the OTTO components library. It has attributes for setting the logo type, size, and whether its interactive. Find all available logos on the All logos page.

Default variation

Story Default:

<oc-logo-v1 logo="otto"></oc-logo-v1>

Configuration

This component is highly 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 logo 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 Logo UX documentation for detailed user experience guidelines.

Logo sizes

The logo component comes in a default size. The default sizes are 40px in height or width respectively. It can be scaled freely. Also, we offer a fill-parent attribute which scales to 100% width and height of the parent to control the logo size externally.

Accessibility

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

ARIA hidden

If a logo is purely decorative and adds no information to the content, it should be visible to users but hidden from assistive technologies. You can change this default behavior by using the oc-aria-label attribute.

Use `oc-aria-label`

To make the logo recognizable for screen readers, use the oc-aria-label attribute to provide clear and descriptive context information. See the general accessibility documentation for guidance on using oc-aria-label, including how it works with link and masked link behavior.

Configuration

Source: ./src/components/logo/Configuration.mdx

Logo configuration

Configure the logo 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.

Story Default:

<oc-logo-v1 logo="otto"></oc-logo-v1>

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

All Logos

Source: ./src/components/logo/LogosOverview.mdx

All Logos

Otto

<oc-logo-v1 logo="otto"></oc-logo-v1>

<oc-logo-v1 logo="otto-white"></oc-logo-v1>

<oc-logo-v1 logo="otto-up"></oc-logo-v1>

<oc-logo-v1 logo="otto-up-white"></oc-logo-v1>

<oc-logo-v1 logo="otto-up-claim"></oc-logo-v1>

<oc-logo-v1 logo="otto-up-claim-white"></oc-logo-v1>

<oc-logo-v1 logo="up"></oc-logo-v1>

<oc-logo-v1 logo="slogan"></oc-logo-v1>

Payment

<oc-logo-v1 logo="otto-payments"></oc-logo-v1>

<oc-logo-v1 logo="paypal"></oc-logo-v1>

<oc-logo-v1 logo="paypal-monogram"></oc-logo-v1>

<oc-logo-v1 logo="sepa-horizontal"></oc-logo-v1>

<oc-logo-v1 logo="sepa-vertical"></oc-logo-v1>

<oc-logo-v1 logo="visa"></oc-logo-v1>

<oc-logo-v1 logo="mastercard"></oc-logo-v1>

<oc-logo-v1 logo="facebook"></oc-logo-v1>

<oc-logo-v1 logo="github"></oc-logo-v1>

<oc-logo-v1 logo="instagram"></oc-logo-v1>

<oc-logo-v1 logo="linkedin"></oc-logo-v1>

<oc-logo-v1 logo="pinterest"></oc-logo-v1>

<oc-logo-v1 logo="snapchat"></oc-logo-v1>

<oc-logo-v1 logo="tiktok"></oc-logo-v1>

<oc-logo-v1 logo="xing"></oc-logo-v1>

<oc-logo-v1 logo="youtube"></oc-logo-v1>

Seal

<oc-logo-v1 logo="ehi"></oc-logo-v1>

App

<oc-logo-v1 logo="otto-app"></oc-logo-v1>

<oc-logo-v1 logo="app-store"></oc-logo-v1>

<oc-logo-v1 logo="play-store"></oc-logo-v1>

API v1

Source: ./src/components/logo/v1/LogoV1.API.g.mdx

Logo v1 API

API: `<oc-logo-v1>` (LogoV1)

The logo component allows users to display any logo from the OTTO components library. It has attributes for setting the logo type and whether it's interactive. Find all available logos here.

Attributes / properties

Attribute	Type	Default	Required	Description
`logo`	`"otto-app" \| "otto-up" \| "youtube" \| "app-store" \| "ehi" \| "facebook" \| "github" \| "instagram" \| "linkedin" \| "mastercard" \| "otto" \| "otto-ai" \| "otto-payments" \| "otto-up-claim" \| "otto-up-claim-white" \| "otto-up-white" \| "otto-white" \| "paypal" \| "paypal-monogram" \| "pinterest" \| "play-store" \| "sepa-horizontal" \| "sepa-vertical" \| "slogan" \| "snapchat" \| "tiktok" \| "up" \| "up-white" \| "visa" \| "xing"`		yes	Sets the displayed logo. Find all available logos here.
`fill-parent`	`boolean`	`false`	no	Scale to fit the parent container. Note that the dimensions in tokens will be ignored if this is set to true.
`href`	`string`	`undefined`	no	Deprecated: Use the oc-interactive-overlay-v1 component instead. Visit SEO optimization techniques for more information. ~~Sets the link target of the logo.~~
`base64-href`	`string`	`undefined`	no	Deprecated: Use the oc-interactive-overlay-v1 component instead. Sets the base64 encoded link target of the logo. Use this attribute to prevent search engines from indexing the link target.
`target`	`"_blank" \| "_self" \| "_parent" \| "_top"`	`undefined`	no	Deprecated: Use the oc-interactive-overlay-v1 component instead. Sets the target attribute of the logo. Note Only applies when href or base64Href is set.
`rel`	`string`	`undefined`	no	Deprecated: Use the oc-interactive-overlay-v1 component instead. Sets the rel attribute of the logo. Note Only applies when href or base64Href is set.
`as-button`	`boolean`	`false`	no	Deprecated: Use the oc-interactive-overlay-v1 component instead. Determines if the logo behaves as a button or as a link when clicked. Set to `true` to make the logo behave as a button and trigger an action.
`oc-aria-label`	`string`	`undefined`	no	Sets the ARIA label of the logo. If not set, the logo will be hidden from assistive technologies.

Events

Event	Detail type	Description
`oc-property-change`	`OcLogoV1Events["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

Source: ./src/components/logo/Variations.mdx

Variations

Listed below are the most common variations of the logo 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-logo-variations--default · tags: components

The default configuration

<oc-logo-v1 logo="otto"></oc-logo-v1>

With button behavior

Story: components-logo-variations--with-button-behavior · tags: components

<oc-interactive-overlay-v1 oc-aria-label="logo as a button">
  <oc-logo-v1 logo="otto"></oc-logo-v1>
</oc-interactive-overlay-v1>

Story source (TypeScript, verbatim from Storybook)

{
  name: "With button behavior",
  render({
    ...props
  }) {
    return html` <oc-interactive-overlay-v1 oc-aria-label="logo as a button">
      <oc-logo-v1 ${spread(props)}></oc-logo-v1>
    </oc-interactive-overlay-v1>`;
  }
}

With link behavior

Story: components-logo-variations--with-link-behavior · tags: components

The logo component as a link. Search engines will detect the href.

<oc-interactive-overlay-v1
  >${aTagHTMLComment}<a href="#" aria-label="logo as a link">
    <oc-logo-v1 logo="otto"></oc-logo-v1>
  </a>
</oc-interactive-overlay-v1>

Story source (TypeScript, verbatim from Storybook)

{
  name: "With link behavior",
  render({
    ...props
  }) {
    return html` <oc-interactive-overlay-v1
      >${aTagHTMLComment}<a href="#" aria-label="logo as a link">
        <oc-logo-v1 ${spread(props)}></oc-logo-v1>
      </a>
    </oc-interactive-overlay-v1>`;
  }
}

With masked link behavior

Story: components-logo-variations--with-masked-link-behavior · tags: components

The logo component as a masked link. Search engines will not detect the href.

<oc-interactive-overlay-v1
  base64-href="Iw=="
  oc-aria-label="logo as a masked link"
>
  <oc-logo-v1 logo="otto"></oc-logo-v1>
</oc-interactive-overlay-v1>

Story source (TypeScript, verbatim from Storybook)

{
  name: "With masked link behavior",
  render({
    ...props
  }) {
    return html` <oc-interactive-overlay-v1
      base64-href="Iw=="
      oc-aria-label="logo as a masked link"
    >
      <oc-logo-v1 ${spread(props)}></oc-logo-v1>
    </oc-interactive-overlay-v1>`;
  }
}

With link switch behavior

Story: components-logo-variations--with-link-switch-behavior · tags: components

<oc-interactive-overlay-v1 base64-href="Iz92YXJpYW50PWZvbw=="
  >${aTagSwitchHTMLComment}<a href="#" aria-label="logo as a link with switch behavior">
    <oc-logo-v1 logo="otto"></oc-logo-v1>
  </a>
</oc-interactive-overlay-v1>

Story source (TypeScript, verbatim from Storybook)

{
  name: "With link switch behavior",
  render({
    ...props
  }) {
    return html` <oc-interactive-overlay-v1 base64-href="Iz92YXJpYW50PWZvbw=="
      >${aTagSwitchHTMLComment}<a href="#" aria-label="logo as a link with switch behavior">
        <oc-logo-v1 ${spread(props)}></oc-logo-v1>
      </a>
    </oc-interactive-overlay-v1>`;
  }
}

All logo files

31 logos (pl_logo_<name>.svg), standalone SVGs in Svg folder. Use the name as logo on <oc-logo-v1>. otto-deprecated is the old wordmark kept by the component; do not use it.

Logo	File
`app-store`	pl_logo_app-store.svg
`ehi`	pl_logo_ehi.svg
`facebook`	pl_logo_facebook.svg
`github`	pl_logo_github.svg
`instagram`	pl_logo_instagram.svg
`linkedin`	pl_logo_linkedin.svg
`mastercard`	pl_logo_mastercard.svg
`otto`	pl_logo_otto.svg
`otto-ai`	pl_logo_otto-ai.svg
`otto-app`	pl_logo_otto-app.svg
`otto-deprecated`	pl_logo_otto-deprecated.svg
`otto-payments`	pl_logo_otto-payments.svg
`otto-up`	pl_logo_otto-up.svg
`otto-up-claim`	pl_logo_otto-up-claim.svg
`otto-up-claim-white`	pl_logo_otto-up-claim-white.svg
`otto-up-white`	pl_logo_otto-up-white.svg
`otto-white`	pl_logo_otto-white.svg
`paypal`	pl_logo_paypal.svg
`paypal-monogram`	pl_logo_paypal-monogram.svg
`pinterest`	pl_logo_pinterest.svg
`play-store`	pl_logo_play-store.svg
`sepa-horizontal`	pl_logo_sepa-horizontal.svg
`sepa-vertical`	pl_logo_sepa-vertical.svg
`slogan`	pl_logo_slogan.svg
`snapchat`	pl_logo_snapchat.svg
`tiktok`	pl_logo_tiktok.svg
`up`	pl_logo_up.svg
`up-white`	pl_logo_up-white.svg
`visa`	pl_logo_visa.svg
`xing`	pl_logo_xing.svg
`youtube`	pl_logo_youtube.svg

Overview

Logo

Default variation

Configuration

Usage guidelines

Logo sizes

Accessibility

ARIA hidden

Use oc-aria-label

Further reading

Configuration

Logo configuration

All Logos

All Logos

Otto

Payment

Social

Seal

App

API v1

Logo v1 API

API: <oc-logo-v1> (LogoV1)

Attributes / properties

Events

Variations

Variations

Default

With button behavior

With link behavior

With masked link behavior

With link switch behavior

All logo files

Use `oc-aria-label`

API: `<oc-logo-v1>` (LogoV1)