Estilos

Componentes

Formularios

Organismos

Destacado

Los destacados permiten resaltar contenido relevante que requiere un nivel jerárquico mayor al resto de la información. Se usa para captar la atención de la persona usuaria incorporando imágenes, accionables y otros elementos interactivos.

Estamos actualizando todas las fichas de los componentes. Para conocer más sobre los lineamientos de uso del componente podés visitar la documentación en Obelisco v.1.

Destacado banner

descripción de imagen

Título del destacado

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

BotónBotón

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <img src="/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>

descripción de imagen

Título del destacado

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

Botón

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <img src="/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>
      </div>
    </div>
  </div>
</div>

descripción de imagen

Título del destacado

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

Descargar

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <img src="/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="#" target="_blank" download="">
          <span class="material-symbols-rounded" aria-hidden="true">file_download</span>Descargar
        </a>
      </div>
    </div>
  </div>
</div>

descripción de imagen

Título del destacado

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

Enlace externo

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <img src="/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="external" href="#" target="_blank" rel="noopener noreferrer">Enlace externo</a>
      </div>
    </div>
  </div>
</div>

descripción de imagen

Título del destacado

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

Acceso

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <img src="/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 href="#" class="list-group-item item-sm">
          <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
          <div class="access-content">
            <span class="access-title">Acceso</span>
          </div>
        </a>
      </div>
    </div>
  </div>
</div>

Buenos Aires se escribe en plural

Título del destacado

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

BotónBotón

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <p class="sr-only">Buenos Aires se escribe en plural</p>
    <video class="panel-img" controls="">
      <source src="/videoBuenosAires.mp4" type="video/mp4" />
      <track
        src="/videoBuenosAires.vtt"
        default=""
        kind="captions"
        srclang="es"
      />
      <p>Su navegador no soporta vídeos HTML5. Puedes ver el video haciendo clic en
        <a href="/videoBuenosAires.mp4">este enlace</a>.
      </p>
    </video>
    <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>

Título del destacado

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

BotónBotón

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <iframe
      class="panel-img"
      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>
    <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>

Título del destacado

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

BotónBotón

<div class="panel-horizontal-content">
  <div class="panel-horizontal">
    <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>

descripción de imagen

Título del destacado

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

BotónBotón

<div class="panel-horizontal-content bg-light">
  <div class="panel-horizontal">
    <img src="/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>

Destacado conjunto

Fondos

descripción de imagen

Este es el titulo del destacado que puede contener hasta 2 líneas de texto.

Esta es la descripción del destacado que puede contener hasta 3 líneas de texto. Si se excede de este límite, el texto de la descripción se va a truncar, el contenido, para garantizar Lorem ipsum dolor sit amet.

BotónBotón
descripción de imagen

Este es el titulo del destacado que puede contener hasta 2 líneas de texto.

Esta es la descripción del destacado que puede contener hasta 3 líneas de texto. Si se excede de este límite, el texto de la descripción se va a truncar, el contenido, para garantizar Lorem ipsum dolor sit amet.

BotónBotón

<div class="highlighted-items-2">
  <div class="col">
    <div class="panel-vertical">
      <img src="/destacado.jpg" alt="descripción de imagen" class="panel-img" />
      <div class="panel-body-dark">
        <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 class="col">
    <div class="panel-vertical">
      <img src="/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 class="col">
    <div class="panel-vertical">
      <img src="/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="external" href="#" target="_blank" rel="noopener noreferrer">Enlace externo</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <img src="/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 href="#" class="list-group-item item-sm">
            <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
            <div class="access-content">
              <span class="access-title">Acceso</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Accionables

descripción de imagen

Este es el titulo del destacado

Esta es la descripción del destacado que puede contener hasta 3 líneas de texto.

BotónBotón
descripción de imagen

Este es el titulo del destacado que puede contener hasta 2 líneas de texto.

Esta es la descripción del destacado que puede contener hasta 3 líneas de texto. Si se excede de este límite, el texto de la descripción se va a truncar,

Acceso
descripción de imagen

Este es el titulo del destacado que puede contener hasta 2 líneas de texto.

Esta es la descripción del destacado que puede contener hasta 3 líneas de texto. Si se excede de este límite, el texto de la descripción se va a truncar,

Descargar
descripción de imagen

Este es el titulo del destacado que puede contener hasta 2 líneas de texto.

Esta es la descripción del destacado que puede contener hasta 3 líneas de texto. Si se excede de este límite, el texto de la descripción se va a truncar,

Enlace externo

<div class="highlighted-items-2">
  <div class="col">
    <div class="panel-vertical">
      <img src="/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>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <img src="/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="#" target="_blank" download="">
            <span class="material-symbols-rounded" aria-hidden="true">file_download</span>Descargar
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <img src="/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="external" href="#" target="_blank" rel="noopener noreferrer">Enlace externo</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <img src="/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 href="#" class="list-group-item item-sm">
            <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
            <div class="access-content">
              <span class="access-title">Acceso</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Con vídeo

Título del destacado

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

Botón

Título del destacado

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

Botón

<div class="highlighted-items-2">
  <div class="col">
    <div class="panel-vertical">
      <p class="sr-only">Buenos Aires se escribe en plural</p>
      <video class="panel-img" controls="">
        <source src="/videoBuenosAires.mp4" type="video/mp4" />
        <track
          src="/videoBuenosAires.vtt"
          default=""
          kind="captions"
          srclang="es"
        />
        <p>Su navegador no soporta vídeos HTML5. Puedes ver el video haciendo clic en
          <a href="/videoBuenosAires.mp4">este enlace</a>.
        </p>
      </video>
      <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>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <iframe
        class="panel-img"
        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>
      <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>
        </div>
      </div>
    </div>
  </div>
</div>

Sin multimedia

Título del destacado

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

Botón

Título del destacado

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

Botón

<div class="highlighted-items-2">
  <div class="col">
    <div class="panel-vertical">
      <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>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <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="#" target="_blank" download="">
            <span class="material-symbols-rounded" aria-hidden="true">file_download</span>Descargar
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <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="external" href="#" target="_blank" rel="noopener noreferrer">Enlace externo</a>
        </div>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="panel-vertical">
      <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 href="#" class="list-group-item item-sm">
            <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
            <div class="access-content">
              <span class="access-title">Acceso</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Destacado lateral

Título del destacado

Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces.

Botón

<div class="panel-lateral">
  <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.</p>
    <div class="panel-footer">
      <a class="btn btn-primary btn-lg btn-block" href="#" rel="noopener noreferrer">
        Botón
      </a>
    </div>
  </div>
</div>

Título del destacado

Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces.

Descargar

<div class="panel-lateral">
  <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.</p>
    <div class="panel-footer">
      <a class="btn btn-secondary btn-lg btn-block" href="#" target="_blank" download="">
        <span class="material-symbols-rounded" aria-hidden="true">file_download</span>Descargar
      </a>
    </div>
  </div>
</div>

Título del destacado

Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces.

Enlace externo

<div class="panel-lateral">
  <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.</p>
    <div class="panel-footer">
      <a class="external" href="#" target="_blank" rel="noopener noreferrer">Enlace externo</a>
    </div>
  </div>
</div>

Título del destacado

Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas líneas. No puede contener negritas ni enlaces.

Acceso

<div class="panel-lateral">
  <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.</p>
    <div class="panel-footer">
      <a href="#" class="list-group-item item-sm">
        <span class="material-symbols-rounded o-icon" aria-hidden="true">info</span>
        <div class="access-content">
          <span class="access-title">Acceso</span>
        </div>
      </a>
    </div>
  </div>
</div>

Variantes

Navegación de pie de página