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

  1. Seleccione Add Block, elija Card y póngale un Name y un Card style.
  2. 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.
  3. 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.
  4. Para un conjunto de frases cortas de características, seleccione Add Block, elija Feature Grid y añada hijos Feature Item.
  5. 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.
Card block form showing the admin name, card style, and background settings.
Block list showing cards with their header, body, and footer regions nested inside.
Feature Grid form showing title, subtitle, and intro text.
Stat Card form showing eyebrow, value, description, and optional URL.
Public page showing a grid of cards above a feature grid.

¿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é.
Siguiente: elegir y cambiar el layout de una página

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>