InlineCTA

Tarjeta de invitación dentro de una página para animar a una acción secundaria (conectar algo, mejorar algo).

Cuándo usarlo

Props. title, description, actions, icon o image (+ imageAlt). Tarjeta radius-xl con borde y shadow-xs.

Reglas. Una por pantalla como mucho, siempre descartable ("Ahora no"). Si bloquea el trabajo, no es un CTA: es un Alert.

Detalles. Funciona sin JavaScript. El título es un <h3> (en la guía era un bloque sin nivel de encabezado). La imagen va a la izquierda con 240px de ancho; sin imageAlt se trata como decorativa.

Ejemplos

Conecta tu banco

Importa los movimientos cada día sin subir extractos a mano.

Props

Prop	Tipo	Por defecto	Descripción
`title`obligatoria	`ReactNode`	—	Qué se propone, como "Conecta tu banco" (`<h3>`).
`description`	`ReactNode`	—	Qué gana quien lo haga.
`actions`	`ReactNode`	—	Los botones: siempre uno para descartar ("Ahora no") y la acción, la última.
`icon`	`IconName`	—	Icono destacado (`FeaturedIcon` modern gris de 48px) sobre el título.
`image`	`ReactNode`	—	Imagen a la izquierda (240px de ancho): una URL o un nodo.
`imageAlt`	`string`	—	Texto alternativo de la imagen cuando es una URL. Sin él, la imagen es decorativa.
`className`	`string`	—

Código

import { InlineCTA } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<InlineCTA
				icon="stars-02"
				title="Conecta tu banco"
				description="Importa los movimientos cada día sin subir extractos a mano."
				actions={
					<>
						<Button hierarchy="secondary" size="sm" onClick={descartar}>
							Ahora no
						</Button>
						<Button size="sm" href="/ajustes/bancos">Conectar</Button>
					</>
				}
			/>
		</>
	);
}

---
import { InlineCTA } from "@jotis-me/react";
---

<InlineCTA
	icon="stars-02"
	title="Conecta tu banco"
	description="Importa los movimientos cada día sin subir extractos a mano."
	actions={
		<>
			<Button hierarchy="secondary" size="sm" onClick={descartar}>
				Ahora no
			</Button>
			<Button size="sm" href="/ajustes/bancos">Conectar</Button>
		</>
	}
/>

Descartarla con onClick necesita una función: envuélvela en un .tsx y úsala como isla client:load.