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