Noticias

Guía orientada a estandarizar la carga y presentación de noticias, promoviendo claridad, consistencia y una lectura fluida.

Acceder a la plantillaopen_in_new

Encabezado

Este módulo tiene como objetivo presentar la información principal de la noticia de forma clara y jerarquizada. Permite a la persona usuaria comprender rápidamente la relevancia del contenido antes de continuar con la lectura. Está compuesto por:

  • Migas de pan, que nos indican el recorrido de la persona usuaria hasta la página actual.
  • Etiqueta de categoría , que identifica el tema o área temática a la que pertenece la noticia. Se utiliza para orientar y facilitar la exploración de contenidos relacionados.
  • Título, texto principal que resume de qué trata la noticia. Extensión máxima: 115 caracteres.
  • Bajada, breve descripción introductoria que amplía la idea del título y anticipa el contenido. Extensión máxima: 180 caracteres.
  • Botones iconográficos, que habilitan la difusión del contenido en redes sociales.
Ejemplo de noticias

Buenas prácticas

check

Usar títulos claros, informativos y directos que permitan comprender el contenido sin necesidad de leer la noticia completa.

check

Incorporar una bajada concisa y contextual.

check

Verificar que la etiqueta de categoría sea coherente con el contenido.

check

Confirmar que la fecha de publicación sea correcta.

Malas prácticas

close

Utilizar títulos excesivamente largos, ambiguos o sin información relevante.

close

Repetir exactamente el título dentro de la bajada.

close

Incluir categorías genéricas sin relación con el contenido.

close

Hacer uso de frases y palabras completas en mayúsculas.

Cuerpo de la noticia

Este módulo tiene como objetivo concentrar el contenido principal de la noticia. Permite organizar la información y sumar recursos complementarios. Está compuesto por los siguientes elementos:

Elementos de párrafo

Opciones disponibles para redactar, estructurar y dar forma al contenido textual de la noticia:

  • Títulos y subtítulos que pueden ir de "Encabezado 2" a "Encabezado 6", utilizados para organizar y jerarquizar el contenido en secciones, especialmente en textos extensos.
  • Texto general para el desarrollo completo de la información. Permite aplicar estilos de formato como negrita e itálica para jerarquizar y destacar contenido relevante.
  • Enlaces, permite enlazar información complementaria sin extender el texto principal.
  • Listas simples con viñetas o numeración para organizar información. Las listas con viñetas se utilizan cuando los elementos no siguen un orden secuencial, mientras que las listas numeradas se emplean cuando existe un orden o secuencia definida.
  • Cita destacada, debe incluir la frase y, opcionalmente, puede incluir el nombre de la persona autora de la cita.
  • Permite insertar una imagen puntual entre bloques de texto para acompañar o reforzar una idea específica del contenido. Recomendamos completar el campo de texto alternativo con una breve descripción de la imagen para garantizar la accesibilidad.

    Ejemplo de texto alternativo: "Grupo de personas realizando actividades recreativas al aire libre".
Ejemplo de noticias
Elementos multimedia

Opciones disponibles para incorporar recursos audiovisuales que complementan el contenido de la noticia:

  • Incrustación de video, permite incorporar contenido audiovisual en la noticia, ya sea mediante un video remoto (YouTube) o un archivo de video cargado desde el dispositivo. El uso de este elemento es opcional y se recomienda limitarlo a un solo video por publicación.
  • Fotogalería, compuesta por varias imágenes presentadas en una grilla adaptable. El uso es opcional y permite cargar entre 1 y 7 elementos.Peso máximo: 400 KB
    Formato permitido: .jpg, .jpeg, .webp, .avif
  • Incrustación de audio, permite incorporar un archivo de audio dentro de la noticia. El uso de este elemento es opcional y se recomienda utilizarlo cuando el contenido lo requiera.
  • Permite incorporar publicaciones de redes sociales dentro de la noticia. Se sugiere priorizar contenido de fuentes confiables, preferentemente de X e Instagram.
Ejemplo de noticiasEjemplo de noticias

Buenas prácticas

check

Redactar utilizando lenguaje claro, evitando tecnicismos innecesarios.

check

Utilizar títulos secundarios cuando haya contenido extenso.

check

Incorporar recursos multimedia solo si aportan información útil o contextual.

check

Verificar enlaces antes de publicar.

Malas prácticas

close

Sobrecargar el contenido con elementos multimedia sin propósito informativo.

close

Insertar bloques extensos de texto sin estructura, listas ni separación.

close

Utilizar imágenes pixeladas o contenido no verificado.

Destacado

Componente que permite resaltar información puntual dentro de la noticia. Incluye un título y una bajada contextual, y puede incorporar un enlace en caso de ser necesario.

  • El enlace de acceso se utiliza para ver más información dentro del mismo sitio.
  • El enlace externo se usa para enlazar contenido a un sitio web externo por fuera del dominio actual.
Ejemplo de noticias

Buenas prácticas

check

Utilizar el componente solo cuando sea necesario para destacar información relevante.

check

Incluir siempre un título y una bajada que aporten contexto y ayuden a comprender el contenido destacado.

check

Solo deberá utilizarse una única vez y deberá ubicarse entre bloques de texto o al final de la noticia, respetando el flujo de lectura.

check

Mantener textos breves y claros para no interrumpir la lectura principal.

check

En caso de incluir un enlace, que sea un llamado a la acción claro y breve, por ejemplo: "Ir al formulario", "Conocé más", "Accedé al trámite".

Malas prácticas

close

Colocar el destacado al inicio de la noticia, desplazando el contenido principal.

close

Usarlo de forma reiterada o sin un criterio claro dentro de una misma publicación.

close

Incluir el componente sin contexto, sin título o sin bajada.

Apartado

Se ubica en la columna derecha de la página y permite incorporar información complementaria a la noticia.

Documentación adjunta

Permite incorporar archivos complementarios a la noticia para su descarga.

  • Audios descargables:
    Peso máximo: 50MB
    Formato permitido: .mp3, .wav, .aac
  • Documentos descargables:
    Peso máximo: 50MB
    Formato permitido: .pdf
Ejemplo de información institucional
Mapa de ubicación

Permite indicar una ubicación física relevante asociada a la noticia.

Ejemplo de noticias

Buenas prácticas

check

Utilizar el apartado únicamente cuando el contenido adicional sea relevante para la noticia.

check

Verificar que el contenido se encuentre correctamente vinculado.

check

Asegurar que la información se encuentre actualizada..

check

Renombrar los archivos antes de publicarlos con un nombre claro y descriptivo, que refleje su contenido.

Malas prácticas

close

Incluir enlaces o archivos que no aporten valor al contenido de la noticia.

close

Publicar enlaces rotos, incorrectos o sin destino válido.

close

Adjuntar recursos sin relación directa con la noticia o con nombres poco descriptivos, que dificulten la comprensión de su contenido.

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

  <title>Noticias - Galería</title>

  <!-- Obelisco -->
  <!-- OBELISCO CDN's -->
  <!-- Obelisco -->

</head>

<body>
    <main id="main">
      <article class="pb-5 mb-4">
        <header class="bg-light pt-3 pb-5 mb-5">
          <div class="container pt-1">
            <nav aria-label="Navegación secundaria" class="py-3">
              <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Inicio</a></li>
                <li class="breadcrumb-item"><a href="#">Jefatura de Gabinete</a></li>
              </ol>
            </nav>

            <div class="row">
              <div class="col-12 col-xl-8">
                <div class="mt-2 pt-1">
                  <p><a href="#" class="badge badge-info">Espacio público</a></p>
                  <p class="mb-0"><small>Jueves 17 de junio de 2022</small></p>
                  <h1 class="mb-3">Sumate al programa Embajadores Verdes y promové el reciclado</h1>
                  <p class="lead">
                    El Ministerio de Espacio Público e Higiene Urbana desarrolló el programa de
                    Embajadores Ciudad Verde. Se trata de una propuesta vinculada con el Plan de
                    Reciclaje de la Ciudad, BA Recicla. Si querés promover el reciclado ¡Sumate!
                  </p>
                </div>

                <div class="d-flex flex-row pt-3">
                  Compartir en redes
                  <ul class="list-inline ms-2">
                    <li class="list-inline-item me-1">
                      <a href="#" target="_blank" class="d-inline-flex text-decoration-none">
                        <i class="bxf bx-sm bxl-facebook-circle"></i>
                      </a>
                    </li>
                    <li class="list-inline-item me-1">
                      <a href="#" target="_blank" class="d-inline-flex text-decoration-none">
                        <i class="bxf bx-sm bxl-instagram"></i>
                      </a>
                    </li>
                    <li class="list-inline-item me-1">
                      <a href="#" target="_blank" class="d-inline-flex text-decoration-none">
                        <i class="bxf bx-sm bxl-twitter"></i>
                      </a>
                    </li>
                    <li class="list-inline-item me-1">
                      <a href="#" target="_blank" class="d-inline-flex text-decoration-none">
                        <i class="bxf bx-sm bxl-linkedin-square"></i>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </header>

        <div class="container">
          <div class="row">
            <div class="col-12 col-xl-8">
              <p class="mb-4">
                <strong>
                  Contribuyendo a alcanzar el objetivo de que el 80% de los vecinos y las vecinas de
                  la Ciudad separen sus residuos, el
                </strong>
                <a href="#" target="_blank" rel="noreferrer">
                  Ministerio de Espacio Público e Higiene Urbana
                </a>
                <strong>desarrolló el programa de Embajadores Ciudad Verde.</strong>
                Este programa brinda a la ciudadanía un espacio para encontrarse y construir una
                visión compartida del esfuerzo que debe realizarse en conjunto para avanzar hacia
                una ciudad más sustentable.
                <strong>Si querés promover el reciclado.</strong>
                <a href="#" target="_blank" rel="noreferrer">¡Sumate!</a>
              </p>

              <section class="my-5" style="height: 390px">
                <iframe
                  width="100%"
                  height="100%"
                  src="https://www.youtube.com/embed/sXE613Oaxvc?si=iWSX1erqQxXOLojw"
                  title="Buenos Aires se escribe en plural"
                  frameborder="0"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                  allowfullscreen=""
                ></iframe>
              </section>

              <blockquote>
                <p>
                  Forma parte del programa que nos invita a co-construir una Ciudad cada vez más
                  verde, promoviendo la participación ciudadana y fortaleciendo el compromiso de
                  todos los vecinos y vecinas.
                </p>
                <p class="author">Autor (no obligatorio)</p>
              </blockquote>

              <h2 class="mb-4 mt-5">¿Quiénes pueden sumarse a la red?</h2>

              <p class="mb-4">
                Todas aquellas personas interesadas en temáticas relacionadas a reciclado y economía
                circular. Si te entusiasma:
                <a href="#" target="_blank" rel="noreferrer">¡Sumate!</a>
              </p>

              <h3>¿Cuáles son los pasos a seguir para ser parte de la red?</h3>
              <ol>
                <li>
                  Completar el
                  <a href="#" target="_blank" rel="noreferrer">formulario de inscripción.</a>
                </li>
                <li>Recibir el email de bienvenida y agendar tu inducción.</li>
                <li>
                  Asistir a la charla introductoria donde te contaremos en detalle qué podrás
                  encontrar en la red. La charla es abierta a la comunidad y está dirigida a todas
                  las personas interesadas en ser embajadoras. Este es el primer requisito para
                  comenzar a ser parte de la red.
                </li>
              </ol>

              <blockquote class="my-5">
                <p>
                  Nadie es demasiado pequeño para tener un impacto y cambiar el mundo, así que haz
                  todo lo que puedas.
                </p>
              </blockquote>

              <p class="mb-4">
                <strong>
                  Cabe señalar que el programa Embajadores Verdes es una iniciativa vinculada con el
                  Plan de Reciclaje de la Ciudad
                </strong>
                , BA Recicla, presentado recientemente. Dicho plan es el punto de partida hacia la
                circularidad ya que contempla dentro de sus objetivos duplicar la cantidad de
                residuos reciclables que se recolectan en la Ciudad y lograr que para el 2023 el 80%
                de los vecinos y vecinas separen la basura en sus casas. Para eso, se prevé
                optimizar el ordenamiento de la infraestructura de captación colocando un contenedor
                verde o campana a 150 metros de cada hogar y con el trabajo de los recuperadores
                urbanos en las zonas de mayor generación de reciclables. Además, el plan incluye
                nuevos programas y acciones para la promoción de la separación de residuos
                domiciliarios.
              </p>

              <p class="mb-4">
                Por otro lado, la Ciudad cuenta con un Centro de Reciclaje que procesa un altísimo
                porcentaje de los residuos generados en la ciudad, entre áridos (escombros);
                plásticos PET, restos de poda, y residuos orgánicos. También cuenta con 16 Centros
                Verdes a donde llegan los materiales que juntan cada día los recuperadores urbanos y
                tres centros de compostaje de restos. Enterate de cómo hacemos una Ciudad más Verde
                en:
                <a href="#" target="_blank" rel="noreferrer">www.ciudadverde.gob.ar</a>
              </p>

              <h2 class="mb-4 mt-5">Fotogalería</h2>
              <div class="mt-4 mb-2 pb-1">
                <div class="gallery-grid gallery-max-7">
                  <a
                    href="../assets/galeria/galeria-1.png"
                    class="gallery-grid-item"
                    data-bs-toggle="modal"
                    data-bs-target="#modalGallery"
                  >
                    <img
                      src="../assets/galeria/galeria-1.png"
                      alt="Texto alternativo de la imagen"
                    />
                  </a>

                  <a
                    href="../assets/galeria/galeria-2.png"
                    class="gallery-grid-item"
                    data-bs-toggle="modal"
                    data-bs-target="#modalGallery"
                  >
                    <img
                      src="../assets/galeria/galeria-2.png"
                      alt="Texto alternativo de la imagen"
                    />
                  </a>

                  <a
                    href="../assets/galeria/galeria-3.png"
                    class="gallery-grid-item"
                    data-bs-toggle="modal"
                    data-bs-target="#modalGallery"
                  >
                    <img
                      src="../assets/galeria/galeria-3.png"
                      alt="Texto alternativo de la imagen"
                    />
                  </a>
                  <a
                    href="../assets/galeria/galeria-3.png"
                    class="gallery-grid-item"
                    data-bs-toggle="modal"
                    data-bs-target="#modalGallery"
                  >
                    <img
                      src="../assets/galeria/galeria-3.png"
                      alt="Texto alternativo de la imagen"
                    />
                  </a>
                  <a
                    href="../assets/galeria/galeria-2.png"
                    class="gallery-grid-item"
                    data-bs-toggle="modal"
                    data-bs-target="#modalGallery"
                  >
                    <img
                      src="../assets/galeria/galeria-2.png"
                      alt="Texto alternativo de la imagen"
                    />
                  </a>
                  <a
                    href="../assets/galeria/galeria-3.png"
                    class="gallery-grid-item"
                    data-bs-toggle="modal"
                    data-bs-target="#modalGallery"
                  >
                    <img
                      src="../assets/galeria/galeria-3.png"
                      alt="Texto alternativo de la imagen"
                    />
                  </a>
                  <a
                    href="../assets/galeria/galeria-1.png"
                    class="gallery-grid-item"
                    data-bs-toggle="modal"
                    data-bs-target="#modalGallery"
                  >
                    <img
                      src="../assets/galeria/galeria-1.png"
                      alt="Texto alternativo de la imagen"
                    />
                  </a>
                </div>

                <div
                  class="modal modal-carousel"
                  data-bs-backdrop="static"
                  tabindex="-1"
                  role="dialog"
                  id="modalGallery"
                >
                  <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                      <a href="#" class="modal-carousel-close" data-bs-dismiss="modal">
                        Cerrar ventana
                      </a>

                      <div
                        id="modalGalleryControls"
                        class="carousel slide"
                        data-bs-ride="carousel"
                        data-bs-interval="false"
                      >
                        <div class="carousel-inner">
                          <div class="carousel-item active" data-bs-interval="3000">
                            <img
                              src="../assets/galeria/galeria-1.png"
                              class="d-block w-100"
                              alt="Texto alternativo de la imagen"
                            />

                            <div class="carousel-caption">
                              <div class="row mb-4">
                                <div class="col">
                                  <span class="text-xs">Autor de la imagen.</span>
                                </div>
                                <div class="col text-end">
                                  <span class="text-xs">Imagen 1/7</span>
                                </div>
                              </div>
                              <h5 class="h2">Título de la imagen 1.</h5>
                              <p>
                                Descripción o epígrafe de la imagen.
                                <br />
                                Recomendamos en este espacio no utilizar más de 2 líneas, para
                                generar una lectura óptima.
                              </p>
                            </div>
                          </div>

                          <div class="carousel-item" data-bs-interval="3000">
                            <img
                              src="../assets/galeria/galeria-2.png"
                              class="d-block w-100"
                              alt="Texto alternativo de la imagen"
                            />

                            <div class="carousel-caption">
                              <div class="row mb-4">
                                <div class="col">
                                  <span class="text-xs">Autor de la imagen.</span>
                                </div>

                                <div class="col text-end">
                                  <span class="text-xs">Imagen 2/7</span>
                                </div>
                              </div>
                              <h5 class="h2">Título de la imagen 2.</h5>
                              <p>
                                Descripción o epígrafe de la imagen.
                                <br />
                                Recomendamos en este espacio no utilizar más de 2 líneas, para
                                generar una lectura óptima.
                              </p>
                            </div>
                          </div>

                          <div class="carousel-item" data-bs-interval="3000">
                            <img
                              src="../assets/galeria/galeria-3.png"
                              class="d-block w-100"
                              alt="Texto alternativo de la imagen"
                            />
                            <div class="carousel-caption">
                              <div class="row mb-4">
                                <div class="col">
                                  <span class="text-xs">Autor de la imagen.</span>
                                </div>
                                <div class="col text-end">
                                  <span class="text-xs">Imagen 3/7</span>
                                </div>
                              </div>
                              <h5 class="h2">Título de la imagen 3.</h5>
                              <p>
                                Descripción o epígrafe de la imagen.
                                <br />
                                Recomendamos en este espacio no utilizar más de 2 líneas, para
                                generar una lectura óptima.
                              </p>
                            </div>
                          </div>
                          <div class="carousel-item" data-bs-interval="3000">
                            <img
                              src="../assets/galeria/galeria-3.png"
                              class="d-block w-100"
                              alt="Texto alternativo de la imagen"
                            />
                            <div class="carousel-caption">
                              <div class="row mb-4">
                                <div class="col">
                                  <span class="text-xs">Autor de la imagen.</span>
                                </div>
                                <div class="col text-end">
                                  <span class="text-xs">Imagen 4/7</span>
                                </div>
                              </div>
                              <h5 class="h2">Título de la imagen 4.</h5>
                              <p>
                                Descripción o epígrafe de la imagen.
                                <br />
                                Recomendamos en este espacio no utilizar más de 2 líneas, para
                                generar una lectura óptima.
                              </p>
                            </div>
                          </div>
                          <div class="carousel-item" data-bs-interval="3000">
                            <img
                              src="../assets/galeria/galeria-2.png"
                              class="d-block w-100"
                              alt="Texto alternativo de la imagen"
                            />
                            <div class="carousel-caption">
                              <div class="row mb-4">
                                <div class="col">
                                  <span class="text-xs">Autor de la imagen.</span>
                                </div>
                                <div class="col text-end">
                                  <span class="text-xs">Imagen 5/7</span>
                                </div>
                              </div>
                              <h5 class="h2">Título de la imagen 5.</h5>
                              <p>
                                Descripción o epígrafe de la imagen.
                                <br />
                                Recomendamos en este espacio no utilizar más de 2 líneas, para
                                generar una lectura óptima.
                              </p>
                            </div>
                          </div>
                          <div class="carousel-item" data-bs-interval="3000">
                            <img
                              src="../assets/galeria/galeria-3.png"
                              class="d-block w-100"
                              alt="Texto alternativo de la imagen"
                            />
                            <div class="carousel-caption">
                              <div class="row mb-4">
                                <div class="col">
                                  <span class="text-xs">Autor de la imagen.</span>
                                </div>
                                <div class="col text-end">
                                  <span class="text-xs">Imagen 6/7</span>
                                </div>
                              </div>
                              <h5 class="h2">Título de la imagen 6.</h5>
                              <p>
                                Descripción o epígrafe de la imagen.
                                <br />
                                Recomendamos en este espacio no utilizar más de 2 líneas, para
                                generar una lectura óptima.
                              </p>
                            </div>
                          </div>
                          <div class="carousel-item" data-bs-interval="3000">
                            <img
                              src="../assets/galeria/galeria-1.png"
                              class="d-block w-100"
                              alt="Texto alternativo de la imagen"
                            />
                            <div class="carousel-caption">
                              <div class="row mb-4">
                                <div class="col">
                                  <span class="text-xs">Autor de la imagen.</span>
                                </div>
                                <div class="col text-end">
                                  <span class="text-xs">Imagen 7/7</span>
                                </div>
                              </div>
                              <h5 class="h2">Título de la imagen 7.</h5>
                              <p>
                                Descripción o epígrafe de la imagen.
                                <br />
                                Recomendamos en este espacio no utilizar más de 2 líneas, para
                                generar una lectura óptima.
                              </p>
                            </div>
                          </div>
                        </div>
                        <button
                          class="carousel-control-prev"
                          type="button"
                          data-bs-target="#modalGalleryControls"
                          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="#modalGalleryControls"
                          data-bs-slide="next"
                        >
                          <span class="carousel-control-next-icon" aria-hidden="true"></span>
                          <span class="visually-hidden">Siguiente</span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Se elimina tarjetas en aside, no es buena practica del sitema de diseño -->
            <!-- <aside class="col-12 col-xl-4 mt-5 mt-lg-0">
              <div class="row">
                <div class="col-xs-12 col-md-6 col-xl-12">
                  <section>
                    <h3 class="mb-4">Noticias relacionadas</h3>
                    <div class="card-deck max-cards-1">
                      <a class="card card-horizontal" href="#">
                        <img src="../assets/noticias/noticias-5.png" class="card-img-left" alt="descripción alternativa" />
                        <div class="card-body">
                          <h4 class="card-title">La Ciudad iluminará monumentos durante el verano</h4>
                          <p class="card-text">
                            Serán los primeros de una serie de iluminaciones que se realizarán durante el año.
                          </p>
                        </div>
                      </a>

                      <a class="card card-horizontal" href="#">
                        <img src="../assets/noticias/noticias-5.png" class="card-img-left" alt="descripción alternativa" />
                        <div class="card-body">
                          <h4 class="card-title">Más de 32.500 estudiantes asisten a la Escuela de Verano</h4>
                          <p class="card-text">
                            Con un récord de inscriptos, alumnos de todos los niveles participan de una propuesta.
                          </p>
                        </div>
                      </a>
                    </div>
                  </section>
                </div>
              </div>
            </aside> -->
          </div>

          <hr class="mt-5" />

          <section class="container">
            <h2 class="mt-5 mb-4">Noticias</h2>
            <div class="responsive-scroll vertical-cards-container" tabindex="0">
              <div class="card">
                <img class="card-img" src="../assets/noticias/noticias-2.png" alt="descripción de imagen" />
                <div class="card-body">
                  <div class="card-badges">
                    <span class="badge badge-default">Comuna 7</span>
                    <span class="badge badge-default">Gestión Comunal</span>
                  </div>
                  <h3 class="card-title">
                    <a href="#" class="card-title-link ellipsis-3">Nuevo patio de juegos, cancha y espacios de encuentro en Plaza Padre Rodolfo
                      Ricciardelli</a>
                  </h3>
                  <p class="card-text">Está ubicada en Avenida Perito Moreno y Erezcano, Flores.</p>
                  <div class="card-info">
                    <div>
                    <small>
                      <span>Fecha de publicación: 14/01/2023</span>
                    </small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card">
                <img class="card-img" src="../assets/noticias/noticias-3.png" alt="descripción de imagen" />
                <div class="card-body">
                  <div class="card-badges">
                    <span class="badge badge-default">Usina del Arte</span>
                  </div>
                  <h3 class="card-title">
                    <a href="#" class="card-title-link ellipsis-3">Cuatro shows infantiles en vivo para disfrutar el fin de semana en la Usina</a>
                  </h3>
                  <p class="card-text">Las mejores propuestas para que el verano de las infancias sea el más
                    entretenido.</p>
                  <div class="card-info">
                    <div>
                    <small>
                      <span>Fecha de publicación: 13/01/2023</span>
                    </small>
                    </div>
                  </div>
                </div>
              </div>
              <div class="card">
                <img class="card-img" src="../assets/noticias/noticias-4.png" alt="descripción de imagen" />
                <div class="card-body">
                  <div class="card-badges">
                    <span class="badge badge-default">Museos</span>
                    <span class="badge badge-default">Museo Sívori</span>
                  </div>
                  <h3 class="card-title">
                    <a href="#" class="card-title-link ellipsis-3">Verano en el Museo Sívori, con propuestas para todas las edades</a>
                  </h3>
                  <p class="card-text">Hasta el 19 de febrero te invitamos a disfrutar de una programación imperdible.</p>
                  <div class="card-info">
                    <div>
                    <small>
                      <span>Fecha de publicación: 10/01/2023</span>
                    </small>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </article>
    </main>

  </body>
</html>

Navegación de pie de página