Foundations

SpectrumBar

The logo's colors as whole, adjacent stripes — Visualli's signature in place of a gradient.

• variant="bar" (default) for edges of bands, emails and cards; "letters" follows the wordmark's letter order as dots; "dots" for loaders and dividers.
• size is the bar height or dot diameter in px.
• Use at most once per view. Never blend the colors, never put text on it.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface SpectrumBarProps {
  variant?: 'bar' | 'dots' | 'letters';
  size?: number;
  label?: string
}

Use

import { SpectrumBar } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/SpectrumBar/README.md