Skip to main content

LogoMain

LogoMain

Brand logo component with multiple layouts and variants

Tags: component branding logo

View Demo

LogoMain displays the Classic Homes brand logo with support for multiple layouts, color variants, and optional environment indicators.

Import​

<script>
  import { LogoMain } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<LogoMain />

Props​

Prop Type Default Description
variant 'horizontal' | 'stacked' | 'icon' 'horizontal' Layout variant
color 'dark' | 'light' | 'mono-dark' | 'mono-light' 'dark' Color scheme
subtitle string - Optional product label (Figtree 600, uppercase, brand red, left-aligned under the wordmark)
environment 'local' | 'dev' | 'demo' - Environment indicator
size 'sm' | 'md' | 'lg' 'md' Size preset
class string - Additional classes
ariaLabel string 'Classic Homes' Accessible label

Variants​

Horizontal (Default)​

Logo icon and text side by side:

<LogoMain variant="horizontal" />

Stacked​

Logo icon above text:

<LogoMain variant="stacked" />

Icon Only​

Just the logo icon:

<LogoMain variant="icon" />

Colors​

Dark (Default)​

For light backgrounds:

<div class="bg-white p-4">
  <LogoMain color="dark" />
</div>

Light​

For dark backgrounds:

<div class="bg-gray-900 p-4">
  <LogoMain color="light" />
</div>

Mono Dark​

Navy monochrome for light backgrounds:

<LogoMain color="mono-dark" />

Mono Light​

White monochrome for dark backgrounds:

<div class="bg-primary p-4">
  <LogoMain color="mono-light" />
</div>

Sizes​

<LogoMain size="sm" />
<!-- Small -->
<LogoMain size="md" />
<!-- Medium (default) -->
<LogoMain size="lg" />
<!-- Large -->

Subtitle​

Add a product or application name:

<LogoMain subtitle="THEME" />
<LogoMain subtitle="MY HOME" />
<LogoMain subtitle="CHAPI" />

Environment Indicator​

Show development environment badges:

<LogoMain environment="local" />
<!-- Blue "LOCAL" badge -->
<LogoMain environment="dev" />
<!-- Yellow "DEV" badge -->
<LogoMain environment="demo" />
<!-- Gray "DEMO" badge -->

Combined Options​

<LogoMain variant="horizontal" color="dark" subtitle="MY HOME" environment="demo" size="md" />

Examples​

<header class="flex items-center h-16 px-4 border-b">
  <a href="/">
    <LogoMain variant="horizontal" size="md" ariaLabel="" />
  </a>
</header>
<footer class="bg-gray-900 py-8">
  <LogoMain color="light" size="sm" />
</footer>
<div class="flex flex-col items-center py-8">
  <LogoMain variant="stacked" size="lg" subtitle="MY HOME" />
  <h1 class="mt-4 text-2xl font-bold">Sign In</h1>
</div>
<LogoMain variant={sidebarCollapsed ? 'icon' : 'horizontal'} size="md" />

Development Environment​

<LogoMain environment={import.meta.env.MODE === 'production' ? undefined : 'dev'} />

Color Reference​

Color Logo Title Subtitle
dark Brand Red (#C50F22) Black Gray
light White White White (80%)
mono-dark Navy (#002e3f) Navy Gray
mono-light White White White (80%)

Size Reference​

Size Icon Title Subtitle
sm 24px 1rem 0.7rem
md 32px 1.2rem 0.85rem
lg 40px 1.4rem 1rem

Accessibility​

  • Default role="img" with aria-label
  • Set ariaLabel="" when wrapped in a labeled link
  • SVG is aria-hidden
On this page