Light Dark System

Logo

<cw-logo> | CwLogo
Since 1.3 experimental

A branding mark for a site’s navigation, header, or footer, with automatic light/dark image swapping and an optional home link.

Set image (and optionally dark-image) to your brand mark. For the best accessible experience, always pass a brand-specific label — e.g. label="Acme home" — rather than relying on the default “Home”. 

<cw-logo image="/assets/images/wordmark.svg" href="/" label="Cordwainer home"></cw-logo>

import CwLogo from '@cordwainer/cw-elements/dist/react/logo';

const App = () => <CwLogo image="/assets/images/wordmark.svg" href="/" label="Cordwainer home" />;

Examples

Light and Dark Variants

Many brands ship separate logo artwork for light and dark surfaces. Set dark-image alongside image and the correct one swaps automatically based on the nearest cw-theme-light/cw-theme-dark ancestor class — no extra markup or JavaScript required. If dark-image is omitted, image is used for both themes. 

<cw-logo
  image="/assets/images/Cordwainer-logo-light-mode-vector.svg"
  dark-image="/assets/images/Cordwainer-logo-dark-mode-vector.svg"
  href="/"
  label="Cordwainer home"
></cw-logo>

import CwLogo from '@cordwainer/cw-elements/dist/react/logo';

const App = () => (
  <CwLogo
    image="/assets/images/Cordwainer-logo-light-mode-vector.svg"
    darkImage="/assets/images/Cordwainer-logo-dark-mode-vector.svg"
    href="/"
    label="Cordwainer home"
  />
);

Static Branding Mark

Omit href to render the logo as a plain, non-interactive graphic instead of a link — useful in places like a print stylesheet or a footer’s “powered by” credit where it shouldn’t be clickable. 

<cw-logo image="/assets/images/wordmark.svg" label="Cordwainer"></cw-logo>

import CwLogo from '@cordwainer/cw-elements/dist/react/logo';

const App = () => <CwLogo image="/assets/images/wordmark.svg" label="Cordwainer" />;

Custom Content

If an <img> doesn’t fit your needs — for example, an inline <svg> that recolors itself with currentColor instead of shipping two separate files — provide it via the default slot. This overrides the built-in image/dark-image rendering entirely, so you’re responsible for any light/dark handling yourself in that case. 

<cw-logo href="/" label="Cordwainer home">
  <svg class="logo-demo-icon" viewBox="0 0 24 24">
    <path
      fill="currentColor"
      d="M12 2 2 7l10 5 10-5-10-5Zm0 7.5L4.5 6 12 2.5 19.5 6 12 9.5ZM2 12l10 5 10-5v5l-10 5-10-5v-5Z"
    />
  </svg>
</cw-logo>

<style>
  .logo-demo-icon {
    height: 100%;
    width: auto;
  }
</style>

import CwLogo from '@cordwainer/cw-elements/dist/react/logo';

const css = `
  .logo-demo-icon {
    height: 100%;
    width: auto;
  }
`;

const App = () => (
  <>
    <CwLogo href="/" label="Cordwainer home">
      <svg className="logo-demo-icon" viewBox="0 0 24 24">
        <path
          fill="currentColor"
          d="M12 2 2 7l10 5 10-5-10-5Zm0 7.5L4.5 6 12 2.5 19.5 6 12 9.5ZM2 12l10 5 10-5v5l-10 5-10-5v-5Z"
        />
      </svg>
    </CwLogo>

    <style>{css}</style>
  </>
);

Sizing

Use the --cw-logo-height custom property to control the logo’s height. Width scales automatically to preserve the image’s aspect ratio. 

<cw-logo class="logo-demo-large" image="/assets/images/wordmark.svg" label="Cordwainer"></cw-logo>

<style>
  .logo-demo-large {
    --cw-logo-height: 3rem;
  }
</style>

import CwLogo from '@cordwainer/cw-elements/dist/react/logo';

const css = `
  .logo-demo-large {
    --cw-logo-height: 3rem;
  }
`;

const App = () => (
  <>
    <CwLogo className="logo-demo-large" image="/assets/images/wordmark.svg" label="Cordwainer" />

    <style>{css}</style>
  </>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/logo/logo.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@cordwainer/cw-elements@1.5.2/cdn/components/logo/logo.js';

To import this component using a bundler:

import '@cordwainer/cw-elements/dist/components/logo/logo.js';

To import this component as a React component:

import CwLogo from '@cordwainer/cw-elements/dist/react/logo';

Slots

Name Description
(default) Custom logo markup (e.g. an inline <svg> or <picture>), overriding image/dark-image.

Learn more about using slots.

Properties

Name Description Reflects Type Default
image The default (light-mode) logo image URL. string ''
darkImage
dark-image 		The dark-mode logo image URL. Falls back to image when unset. string ''
href When set, the logo renders as a link to this URL — typically the site’s home page. string ''
target Tells the browser where to open the link. Only used when href is present. '_blank' | '_parent' | '_self' | '_top' | '' ''
rel The rel attribute for the link. Only used when href is present. Mirrors <cw-button>’s default of noreferrer noopener as a safe default when target is used. string 'noreferrer noopener'
label The accessible name for the logo. Defaults to a localized “Home” — for the best experience, pass a brand-specific value instead, e.g. label="Acme home". string ''
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name Description Default
--cw-logo-height The height of the logo. Width scales automatically.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper (an <a> when href is set, otherwise a <span>).
image The light-mode (default) logo image.
image-dark The dark-mode logo image.

Learn more about customizing CSS parts.