Elementos disponibles

Esta página contiene todos los distintos elementos, para que puedas examinar el código y ver lo que se puede hacer.

Tema (Theme)

El tema es sketchy, pero podría ser cualquier otro. Ya está configurado en el archivo _quarto.yml.

En sketchy doc hay ejemplos con código de todos los elementos, que fueron resumidos en esta página.

Texto

Es posible usar markdown normal, o html. Las clases de bootstrap están disponibles.

Este es el texto típico en negritas e itálicas.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Esta línea de texto está destinada a ser tratada como letra pequeña.

Lo siguiente es representado como texto en negritas.

Lo siguiente es representado como texto en cursiva.

Lo siguiente es un enlace aquí.

Este texto está subrayado

Colores

.text-primary

.text-primary-emphasis

.text-secondary

.text-secondary-emphasis

.text-success

.text-success-emphasis

.text-danger

.text-danger-emphasis

.text-warning

.text-warning-emphasis

.text-info

.text-info-emphasis

.text-light

.text-light-emphasis

.text-dark

.text-dark-emphasis

.text-body

.text-body-emphasis

.text-body-secondary

.text-body-tertiary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Celdas de Python

Imagenes

Texto que parece botones pero no son botones

Success
Info
Warning
Danger

Success

Info

Warning

Danger


Success Info Warning Danger

Botones

La clase btn-lg y btn-sm hace el botón más grande y chico respectivamente:

Típicamente los botones se combinan con un hipervínculo:

Iniciar el escape room

Para hacer un botón hipervínculo que ocupe todo el ancho de la pantalla, se puede usar:

Mensajes de quarto - Callouts

Los mensajes de quarto son una forma de mostrar mensajes en la página.

Nota

Note that there are five types of callouts, including: note, warning, important, tip, and caution.

Tip with Title

This is an example of a callout with a title.

This is an example of a ‘folded’ caution callout that can be expanded by the user. You can use collapse="true" to collapse it by default or collapse="false" to make a collapsible callout that is expanded by default.

Tip with Title

This is a callout with a title.

Pay Attention

Using callouts is an effective way to highlight content that your reader give special consideration or attention.

Pay Attention

Using callouts is an effective way to highlight content that your reader give special consideration or attention.

Mensajes

Descartables

Warning!

Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it’s not super important.

Oh snap! Change a few things up and try submitting again.

Fijos

Warning!

Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Oh snap! Change a few things up and try submitting again.

Well done! You successfully read this important alert message.

Heads up! This alert needs your attention, but it’s not super important.

Oh snap! Change a few things up and try submitting again.

Badges

Badges cuadrados

Primary Secondary Success Danger Warning Info Light Dark

Badges redondeados

Primary Secondary Success Danger Warning Info Light Dark

Tarjetas (cards)

Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.

Tarjetas (cards) sin fondo

Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.
Header
Some quick example text to build on the card title and make up the bulk of the card’s content.