<brand-specimen>
Brand mark specimen web component that shows a brand-mark on light/dark surfaces, a size scale, and a clear-space box.
Overview
The <brand-specimen> component documents a brand mark for design-system guideline pages. It renders VB core's <brand-mark> on light and dark surface panels, across a size scale, and inside a clear-space box — all from a single src + name pair.
<brand-specimen src="/assets/logo.svg" name="Acme"></brand-specimen>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
src |
string | - | Logo image URL, passed through to each <brand-mark src> |
name |
string | Brand |
Brand name, passed through to each <brand-mark wordmark> |
data-sizes |
string | s m l xl |
Space-separated <brand-mark data-size> values for the scale row |
Custom Size Scale
Pass data-sizes to show a different set of sizes in the scale row.
<brand-specimen src="/assets/logo.svg" name="Acme" data-sizes="xs s m l xl 2xl"></brand-specimen>Light & Dark Surfaces
The two surface panels ([data-surface="light"] and [data-surface="dark"]) let reviewers check contrast and legibility before a mark ships on a real dark-mode surface. Each panel renders its own <brand-mark> instance.
Clear Space
The clear-space box (.bs-clear-box) shows the mark with a dashed outline padding guide, useful for documenting minimum clearance around the logo in guideline pages.