Detalles de Diseño: Radius, Gap y Padding en Desktop, Tablet y Móvil

El diseño responsivo de nuestra interfaz de usuario requiere una cuidadosa consideración de los valores de radius, gap y padding para cada tipo de dispositivo: Desktop, Tablet y Móvil. Los siguientes detalles y valores aseguran una óptima visualización en todos estos dispositivos.

Desktop

Hero area

Gap: 32

Padding: 64,48,64,48.

Espacios entre titulo y texto

Gap: 20

Card

Radius: 40

Gap: 32

Padding: 48

Card dentro de una card

Radius: 32

Gap: 32

Padding: 48

Card dentro de una card

Radius: 20

Tablet

Hero area

Gap: 32

Padding: 64,48,64,48.

Espacios entre titulo y texto

Gap: 20

Card

Radius: 32

Gap: 32

Padding: 32

Card dentro de una card

Radius: 20

Gap: 32

Padding: 20

Card dentro de una card

Radius: 16

Mobile

Hero area

Gap: 24

Padding: 0

Espacios entre titulo y texto

Gap: 12

Card

Radius: 20

Gap: 20

Padding: 20

Card dentro de una card

Radius: 16

Gap: 20

Padding: 0

Card dentro de una card

Radius: 20

Detalles de Diseño: Radius, Gap y Padding en Desktop, Tablet y Móvil

El diseño responsivo de nuestra interfaz de usuario requiere una cuidadosa consideración de los valores de radius, gap y padding para cada tipo de dispositivo: Desktop, Tablet y Móvil. Los siguientes detalles y valores aseguran una óptima visualización en todos estos dispositivos.

Desktop

Hero area

Gap: 32

Padding: 64,48,64,48.

Espacios entre titulo y texto

Gap: 20

Card

Radius: 40

Gap: 32

Padding: 48

Card dentro de una card

Radius: 32

Gap: 32

Padding: 48

Card dentro de una card

Radius: 20

Tablet

Hero area

Gap: 32

Padding: 64,48,64,48.

Espacios entre titulo y texto

Gap: 20

Card

Radius: 32

Gap: 32

Padding: 32

Card dentro de una card

Radius: 20

Gap: 32

Padding: 20

Card dentro de una card

Radius: 16

Mobile

Hero area

Gap: 24

Padding: 0

Espacios entre titulo y texto

Gap: 12

Card

Radius: 20

Gap: 20

Padding: 20

Card dentro de una card

Radius: 16

Gap: 20

Padding: 0

Card dentro de una card

Radius: 20