Section Img + Bloque

Este patrón permite crear una sección con una imagen y un bloque de contenido alineados en horizontal, totalmente adaptable y personalizable.

Personalización con CSS

La clase principal para personalizar es .section-img-block. Puedes sobrescribir las siguientes variables CSS para ajustar los espacios y el diseño de forma global o añadírselo a una clase para que sea más local:

• --_inline-padding: Padding horizontal en móvil (por defecto: 1rem)
• --_inline-padding-desktop: Padding horizontal en escritorio (por defecto: 2rem)
• --_block-padding: Padding vertical en móvil (por defecto: 2rem)
• --_block-padding-desktop: Padding vertical en escritorio (por defecto: 2rem)

Ejemplo de personalización

.section-img-block.my-custom-section {
  --_inline-padding: 0.5rem;
  --_inline-padding-desktop: 3rem;
  --_block-padding: 1.5rem;
  --_block-padding-desktop: 3rem;
}

Estructura y comportamiento

• El patrón está envuelto en una sección que define el ancho máximo del contenido con los controles habituales de la sección.
• El alto de la sección también se defini en la propia sección. Si no se define será el espacio que necesite el texto.
• El bloque de texto está en un elemento flex en el que se puede definir si está centrado, arriba o abajo (siempre que se defina un alto mínimo mayor en la sección)
• La imagen ocupa siempre el 50% del ancho de la sección (sin márgenes).
• Puedes cambiar el orden de la imagen y el texto (izquierda/derecha) simplemente cambiando el orden de los bloques en el editor, y el diseño seguirá funcionando correctamente.