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" 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"
					data-bs-slide-to="0"
					class="active"
					aria-current="true"
					aria-label="Slide 1"
				></button>
				<button type="button" data-bs-target="#carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
				<button type="button" data-bs-target="#carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
			</div>

			<button class="carousel-control-prev" type="button" data-bs-target="#carousel" 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" 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" class="carousel 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"
					data-bs-slide-to="0"
					class="active"
					aria-current="true"
					aria-label="Slide 1"
				></button>
				<button type="button" data-bs-target="#carousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
				<button type="button" data-bs-target="#carousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
			</div>

			<button class="carousel-control-prev" type="button" data-bs-target="#carousel" 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" 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 claro


<div id="carousel-cards" 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 active">
				<div class="card-items">
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>

					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>

					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="carousel-item">
				<div class="card-items">
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
	
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
	
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="carousel-item">
				<div class="card-items">
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
	
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
	
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

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

		<button class="carousel-control-prev" type="button" data-bs-target="#carousel-cards" 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" 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 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/card-img-top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-default">Etiqueta</span><span class="badge badge-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/card-img-top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-default">Etiqueta</span><span class="badge badge-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/card-img-top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-default">Etiqueta</span><span class="badge badge-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/card-img-top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-default">Etiqueta</span><span class="badge badge-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/card-img-top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-default">Etiqueta</span><span class="badge badge-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/card-img-top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-default">Etiqueta</span><span class="badge badge-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/card-img-top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-default">Etiqueta</span><span class="badge badge-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/card-img-top.jpg">
										<div class="card-body">
												<p class="card-headline">TIPO DE EVENTO</p>
												<div class="mb-3"><span class="badge badge-default">Etiqueta</span><span class="badge badge-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-dark" class="carousel cards dark slide">
		<div class="title">
			<h4 class="m-0">Encabezado de la seccion</h4>
			<a href="#" target="_blank" class="link-light" rel="noopener noreferrer">
				Enlace predeterminado
			</a>
		</div>

		<div class="carousel-inner responsive-scroll">
			<div class="carousel-item active">
				<div class="card-items">
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
	
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
	
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="carousel-item">
				<div class="card-items">
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
	
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
	
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="carousel-item">
				<div class="card-items">
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
	
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
	
					<div class="card">
						<img class="card-img" src="images/card-img-top.jpg" alt="descripción de imagen" />
						<div class="card-body">
							<div class="card-badges">
									<span class="badge badge-default">etiqueta 1</span>
									<span class="badge badge-default">etiqueta 2</span>
							</div>
							<h3 class="card-title">
								<a href="#" class="card-title-link">Título de la tarjeta</a>
							</h3>
							<p class="card-text">Descripción de la tarjeta</p>
							<div class="card-info">
								<div>
									<small>
										<span>Fecha de publicación</span>
									</small>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

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

		<button class="carousel-control-prev" type="button" data-bs-target="#carousel-cards-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-cards-dark" data-bs-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="visually-hidden">Siguiente</span>
		</button>
	</div>

Navegación de pie de página