---
title: "Product mark"
description: "Each of Arbol’s products as its brand tile, the same in every app. It is decoration: write the product’s name beside it. In the sidebar, productIcon(product) makes it an entry’s icon for the apps that open in a new tab."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Product mark

## Products

```tsx
import { ProductMark } from '@arbol-ai/ui';
import type { ArbolProduct } from '@arbol-ai/ui';

const PRODUCTS: { product: ArbolProduct; name: string }[] = [
  { product: 'raiz', name: 'Raíz' },
  { product: 'agenda', name: 'Agenda' },
  { product: 'ambar', name: 'Ámbar' },
  { product: 'account', name: 'Account' },
];

<ul className="grid gap-3 text-sm sm:grid-cols-2">
  {PRODUCTS.map(({ name, product }) => (
    <li className="flex items-center gap-2.5" key={product}>
      <ProductMark product={product} />
      {name}
    </li>
  ))}
</ul>
```

## Sizes

sm (20px) for lists and menus, md (32px) by default, lg (40px) and xl (48px) for headers.

```tsx
import { ProductMark } from '@arbol-ai/ui';

<div className="flex items-end gap-3">
  <ProductMark product="agenda" size="sm" />
  <ProductMark product="agenda" />
  <ProductMark product="agenda" size="lg" />
  <ProductMark product="agenda" size="xl" />
  <span className="sr-only">Agenda</span>
</div>
```

## Stacked

A ring in the background’s color sets each tile apart.

```tsx
import { ProductMark } from '@arbol-ai/ui';
import type { ArbolProduct } from '@arbol-ai/ui';

const PRODUCTS: { product: ArbolProduct; name: string }[] = [
  { product: 'raiz', name: 'Raíz' },
  { product: 'agenda', name: 'Agenda' },
  { product: 'ambar', name: 'Ámbar' },
  { product: 'account', name: 'Account' },
];

<div className="flex -space-x-3">
  {PRODUCTS.slice(0, 3).map(({ product }) => (
    <ProductMark
      className="ring-background shadow-sm ring-4"
      key={product}
      product={product}
      size="xl"
    />
  ))}
  <span className="sr-only">Raíz, Agenda and Ámbar</span>
</div>
```

## Source

The examples above are [`src/blocks/product-mark/product-mark.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/blocks/product-mark/product-mark.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/blocks/product-mark/index.mdx