Box
experimentalLa API puede cambiar sin una versión mayor. Desde la versión 0.1.0.
Caja con borde pixel de 3 px y esquinas escalonadas: agrupa contenido en tarjetas y paneles.
import { Box } from '@pipepath/brand-ui';Ejemplos
tema oscurotúnel
mc-7f3k.spawn.gg
arcade clarotúnel
mc-7f3k.spawn.gg
Props
| Prop | Tipo | Por defecto | Descripción (en inglés, desde el código) |
|---|---|---|---|
as | 'div' | 'section' | 'article' | 'li' | 'div' | Element to render: the one that fits the content (`li` inside a list, `section` for a page region). |
children (obligatoria) | ReactNode | — | |
className | string | — | |
ref | Ref<HTMLElement> | — |
Cuándo usarlo
- Para agrupar contenido relacionado en tarjetas y paneles de landings y páginas de marca.
- Elige el elemento con
as:lidentro de una lista,sectionpara una región de la página.
Cuándo no usarlo
- Para cada párrafo o como decoración sin agrupar nada: el borde pierde sentido.
- Como botón: si se puede presionar, usa
Button.