Logo
The Marmot wordmark, or its "M" monogram, as fixed artwork.
<a href="/" aria-label="Marmot home"><mm-logo size="24" label=""></mm-logo></a>
<mm-logo variant="monogram" size="24"></mm-logo>
Guidance
The Marmot logo is the wordmark, rendered from the fixed artwork in the Logos asset group. It is
used as supplied, so the wordmark font is not loaded. It takes ink (mm-text): dark
ink on Light and paper-coloured ink on Peat. The monogram is the wordmark's own "M", cropped from
the same artwork, for places too narrow for the full name such as the collapsed sidebar rail. There
is no pictorial mark. Keep clear space of at least CLEAR_SPACE_RATIO of the height around it, and
never place it in a tile or on a gradient.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
variant | variant | 'wordmark' | 'monogram' | 'wordmark' | wordmark (default) or monogram, the wordmark's "M" alone. |
size | size | number | 24 | Height in pixels of the artwork box. |
label | label | string | 'Marmot' | Accessible name. Set it to an empty string when the logo sits beside the visible name "Marmot". |
clearSpace | clear-space | boolean | false | Pads the logo by its minimum clear space. |
CSS parts
| Part | Description |
|---|---|
logo | The element carrying the accessible name. |
wordmark | The artwork. |
CSS custom properties
| Property | Description |
|---|---|
--mm-logo-monogram | Set to 1 to crop to the monogram from CSS, as the collapsed sidebar rail does. Default 0. |
Examples
Every state of mm-logo in Storybook, with keyboard and screen reader tests.