Card, Feature Grid y Stat Card
Objetivo: construir una card como es debido y saber cuál de los tres bloques parecidos quiere en realidad.
Tiempo: 5 minutos
Necesita: una página, a poder ser con un Grid donde poner las cards
Pasos
- Seleccione Add Block, elija Card y póngale un Name y un Card style.
- Una Card por sí sola no renderiza nada. En la fila de la Card, seleccione Add child block y añada Card Header, Card Body y Card Footer. Las regiones no tienen campos propios: son contenedores.
- Añada contenido dentro de cada región: un Header en la cabecera, un Plain Text en el cuerpo, un Button Link en el pie.
- Para un conjunto de frases cortas de características, seleccione Add Block, elija Feature Grid y añada hijos Feature Item.
- Para una cifra que merece lucirse, elija Stat Card: Value es el número, Eyebrow / Label la línea pequeña de encima y Description la frase de debajo.
¿Cuál de ellos?
- Card: la unidad necesita contenido de verdad: un encabezado, un párrafo, una imagen, una acción. Usted la compone.
- Feature Grid: de tres a seis frases cortas del tipo «hacemos esto», uniformes sin componer cada una.
- Stat Card: el contenido es una cifra. Un valor, una etiqueta, una frase.
Notas
- Las regiones de Card no aparecen en el selector de bloques de primer nivel. Solo existen dentro de una Card, y por eso Add child block en la fila de la Card es la única entrada.
- No necesita las tres regiones. Una Card con solo cuerpo está bien; una Card sin nada es invisible.
- Cards dentro de Cards no anidan de forma útil. Si quiere una cuadrícula de cards, ponga Cards dentro de un Grid.
- Feature Grid es el camino rápido y el menos flexible. Cuando empiece a pelearse con él, lo que quería eran Cards.
- Mantenga los textos de las cards con longitudes parecidas. Una card de tres frases junto a dos de cinco palabras parece rota aunque no lo esté.
Hacer clicable toda la Card
<p>Defina el destino de la Card cuando toda la superficie deba abrir un único destino. El renderer mantiene utilizables los controles internos y evita enlaces anidados no válidos. Use Button Link en el footer para una etiqueta propia o varios destinos.</p>