De destacados
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-primary btn-lg" href="#" rel="noopener noreferrer">
Botón
</a>
<a class="btn btn-outline-primary 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-primary btn-lg" href="#" rel="noopener noreferrer">
Botón
</a>
<a class="btn btn-outline-primary 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-primary btn-lg" href="#" rel="noopener noreferrer">
Botón
</a>
<a class="btn btn-outline-primary 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-primary btn-lg" href="#" rel="noopener noreferrer">
Botón
</a>
<a class="btn btn-outline-primary 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
Encabezado de la seccion
Enlace predeterminado
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
<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">
<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 class="carousel-item">
<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 class="carousel-item">
<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-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 oscuro
Encabezado de la seccion
Enlace predeterminadoTítulo de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
Título de la tarjeta
Descripción de la tarjeta
<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">
<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 class="carousel-item">
<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 class="carousel-item">
<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-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>