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 renders the clickable EBRAINS brand mark (inline SVG).

Props:

variant (attribute type): 'positive' (dark logo for light backgrounds) or 'negative' (light logo for dark backgrounds).
href: where the logo links to (defaults to /). The logo is the click-to-home affordance in eds-header, eds-fullscreen-menu and the eds-form brand hero.

Clicks emit an analytics event (category/tag/name/action).

NOTE: the SVG has a viewBox but no intrinsic width, so the host needs a sized block parent to render (e.g. eds-header wraps it in a fixed-width container).

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`	`'/'`
`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-form
eds-fullscreen-menu
eds-header
eds-splash-screen
logo-space
logo-variations-horizontal
logo-variations-vertical

Graph

graph TD;
  eds-form --> eds-logo
  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