Carrusel Hero React
Componente en react de íconos del kit USS
1import { 2 CarouselHero, 3 CarouselHeroItem, 4} from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
Carousel hero
Este componente es el contenedor del carrusel hero, y debe contener los items del carrusel como hijos. No tiene props en particular, salvo className, style, etc.
Carousel hero item
Este componente es el item del carrusel hero, y es el que contiene la imagen de fondo, y el contenido que se muestra sobre la imagen.
| Prop | Tipo | default | Descripción |
|---|---|---|---|
| image | JSX | - | tag img del item del carrusel hero |
| content | JSX | - | Contenido del item del carrusel hero |
Ejemplo de uso
Lorem ipsum dolor sit amet, consecteturd adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla.
Boton TerciarioLorem ipsum dolor sit amet, consecteturd adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla.
Boton TerciarioLorem ipsum dolor sit amet, consecteturd adipiscing elit
Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla.
Boton Terciario1Cargando...Carousel cards
Este componente es el contenedor del carrusel de cards, recibe los cards como elementos hijos, es un solo componente, no tiene un componente items dedicado.
| Prop | Tipo | default | Descripción |
|---|---|---|---|
| visibleItems | number | 3 | Cantidad de items visibles en el carrusel en desktop |
| title | string | - | Título del carrusel |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Botón terciarioLorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Botón terciarioLorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Botón terciarioLorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Botón terciarioLorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Botón terciarioLorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Botón terciarioLorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Botón terciarioLorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Botón terciarioLorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Botón terciarioLorem ipsum dolor sit amet, consectetur adipiscing elit. Nibh consectetur consequat scelerisque donec imperdiet donec. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Botón terciario1Cargando...