#Logo

The Wallarm logo in its three forms — icon, wordmark and full — sized by height, with the width following. color is a decision about the surface rather than a style choice: default on light, white on a dark surface where the mark should keep its brand colour, and full-white only where the whole lockup has to be a single colour. It renders a bare svg with no accessible name, so pass an aria-label where the logo is the only thing naming a link, and leave it unlabelled where a heading beside it already does.

Source · Storybook

#Usage

import { Logo } from '@wallarm-org/design-system/Logo';

#Examples

#Types

The three forms at one height: the icon alone where space is tight, the wordmark where the mark already appears nearby, and the full lockup everywhere else.

#Styles

Each colour style on the surface it is for. white keeps the icon’s brand colour and turns only the wordmark white; full-white gives up the colour entirely.

#Sizes

xs to 2xl, 10px to 32px of height. The three forms sit side by side because the same height buys three very different footprints — 34, 75 and 118 units of viewBox width.

#Props