NewLabel

Shared "NEW" chip — crimson bg, white text, offset shadow. The single source of truth for the NEW label identity used by the guides-landing inline badge (and matched by the product image overlay badge).

Badges & Tags

Inline (after title)

Standalone

/** @jsxRuntime automatic */ /** @jsxImportSource preact */ // Story for the shared NewLabel chip (issue #2041) — the single source of // truth for the site's red + shadow "NEW" marker. import { defineStory } from '@lib/styleguide/story-contract'; import type { StoryMeta } from '@lib/styleguide/story-contract'; import NewLabel from './new-label'; const meta: StoryMeta = { title: 'NewLabel', category: 'Badges & Tags', description: 'Shared "NEW" chip — crimson bg, white text, offset shadow. The single source of truth for the NEW label identity used by the guides-landing inline badge (and matched by the product image overlay badge).', usage: `import NewLabel from '@/src/components/shared/new-label';\n\n<h3>OXI ONE MKIIガイド{' '}<NewLabel /></h3>`, }; export default meta; export const Inline = defineStory({ name: 'Inline (after title)', render: () => ( <span class="font-futura font-semibold text-xl"> OXI ONE MKIIガイド <NewLabel /> </span> ), }); export const Standalone = defineStory({ name: 'Standalone', render: () => ( <span class="text-base"> <NewLabel /> </span> ), });