---
title: Logo Clearspace
description: Show the protected space around your logo with a labeled measurement diagram.
sidebar:
  order: 9
---

import previewCode from "../../snippets/logo-clearspace.mdx?raw";
import variantCode from "../../snippets/logo-clearspace-logotype.mdx?raw";

<ComponentPreview path="logo-clearspace" code={previewCode} />

## Usage

Display the configured logotype’s clearspace.
Configure the artwork and `logo.clearspace` in [Logos](/logos).

```mdx
<LogoClearspace />
```

## Examples

### Show the brandmark

The opening preview uses `mark="brandmark"`. Both marks share the same
configured clearspace rule; choose the artwork needed for the current section.

```mdx
<LogoClearspace mark="brandmark" />
```

### Show the logotype

The opening preview uses the brandmark. Omit `mark` to show the wider logotype
with the same configured clearspace rule.

<ComponentPreview path="logo-clearspace-logotype" code={variantCode} />

### Configure the protected space

Set this property inside `brand.logo` in `brandtree.config.ts` to update both
mark diagrams. The ratio controls the diagram padding; the unit provides the
human-readable measurement in its caption. Keep both aligned with your rule.

```ts
clearspace: { ratio: 0.5, unit: "the height of the lowercase b" },
```

## Clearspace behavior

The diagram uses `brand.logo.clearspace.ratio` for its padding and
`brand.logo.clearspace.unit` in the localized caption. There is no per-instance
spacing override. Measurement ticks are hidden at viewport widths up to `34rem`;
the protected zone and caption remain visible.

## API reference

| Prop | Type | Default | Description |
| - | - | - | - |
| `brand?` | `BrandConfig` | `props.brand` | Override the resolved brand for this component. Supplied automatically in Brandtree MDX. |
| `ui?` | `UIStrings` | `props.ui` | Override interface strings for this component. Supplied automatically in Brandtree MDX. |
| `mark?` | `"logotype" \| "brandmark"` | `"logotype"` | |
| `class?` | `string` | - | Additional class on the outer element. |