Kobana UI
GitHub

Espaçamento

Escala de espaçamento do Kobana UI

Escala

Baseada em incrementos de 4px, alinhada com as classes do Tailwind CSS.

TokenValorTailwindUso
xs4pxp-1, gap-1Entre ícone e texto
sm8pxp-2, gap-2Padding de badges
md16pxp-4, gap-4Padding de cards
lg24pxp-6, gap-6Entre seções
xl32pxp-8, gap-8Margens de página
2xl48pxp-12, gap-12Gaps de seções grandes

Uso

Os tokens de espaçamento são mapeados para classes Tailwind. Prefira usar as classes diretamente:

<div className="p-4 gap-4">   {/* md = 16px */}
  <div className="p-2 gap-2"> {/* sm = 8px */}
    <span className="gap-1">  {/* xs = 4px */}
      Conteúdo
    </span>
  </div>
</div>

On this page