Product mark | Arbol UI

Language

Appearance

Products

Raíz
Agenda
Ámbar
Account

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.

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.

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, which the library’s tests render too.