AppLockup
The logo with Skribly and the tool name, for the title bar, the sidebar and sign-in pages. Give it href to make it the link home; compact keeps only the logo in a folded sidebar.
- AppLockup
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, AppLockup
Dark theme, AppLockup
High contrast theme, AppLockup
UsageLink to the section Usage
import { AppLockup } from '@skribly/ui/brand'<AppLockup kind="agent" tool="Agent" href="/" />
<AppLockup kind="tracker" tool="Tracker" tone="nav" compact href="/" />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The words name it and the logo is hidden.
- As a link the whole lockup is the target, at least 24px high. label can give a fuller name, which should start with the visible words. compact hides the words on screen only, so the link keeps its name.
This demo runs through axe in all three themes on every test run. See what the tests check.