Web ResponsiveComponents
Search

Search

El componente search, aunque está formado por otros elementos que también son componentes como botones y form elements, tiene esta categoría por la importancia de las búsquedas de empleo en InfoJobs. Es importante que lo apliques de manera consistente y que no trates de reconstruirlo o aplicarlo con estilos o en situaciones diferentes a las que te describimos a continuación.

Estructura

La versión más compleja del search se construye a partir de un form input, un dropdown y un botón. El ancho total del componente siempre debe ser igual al de la columna donde lo apliques.

Puedes combinar estos elementos, forms, dropdonws y botones, de diferentes maneras para crear versiones más sencillas. Usa por ejemplo un default input y un botón o añade un heading y un texto. Hay muchas combinaciones posibles, pero recuerda que debes evitar construcciones excesivamente complejas.

Diferentes estructuras de search en función al ancho y los componentes que se usan para construirlo.

Posición

En función a la presencia que quieras que tenga el search en tu página o al contenido con el que vaya relacionado, puedes optar por aplicarlo en la parte superior o inferior de un panel.

Para mejorar la integración del search con el contenido también puedes insertarlo en el interior del panel.

Recuerda que es preferible que nunca uses más de una caja de search en la misma página.

Search situado en la parte superior de un panel.
Search situado en el interior de un panel.

Estilos

El search por defecto debe tener el fondo de color Day Blue (#2088c2). Puedes usar también el fondo en color Shiro (#FFF), Dark Silk (#2d3133) e incluso usar sobre este último una transparencia del 90% para aplicarlo sobre una imagen.

Search con el fondo blanco y oscuro en lugar del color azul default.
Search con el fondo oscuro con transparencia del 95% aplicado sobre una imagen.