Saucer

SAUCER designer brand-intro block — locale-aware bio text via BrandBlock, reused across product pages that credit the SAUCER design collaboration.

Article Blocks

Japanese

English

Source

/** @jsxRuntime automatic */
/** @jsxImportSource preact */
// Story for Saucer — new coverage (epic #1647, wave 6, #1662).
import { defineStory } from '@lib/styleguide/story-contract';
import type { StoryMeta } from '@lib/styleguide/story-contract';
import { Saucer } from './saucer';

const meta: StoryMeta = {
  title: 'Saucer',
  category: 'Article Blocks',
  description:
    'SAUCER designer brand-intro block — locale-aware bio text via BrandBlock, reused across product pages that credit the SAUCER design collaboration.',
  usage: `import { Saucer } from '@/components/mdx/saucer';\n\n<Saucer locale="ja" />`,
};
export default meta;

export const Japanese = defineStory({
  name: 'Japanese',
  render: () => <Saucer locale="ja" />,
});

export const English = defineStory({
  name: 'English',
  render: () => <Saucer locale="en" />,
});

Live CSS

Injected into the previews above. Saucer

/* Live CSS — edits inject into every preview above.
   Try overriding a component utility, e.g.:
   .btn { letter-spacing: 0.04em; } */