componente · @solu30/ui-kit/display

InfoCard

Bloque de mensaje en cuatro tonos semánticos, con cierre opcional; a diferencia de Alert, no tiene título propio.

1 sitio de import en 1 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

elliot

El componente, montado

Cargando el espécimen…

export function InfoMatrix() {
  return (
    <Stage label="InfoCard · 4 variantes  +  InfoSection · ficha de contacto" tall wide>
      <div className="flex w-full flex-col gap-4">
        <div className="flex w-full flex-col gap-2.5">
          {INFO_VARIANTS.map((v) => (
            <InfoCard key={v} variant={v} dismissible={v === 'info'} onDismiss={() => {}}>
              {INFO_COPY[v]}
            </InfoCard>
          ))}
        </div>
        <div className="w-full max-w-sm">
          <InfoSection items={CONTACT_ITEMS} columns={2} />
        </div>
      </div>
    </Stage>
  )
}

De specimens/display.tsx · InfoMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Cómo se usa

import { InfoCard } from '@solu30/ui-kit/display'

Props

5 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
variant	sí	`InfoCardVariant`	—
children	sí	`React.ReactNode`	—
dismissible	opcional	`boolean`	—
onDismiss	opcional	`() => void`	—
className	opcional	`string`	—