eds-logo

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out the practical implementations of component.

When you’re using the component directly in HTML (or in frameworks that don’t support property binding), you must pass the values like:

In React and Vue

Overview

EdsLogo is a logo component designed to display a clickable logo that can link to a specified URL.

Key Features:

Supports various logo styles and orientations.
Emits a custom matomoEvent for tracking click interactions.

Props:

href (string): The URL to navigate to when the logo is clicked (defaults to the root path /).
orientation (string): The orientation of the logo (horizontal or vertical).
type (string): The style of the logo (color, black, color-white, white).

Events:

matomoEvent: Emitted when the logo is clicked, carrying metadata for analytics tracking, including the event category, tag, name, and action.

This component is ideal for navigation and branding, with options for style customization and interaction tracking.

Properties

Property	Attribute	Description	Type	Default
`href`	`href`	The URL that the logo should link to. When clicked, the user will be navigated to this URL. Defaults to the root path (’/’).	`string`	`'/'`
`label`	`label`		`string`	`'Home'`
`orientation`	`orientation`	The orientation of the logo to display. - `"horizontal"` displays the logo horizontally. - `"vertical"` displays the logo vertically.	`"horizontal" \| "vertical"`	`'horizontal'`
`variant`	`type`	The visual variant of the logo. `'positive'` for dark logo on light backgrounds, `'negative'` for light logo on dark backgrounds.	`"negative" \| "positive"`	`'positive'`

Dependencies

Used by

eds-fullscreen-menu
eds-header
eds-splash-screen
logo-space
logo-variations-horizontal
logo-variations-vertical

Graph

graph TD;
  eds-fullscreen-menu --> eds-logo
  eds-header --> eds-logo
  eds-splash-screen --> eds-logo
  logo-space --> eds-logo
  logo-variations-horizontal --> eds-logo
  logo-variations-vertical --> eds-logo
  style eds-logo fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS