Web ResponsiveComponents
Panels

Panels

Un panel es el elemento básico que debes usar para distribuir el contenido de una página. Se trata de bloques apilables de color blanco que actúan como contenedores y nos ayudan a clasificar visualmente la información de la página.

Normas

  • El contenido siempre debe ir sobre un panel, nunca directamente sobre el fondo.
  • Los panels deben ocupar el ancho total de la página y nunca debes dividirlos verticalmente.
  • Los panels siempre deben tener unos márgenes internos de 20dp.
  • Puedes distribuir la información en diferentes panels y apilar uno bajo el otro.
  • Los panels son blancos. Nunca les apliques degradados, sombras o efectos.
  • 10dp
  • 20dp
Estructura básica de panels apilados con márgenes verticales de 10dp.

Estructura básica de un panel

Como hemos visto anteriormente, los panels siempre deben respetar unos márgenes interiores de 20dp. Si el panel empieza con un heading el márgen superior e inferior deberán aumentar hasta los 40dp, manteniendo siempres los márgenes laterales de 20dp.

  • 20dp
  • 40dp
Estructura básica de un panel.

Dividir un panel en bloques

No es necesario que uses siempre el ancho máximo de un panel para distribuir la información. Puedes dividir el panel en bloques y recordar que debes mantener las mismas normas que hemos visto anteriormente en cuanto a los márgenes, así como separar horizontalmente el contenido de cada bloque usando un márgen de 20dp.

  • 20dp
  • 40dp
Divide los paneles en bloques según el contenido.

Aplicar color de fondo a un bloque

Si lo deseas puedes aplicar un color de fondo a alguno de los bloques en los que dividas el panel para resaltar o diferenciar una parte del contenido. Si optas por este recurso, recuerda dejar 20dp más de margen para que el contenido de ambos bloques respiren.

  • 20dp
  • 40dp
Aplica un color de fondo a uno de los bloques del panel para diferenciar el contenido.

Panel headings

Los paneles pueden tener un heading que aplique a todo el contenido que se muestra en él. En este caso debes respetar los márgenes de los casos anteriores: 40dp (superior/inferior) y 20dp (izquierda/derecha), y añadir un margen de 40dp entre el heading y el contenido.

  • 20dp
  • 40dp
Panel con un heading que sirve de titular y aplica a todo el contenido.

Usar imágenes como fondo de un panel

También puedes usar una imágen como fondo del panel en casos muy específicos en los que, por ejemplo, quieras destacar de manera especial la cabecera de una página.

  • 20dp
Usa imágenes de fondo en los paneles para darles más protagonismo.

Altura mínima de un panel

Si usas un único panel para construir la página este debe estar junto a cabecera y footer, sin dejar ningún espacio vertical entre ellos. En estos casos recuerda que los panels deben tener una altura mínima de 400dp de alto y que no debes adaptar la altura del panel al contenido cuando este último tiene una altura inferior.

Cuando solo uses 1 panel en tu página este debe tener una altura mínima de 400dp.