docs menu
Wordmark
An app's name in VT323 with an underscore and a blinking block cursor.
import { Wordmark } from "@meowerse/ui"; · source packages/ui/src/components/Wordmark.tsx
variants and states
props
| prop | type | default | required |
|---|---|---|---|
name | "meowerse" | "meowsenger" | "auth" | "ui" which app's name to render. | — | yes |
href | string turns the wordmark into a home link, named "<name> home". | — | no |
className | string extra class names to append. | — | no |
css custom properties
| variable | dark | light |
|---|---|---|
--c-accent | #00ff82 | #0a6e3c |
--c-fg | #ededeb | #1a1a1c |
--control-height | 44px | same |
--font-mark | "VT323 Mark", var(--font-mono) | same |
Classes: .mw-wordmark. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.
usage
meowerse
import { Wordmark } from "@meowerse/ui";
<Wordmark name="meowerse" /><span class="mw-wordmark">meowerse_<span class="mw-cursor mw-cursor--blink" aria-hidden="true"></span></span>meowsenger
import { Wordmark } from "@meowerse/ui";
<Wordmark name="meowsenger" /><span class="mw-wordmark">meowsenger_<span class="mw-cursor mw-cursor--blink" aria-hidden="true"></span></span>auth
import { Wordmark } from "@meowerse/ui";
<Wordmark name="auth" /><span class="mw-wordmark">auth_<span class="mw-cursor mw-cursor--blink" aria-hidden="true"></span></span>as a home link
import { Wordmark } from "@meowerse/ui";
<Wordmark name="ui" href="/ui/" /><a class="mw-wordmark" href="/ui/" aria-label="ui home">ui_<span class="mw-cursor mw-cursor--blink" aria-hidden="true"></span></a>accessibility
- As a link, it is named "<name> home" and is 44 px tall.
- The cursor is aria-hidden and stops blinking under reduced motion.
do and don't
do
- Use one wordmark per page, in the header or the hero.
don't
- Don't set other text in VT323: its subset only has the wordmark letters.