Logo

atoms

Original ePassLive logo with 4 elements: QR Code (mode-adaptive), Code Scanner Frame (mode-adaptive), Teal 'e' lettermark (brand-locked), PSSLIVE wordmark (mode-adaptive). Theme-aware via --logo-fg token.

ARIA Role: img

Demo

Demo for Logo (atoms)

Original ePassLive logo with 4 elements: QR Code (mode-adaptive), Code Scanner Frame (mode-adaptive), Teal 'e' lettermark (brand-locked), PSSLIVE wordmark (mode-adaptive). Theme-aware via --logo-fg token.

Props

PropTypeRequiredDefaultDescription
size'sm' | 'md' | 'lg'No'md'
hrefstringNo—

TypeScript Interface

interface LogoProps {
  size?: 'sm' | 'md' | 'lg';
  href?: string;
  ariaLabel?: string;
  className?: string;
}

Assertions (NASA Rule 5)

  • [type]Logo must render as inline SVG (not <img>) so currentColor theming works(NASA Rule 5)
  • [aria]Must have aria-label='ePassLive' and <title>ePassLive</title>(WCAG 1.1.1)

Usage

Import

import { Logo } from '@epasslive/design-system'

Basic

<Logo />

With Variants

<Logo variant="primary" size="md" />