Saltar al contenido
ssntl/ui

Intro

Una presentación personal o de estudio: un retrato con su leyenda, una frase que dice quién y dónde, dos acciones y la disponibilidad en palabras.

A framed landscape painting in soft blues and greens

Illustrator

Hi, I’m Lucía, an illustrator and brand designer based in Antigua, Guatemala.

I take scattered ideas, loose sketches and too many colors, and bring them down to one clear picture. The harder the brief, the more fun it gets.

Booking projects for early 2027

Instalación

Agrégalo con el CLI de shadcn o copia el código a mano.

$ pnpm dlx shadcn@latest add @ssntl/intro

Referencia de API

  • mediaobligatorioTipo: React.ReactNodeAn <img> with alt text; it fills a 3:4 frame.Por defecto:—
  • mediaLabel?Tipo: React.ReactNodeA short caption over the bottom of the portrait.Por defecto:—
  • titleobligatorioTipo: React.ReactNodePor defecto:—
  • description?Tipo: React.ReactNodePor defecto:—
  • actions?Tipo: React.ReactNodeOne primary and one secondary Button.Por defecto:—
  • status?Tipo: React.ReactNodeAvailability in words: “Booking projects for March”.Por defecto:—

También acepta todos los props de <section>.

Reglas

Lo que este componente espera de ti, tal como se instala en components/blocks/intro.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).

components/blocks/intro.md
## Reglas de Intro

- El retrato es un Frame 3:4; la leyenda va sobre un degradado oscuro para leerse sobre cualquier foto.
- **El encabezado es la presentación.** Una frase con quién, qué y dónde, balanceada en sus líneas.
- Una acción principal y una secundaria; la segunda nunca compite con la primera.
- La disponibilidad se dice con palabras; el punto verde solo la repite.
- Dale al retrato un texto alternativo real; una imagen decorativa lleva `alt=""`.
Abrir el archivo de reglas completo (se abre en otra pestaña)