Da estilo a tus tarjetas.
Dale a tus tarjetas un aspecto que encaja con tu sitio: un esquema de color desde el Type de la tarjeta, esquinas redondeadas y una sombra desde el panel Style. Al final tienes una tarjeta que puedes repetir en una fila para funciones, equipo o precios. Para poner primero una tarjeta en la página, consulta Añadir una tarjeta.
El vídeo sigue los pasos de abajo: da a una tarjeta un aspecto claro, esquinas redondas y una sombra suave.
Da estilo a una tarjeta
- Pasa sobre la tarjeta, abre More y elige Settings.
- En Type, elige Light.
- Abre el panel Style.
- Fija Border radius en 8.
- Fija Drop shadow en 2.
- Haz clic en Save.
Lo que ves
La tarjeta tiene un fondo claro, esquinas redondeadas y una sombra suave. Su barra Header está arriba, su Title abre el cuerpo, y los elementos que añadiste dentro siguen debajo.
Un Type colorea toda la tarjeta, no solo la cabecera. Primary, Secondary, Success, Info, Warning, Danger y Dark rellenan la tarjeta con ese color del tema y ponen el texto en blanco. Light da un fondo claro con texto normal. Default deja la tarjeta a tu tema.
Ajustes
| Ajuste | Dónde | Qué hace |
|---|---|---|
| Header | General | Texto en una barra arriba de la tarjeta; déjalo vacío para no tener barra |
| Title | General | Un encabezado arriba del cuerpo de la tarjeta |
| Type | General | El esquema de color de toda la tarjeta; predeterminado Default |
| Background, Font color | Style | Tus propios colores, cuando Type es Default |
| Border radius | Style | Esquinas redondeadas, en píxeles |
| Drop shadow | Style | Profundidad, de 1 a 5 |
| Border (box model), Border style, Border color | Style | Un marco en uno o más lados |
Patrones de tarjeta
- Flat card: Border style Solid, un Border color claro, Border radius 4, sin sombra.
- Elevated card: Drop shadow 2, Border style None, Border radius 8.
- Highlighted card: fija el lado izquierdo de Border en el box model en 4, Border style Solid y un Border color de acento.
- Card that lifts: Drop shadow 1 en Style y 4 en Hover style; consulta Haz que los elementos reaccionen en hover.
Tarjetas en una fila
Para una cuadrícula de tarjetas de funciones, equipo o precios:
- Añade una fila y escoge un diseño con tres o cuatro columnas iguales.
- Añade una tarjeta a cada columna y dale a cada tarjeta los mismos valores de Type y Style.
- Abre el menú More de la fila, elige Settings y activa Equal-height columns.
Las columnas se alinean, pero cada tarjeta queda tan alta como su contenido. Mantén el texto de cada tarjeta con una longitud parecida, para que las tarjetas terminen a la misma altura. Para una tabla de precios, destaca el plan recomendado con otro Type o un Drop shadow más profundo.
Si no ves el estilo
- Background o Font color en el panel Style no tienen efecto. Un Type distinto de Default fija los colores de la tarjeta con clases del tema que ganan al panel Style. Fija Type en Default y elige tus propios colores.
- El texto blanco en una tarjeta de color es difícil de leer. Los colores Warning e Info de muchos temas son pálidos, y estos tipos siempre ponen texto blanco. Elige un Type más oscuro, o Light, que conserva el color de texto normal.
- The shadow does not show. Drop shadow es 0, lo que significa sin sombra. Fíjalo en 1 o más.
¿Qué sigue?
- Añadir una tarjeta: añade una tarjeta y llénala con elementos.
- Haz que los elementos reaccionen en hover: deja que las tarjetas se eleven cuando las visitas las señalan.
- Usa los colores de tu marca: mantén los colores de tarjetas en línea con el resto del sitio.