Logo
The cascivo mark and its sanctioned lockups, as inline SVG
Category: display · WCAG 2.2-AA · logo, brand, mark, wordmark, lockup, identity
Variants
- mark
- mark-accent
- horizontal
- stacked
- nav
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'mark' | 'mark-accent' | 'horizontal' | 'stacked' | 'nav' | mark | `mark` and `mark-accent` render the square alone; `horizontal`, `stacked` and `nav` add the wordmark. `nav` is the only lockup permitted below 24px. |
size | number | 18 for `nav`, 32 otherwise | Mark height in px. Clamped to a 16px floor — below that the notch closes optically. |
Design tokens
--cascivo-color-accent--cascivo-font-display
When to use
- Placing the cascivo logo in a header, footer, auth screen or splash
- Needing the mark to repaint with the surrounding data-theme instead of shipping a per-theme image
- Any spot that would otherwise hand-roll the logo SVG or point an <img> at logo.svg
When not to use
- Rendering an adopter's own brand — this is the cascivo mark, not a generic logo slot; pass your own node to AuthLayout's `logo` or ShellHeader's `brand` instead
- Below 16px — the notch closes optically; use the wordmark alone
- Favicons and app icons, which are static files with their own optical centring (see https://cascivo.com/docs/brand)
How to build an accessible Logo in React →
Examples
Mark
<Logo />Two colour
The accent fills the notch. Decoration — the mark is complete without it.
<Logo variant="mark-accent" />Horizontal lockup
<Logo variant="horizontal" />Nav lockup
18px mark, 16px wordmark, 10px gap — the only lockup allowed below 24px.
<Logo variant="nav" />Stacked
<Logo variant="stacked" size={48} />Related components
- ShellHeader — The nav lockup is what the header brand slot takes