Estilos

Componentes

Formularios

Organismos

Carrusel

El carrusel permite a las personas usuarias navegar horizontalmente para ver diferentes contenidos colocados dentro del componente, pueden ser grupos de tarjetas o contenido destacado.

De destacados

Con fondo blanco

<div id="carousel_2" class="carousel white slide">
			<div class="carousel-inner">
				<div class="carousel-item active">
					<div class="panel-horizontal-content">
						<div class="panel-horizontal">
							<img src="images/destacado.jpg" alt="descripción de imagen" class="panel-img" />
							<div class="panel-body">
								<h2 class="panel-title">Título del destacado</h2>
								<p class="panel-text">
									Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
									líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
									destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
									negritas ni enlaces
								</p>
								<div class="panel-footer">
									<a class="btn btn-secondary btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
									<a class="btn btn-outline-secondary btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item">
					<div class="panel-horizontal-content">
						<div class="panel-horizontal">
							<img src="images/destacado.jpg" alt="descripción de imagen" class="panel-img" />
							<div class="panel-body">
								<h2 class="panel-title">Título del destacado</h2>
								<p class="panel-text">
									Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
									líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
									destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
									negritas ni enlaces
								</p>
								<div class="panel-footer">
									<a class="btn btn-secondary btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
									<a class="btn btn-outline-secondary btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item">
					<div class="panel-horizontal-content">
						<div class="panel-horizontal">
							<img src="images/destacado.jpg" alt="descripción de imagen" class="panel-img" />
							<div class="panel-body">
								<h2 class="panel-title">Título del destacado</h2>
								<p class="panel-text">
									Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
									líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
									destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
									negritas ni enlaces
								</p>
								<div class="panel-footer">
									<a class="btn btn-secondary btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
									<a class="btn btn-outline-secondary btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="carousel-indicators">
				<button
					type="button"
					data-bs-target="#carousel_2"
					data-bs-slide-to="0"
					class="active"
					aria-current="true"
					aria-label="Slide 1"
				></button>
				<button type="button" data-bs-target="#carousel_2" data-bs-slide-to="1" aria-label="Slide 2"></button>
				<button type="button" data-bs-target="#carousel_2" data-bs-slide-to="2" aria-label="Slide 3"></button>
			</div>

			<button class="carousel-control-prev" type="button" data-bs-target="#carousel_2" data-bs-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Anterior</span>
			</button>
			<button class="carousel-control-next" type="button" data-bs-target="#carousel_2" data-bs-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Siguiente</span>
			</button>
		</div>

Con fondo claro

<div id="carousel-light" class="carousel light slide">
			<div class="carousel-inner">
				<div class="carousel-item active">
					<div class="panel-horizontal-content">
						<div class="panel-horizontal">
							<img src="images/destacado.jpg" alt="descripción de imagen" class="panel-img" />
							<div class="panel-body">
								<h2 class="panel-title">Título del destacado</h2>
								<p class="panel-text">
									Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
									líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
									destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
									negritas ni enlaces
								</p>
								<div class="panel-footer">
									<a class="btn btn-light btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
									<a class="btn btn-outline-light btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item">
					<div class="panel-horizontal-content">
						<div class="panel-horizontal">
							<img src="images/destacado.jpg" alt="descripción de imagen" class="panel-img" />
							<div class="panel-body">
								<h2 class="panel-title">Título del destacado</h2>
								<p class="panel-text">
									Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
									líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
									destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
									negritas ni enlaces
								</p>
								<div class="panel-footer">
									<a class="btn btn-light btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
									<a class="btn btn-outline-light btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item">
					<div class="panel-horizontal-content">
						<div class="panel-horizontal">
							<img src="images/destacado.jpg" alt="descripción de imagen" class="panel-img" />
							<div class="panel-body">
								<h2 class="panel-title">Título del destacado</h2>
								<p class="panel-text">
									Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
									líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
									destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
									negritas ni enlaces
								</p>
								<div class="panel-footer">
									<a class="btn btn-light btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
									<a class="btn btn-outline-light btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="carousel-indicators">
				<button
					type="button"
					data-bs-target="#carousel-light"
					data-bs-slide-to="0"
					class="active"
					aria-current="true"
					aria-label="Slide 1"
				></button>
				<button type="button" data-bs-target="#carousel-light" data-bs-slide-to="1" aria-label="Slide 2"></button>
				<button type="button" data-bs-target="#carousel-light" data-bs-slide-to="2" aria-label="Slide 3"></button>
			</div>

			<button class="carousel-control-prev" type="button" data-bs-target="#carousel-light" data-bs-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Anterior</span>
			</button>
			<button class="carousel-control-next" type="button" data-bs-target="#carousel-light" data-bs-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Siguiente</span>
			</button>
		</div>

Con fondo oscuro

<div id="carousel-dark" class="carousel dark slide">
			<div class="carousel-inner">
				<div class="carousel-item active">
					<div class="panel-horizontal-content">
						<div class="panel-horizontal">
							<img src="images/destacado.jpg" alt="descripción de imagen" class="panel-img" />
							<div class="panel-body">
								<h2 class="panel-title">Título del destacado</h2>
								<p class="panel-text">
									Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
									líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
									destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
									negritas ni enlaces
								</p>
								<div class="panel-footer">
									<a class="btn btn-light btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
									<a class="btn btn-outline-light btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item">
					<div class="panel-horizontal-content">
						<div class="panel-horizontal">
							<img src="images/destacado.jpg" alt="descripción de imagen" class="panel-img" />
							<div class="panel-body">
								<h2 class="panel-title">Título del destacado</h2>
								<p class="panel-text">
									Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
									líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
									destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
									negritas ni enlaces
								</p>
								<div class="panel-footer">
									<a class="btn btn-light btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
									<a class="btn btn-outline-light btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="carousel-item">
					<div class="panel-horizontal-content">
						<div class="panel-horizontal">
							<img src="images/destacado.jpg" alt="descripción de imagen" class="panel-img" />
							<div class="panel-body">
								<h2 class="panel-title">Título del destacado</h2>
								<p class="panel-text">
									Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
									líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
									destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
									negritas ni enlaces
								</p>
								<div class="panel-footer">
									<a class="btn btn-light btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
									<a class="btn btn-outline-light btn-lg" href="#" rel="noopener noreferrer">
										Botón
									</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="carousel-indicators">
				<button
					type="button"
					data-bs-target="#carousel-dark"
					data-bs-slide-to="0"
					class="active"
					aria-current="true"
					aria-label="Slide 1"
				></button>
				<button type="button" data-bs-target="#carousel-dark" data-bs-slide-to="1" aria-label="Slide 2"></button>
				<button type="button" data-bs-target="#carousel-dark" data-bs-slide-to="2" aria-label="Slide 3"></button>
			</div>

			<button class="carousel-control-prev" type="button" data-bs-target="#carousel-dark" data-bs-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Anterior</span>
			</button>
			<button class="carousel-control-next" type="button" data-bs-target="#carousel-dark" data-bs-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="visually-hidden">Siguiente</span>
			</button>
		</div>

De tarjetas

Con fondo blanco

<div id="carousel-cards-eventos" class="carousel cards slide">
			<div class="title">
				<h4 class="m-0">Encabezado de la seccion</h4>
				<a href="#" target="_blank" rel="noopener noreferrer">Enlace predeterminado</a>
			</div>
			<div class="carousel-inner responsive-scroll">
				<div class="carousel-item">
						<div class="card-items">
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
						</div>
				</div>
				<div class="carousel-item">
						<div class="card-items">
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
						</div>
				</div>
				<div class="carousel-item active">
						<div class="card-items">
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>y</div>
				</div>
			</div>
			<div class="carousel-indicators">
				<button type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide-to="0" class="" aria-label="Slide 1"></button>
				<button type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide-to="1" aria-label="Slide 2" class=""></button>
				<button type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide-to="2" aria-label="Slide 3" class="active" aria-current="true"></button>
			</div>
			<button class="carousel-control-prev" type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Anterior</span></button>
			<button class="carousel-control-next" type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Siguiente</span></button>
		</div>

Con fondo claro

<div id="carousel-cards-eventos" class="carousel cards bg-light slide">
			<div class="title">
				<h4 class="m-0">Encabezado de la seccion</h4>
				<a href="#" target="_blank" rel="noopener noreferrer">Enlace predeterminado</a>
			</div>
			<div class="carousel-inner responsive-scroll">
				<div class="carousel-item">
						<div class="card-items">
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
						</div>
				</div>
				<div class="carousel-item">
						<div class="card-items">
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
						</div>
				</div>
				<div class="carousel-item active">
						<div class="card-items">
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>y</div>
				</div>
			</div>
			<div class="carousel-indicators">
				<button type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide-to="0" class="" aria-label="Slide 1"></button>
				<button type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide-to="1" aria-label="Slide 2" class=""></button>
				<button type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide-to="2" aria-label="Slide 3" class="active" aria-current="true"></button>
			</div>
			<button class="carousel-control-prev" type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Anterior</span></button>
			<button class="carousel-control-next" type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Siguiente</span></button>
		</div>

Con fondo oscuro

<div id="carousel-cards-eventos" class="carousel cards bg-dark slide">
			<div class="title">
				<h4 class="m-0">Encabezado de la seccion</h4>
				<a href="#" target="_blank" rel="noopener noreferrer">Enlace predeterminado</a>
			</div>
			<div class="carousel-inner responsive-scroll">
				<div class="carousel-item">
						<div class="card-items">
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
						</div>
				</div>
				<div class="carousel-item">
						<div class="card-items">
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
						</div>
				</div>
				<div class="carousel-item active">
						<div class="card-items">
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>
								<div class="card card-eventos"><img alt="descripción de imagen" data-nimg="1" loading="lazy" width="348" height="196" decoding="async" class="card-img" style="color:transparent" src="/Obelisco-V2/images/tarjetas/tarjetas_img_top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-s-default">Etiqueta</span><span class="badge badge-s-default">Tipo de público</span></div>
												<h3 class="card-title"><a href="#" class="card-title-link ellipsis-2" target="_blank" rel="noopener noreferrer">Este es el título del evento que puede contener 2 líneas de texto</a></h3>
												<p class="card-text ellipsis-4">Esta es la descripción del evento que puede contener hasta 4 líneas de texto. Cuando la descripción se excede de este límite, el texto se trunca y aparece el</p>
												<div class="card-info">
														<div class="pt-2"><small><span class="material-symbols-rounded o-icon">calendar_today</span>Lun 01/1</small><small><span class="material-symbols-rounded o-icon">schedule</span>17 | 18 | 19 hs</small><small><span class="material-symbols-rounded o-icon">location_on</span>Ubicación del evento</small></div>
												</div>
										</div>
								</div>y</div>
				</div>
			</div>
			<div class="carousel-indicators">
				<button type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide-to="0" class="" aria-label="Slide 1"></button>
				<button type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide-to="1" aria-label="Slide 2" class=""></button>
				<button type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide-to="2" aria-label="Slide 3" class="active" aria-current="true"></button>
			</div>
			<button class="carousel-control-prev" type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Anterior</span></button>
			<button class="carousel-control-next" type="button" data-bs-target="#carousel-cards-eventos" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Siguiente</span></button>
		</div>

Con tarjetas de impacto visual

<div id="carousel-cards-bg" class="carousel cards controls-top slide">
        <div class="title">
            <h4 class="m-0">Encabezado de la seccion</h4>
           
            <div class="carousel-navigation">
              <button
                class="carousel-control-prev"
                type="button"
                data-bs-target="#carousel-cards-bg"
                data-bs-slide="prev"
              >
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Anterior</span>
              </button>
              <button
                class="carousel-control-next"
                type="button"
                data-bs-target="#carousel-cards-bg"
                data-bs-slide="next"
              >
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Siguiente</span>
              </button>
            </div>
        </div>
 
        <div class="carousel-inner responsive-scroll">
            <div class="carousel-item active">
                <div class="card-items">
                   
                    <div class="card card-img-bg">
                        <div class="card-badges-bg">
                            <span class="badge badge-s-default">Etiqueta</span>
                            <span class="badge badge-s-default">Etiqueta</span>
                        </div>
                        <img alt="descripción de imagen" loading="lazy" width="348" height="196" src="/Obelisco-V2/images/" >
                        <p class="headline-lg">Título de la tarjeta</p>
                        <a href="#" aria-label="Descripcion de tarjetas"></a>
                    </div>
 
                    <div class="card card-img-bg">
                        <div class="card-badges-bg">
                            <span class="badge badge-s-default">Etiqueta</span>
                            <span class="badge badge-s-default">Etiqueta</span>
                        </div>
                        <img alt="descripción de imagen" loading="lazy" width="348" height="196" src="/Obelisco-V2/images/" >
                        <p class="headline-lg">Título de la tarjeta</p>
                        <a href="#" aria-label="Descripcion de tarjetas"></a>
                    </div>
 
                    <div class="card card-img-bg">
                        <div class="card-badges-bg">
                            <span class="badge badge-s-default">Etiqueta</span>
                            <span class="badge badge-s-default">Etiqueta</span>
                        </div>
                        <img alt="descripción de imagen" loading="lazy" width="348" height="196" src="/Obelisco-V2/images/" >
                        <p class="headline-lg">Título de la tarjeta</p>
                        <a href="#" aria-label="Descripcion de tarjetas"></a>
                    </div>
 
                </div>
            </div>
 
            <div class="carousel-item">
                <div class="card-items">
                   
                    <div class="card card-img-bg">
                        <div class="card-badges-bg">
                            <span class="badge badge-s-default">Etiqueta</span>
                            <span class="badge badge-s-default">Etiqueta</span>
                        </div>
                        <img alt="descripción de imagen" loading="lazy" width="348" height="196" src="/Obelisco-V2/images/" >
                        <p class="headline-lg">Título de la tarjeta</p>
                        <a href="#" aria-label="Descripcion de tarjetas"></a>
                    </div>
 
                    <div class="card card-img-bg">
                        <div class="card-badges-bg">
                            <span class="badge badge-s-default">Etiqueta</span>
                            <span class="badge badge-s-default">Etiqueta</span>
                        </div>
                        <img alt="descripción de imagen" loading="lazy" width="348" height="196" src="/Obelisco-V2/images/" >
                        <p class="headline-lg">Título de la tarjeta</p>
                        <a href="#" aria-label="Descripcion de tarjetas"></a>
                    </div>
 
                    <div class="card card-img-bg">
                        <div class="card-badges-bg">
                            <span class="badge badge-s-default">Etiqueta</span>
                            <span class="badge badge-s-default">Etiqueta</span>
                        </div>
                        <img alt="descripción de imagen" loading="lazy" width="348" height="196" src="/Obelisco-V2/images/" >
                        <p class="headline-lg">Título de la tarjeta</p>
                        <a href="#" aria-label="Descripcion de tarjetas"></a>
                    </div>
                   
                </div>
            </div>
 
            <div class="carousel-item">
                <div class="card-items">
                   
                    <div class="card card-img-bg">
                        <div class="card-badges-bg">
                            <span class="badge badge-s-default">Etiqueta</span>
                            <span class="badge badge-s-default">Etiqueta</span>
                        </div>
                        <img alt="descripción de imagen" loading="lazy" width="348" height="196" src="/Obelisco-V2/images/" >
                        <p class="headline-lg">Título de la tarjeta</p>
                        <a href="#" aria-label="Descripcion de tarjetas"></a>
                    </div>
 
                    <div class="card card-img-bg">
                        <div class="card-badges-bg">
                            <span class="badge badge-s-default">Etiqueta</span>
                            <span class="badge badge-s-default">Etiqueta</span>
                        </div>
                        <img alt="descripción de imagen" loading="lazy" width="348" height="196" src="/Obelisco-V2/images/" >
                        <p class="headline-lg">Título de la tarjeta</p>
                        <a href="#" aria-label="Descripcion de tarjetas"></a>
                    </div>
 
                    <div class="card card-img-bg">
                        <div class="card-badges-bg">
                            <span class="badge badge-s-default">Etiqueta</span>
                            <span class="badge badge-s-default">Etiqueta</span>
                        </div>
                        <img alt="descripción de imagen" loading="lazy" width="348" height="196" src="/Obelisco-V2/images/" >
                        <p class="headline-lg">Título de la tarjeta</p>
                        <a href="#" aria-label="Descripcion de tarjetas"></a>
                    </div>
                   
                </div>
            </div>
        </div>
 
        <div class="carousel-indicators">
            <button
                type="button"
                data-bs-target="#carousel-cards-bg"
                data-bs-slide-to="0"
                class="active"
                aria-current="true"
                aria-label="Slide 1"
            ></button>
            <button type="button" data-bs-target="#carousel-cards-bg" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#carousel-cards-bg" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
 
        <a href="#" target="_blank" rel="noopener noreferrer" className="carousel-link external">
            Mostrar todos los eventos
        </a>
 
    </div>

Variantes

Navegación de pie de página