DESY

Sistema de Diseño del Gobierno de Aragón.

Volver

Índice de páginas

Espaciados

Valores predefinidos que se han de usar para saltos entre objetos, padding, márgenes y dimensiones.

Espaciado

Espaciado preferido de desy-html

Utiliza en la medida de lo posible estos valores, que se aplicarán automáticamente por Tailwind CSS a height, max-height, margin, padding, gap e inset.

Nombre Tamaño Pixels Ejemplo de clases
xs 0.25rem 4px pr-xs
sm 0.5rem 8px pr-sm
base 1rem 16px pr-base
lg 1.75rem 28px pr-lg
xl 2.5rem 40px pr-xl
2xl 5rem 80px pr-2xl
3xl 10rem 160px pr-3xl

Espaciado preferido de desy-html para width

Utiliza en la medida de lo posible estos valores para establecer valores de width y max-width.

Nombre Tamaño Pixels Ejemplo de clases
xs 20rem 320px w-xs
sm 24rem 384px w-sm
md 28rem 448px w-md
lg 32rem 512px w-lg
xl 36rem 576px w-xl

Espaciado adicional de desy-html para max-width y max-height

desy-html usa los valores de Tailwind CSS y adicionalmente estos otros:

Nombre Tamaño Pixels Ejemplo de clases
40 10rem 160px max-w-40
64 16rem 256px max-w-64
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

Más espaciados

Si necesitas más espaciados, usa los espaciados por defecto de Tailwind CSS.