Bestiary # bloques texto + imagen
Find me in /app/views/bestiaries/bloques_texto_imagen.html.erb
Índice
En el back podemos añadir bloques de Texto + imagen En esta página pueden verse varios ejemplos de distribuciones.
Por defecto las imágenes se expanden para ocupar el 100% del ancho del contenedor. Puede haber que adapatar el alto de la imagen para ajustar lo mejor posible a la cantidad de texto.
.headline-M Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, unde, adipisci, aliquam minus enim tempore.
Bloque de 2 columnas (.cols-2), con .force-white-text, y un color de fondo: #384047. Possimus, perferendis, iure eos rerum quo commodi eum voluptatem neque similique quod placeat error itaque ducimus libero repellendus exercitationem officiis hic dicta. Voluptate, error, labore, ducimus.
Bloque genérico de texto, centrado a 1 columna. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, unde, adipisci, aliquam minus enim tempore illo qui placeat recusandae maiores dolor perspiciatis excepturi officiis! Minima, blanditiis, possimus, perferendis, iure eos rerum quo commodi eum voluptatem neque similique quod placeat error itaque ducimus libero repellendus exercitationem officiis hic dicta. Voluptate, error, labore, ducimus, tempora dolore ut magni maxime necessitatibus voluptates.
Este bloque de texto tiene la propiedad .two-columns que hace que fluya en dos columnas por CSS, pero dentro del back es un solo bloque de texto.
Lerspiciatis excepturi officiis! Minima, blanditiis, possimus, perferendis, iure eos rerum quo commodi eum voluptatem neque similique quod placeat error itaque ducimus libero repellendus exercitationem officiis hic dicta. Voluptate, error, labore, ducimus, tempora dolore ut magni maxime necessitatibus voluptates enim aliquam sapiente reprehenderit voluptatem repellendus sint rem cupiditate eum omnis alias a ipsam architecto harum itaque officia consectetur iste iusto corporis. A, nemo, aperiam, laboriosam vel veritatis sed nobis ab non recusandae aut unde eos praesentium tempora. Et, inventore, eius.
Caja de texto genérico con un padding por la derecha del 20% del contenedor (.pad-right-20-percent).
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, unde, adipisci, aliquam minus enim tempore illo qui placeat recusandae maiores dolor perspiciatis excepturi officiis! Minima, blanditiis, possimus, perferendis, iure eos rerum quo tempora dolore ut magni maxime necessitatibus voluptates enim aliquam sapiente reprehenderit voluptatem repellendus sint rem cupiditate eum omnis alias a ipsam architecto harum itaque officia consectetur iste iusto corporis. A, nemo, aperiam, laboriosam vel veritatis sed nobis ab non recusandae aut unde eos praesentium tempora. Et, inventore, eius.
Caja con 2 columnas del 50% (.cols-2). Caja de texto genérico a la izquierda e imagen a la derecha.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, unde, adipisci, aliquam mineos rerum quo commodi eum voluptatem neque similique quod placeat error itaque ducimus libero repellendus exercitationem officiis hic dicta. Voluptate, error, labore, ducimus, tempora dolore repellendus sint rem cupiditate eum omnis alias a ipsam architecto harum itaque officia consectetur iste iusto corporis. A, nemo, aperiam, laboriosam vel veritatis sed nobis ab non recusandae aut unde eos praesentium tempora. Et, inventore, eius.
Caja con 2 columnas del 50% (.cols-2). Caja de texto genérico en la columna de la derecha e imagen a la izquierda.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, unde, adipisci, aliquam minus enim tempore illo qui placeat recusandae maiores dolor perspiciatis excepturi officiis! Minima, blanditiis, possimus, perferendis, iure eos rerum quo commodi eum voluptatem neque repellendus sint rem cupiditate eum omnis alias a ipsam architecto harum itaque officia consectetur iste iusto corporis. A, nemo, aperiam, laboriosam vel veritatis sed nobis ab non recusandae aut unde eos praesentium tempora. Et, inventore, eius.
Caja de 1 sola columna, con una sola fila y un solo elemento de imagen. Al no tener padding la caja la imagen se expande para ampliar todo el ancho.
Ejemplo de fila con columnas 33% / 66% (.cols-33-66). El bloque de texto en una columna normal.
Linima, blanditiis, possimus, perferendis, iure eos rerum quo commodi eum voluptatem neque similique quod placeat error itaque ducimus libero repellendus exercitationem officiis hic dicta. Voluptate, error, labore, ducimus, tempora dolore ut magni maxime necessitatibus voluptates enim aliquam sapiente reprehenderit voluptatem repellendus sint rem cupiditate eum omnis.
Ejemplo de fila con columnas 66% / 33% (.cols-66-33). La columna de texto tiene un solo bloque de texto con las columnas generadas con CSS, con la propiedad (.two-columns).
Ut magni maxime necessitatibus voluptates enim aliquam sapiente reprehenderit voluptatem repellendus sint rem cupiditate eum omnis alias a ipsam architecto harum itaque officia consectetur iste iusto corporis. A, nemo, aperiam, laboriosam vel veritatis sed nobis ab non recusandae aut unde eos praesentium tempora. Et, inventore, eius.
Ejemplo de fila con columnas 75% / 25% (.cols-75-25). Con una imagen y un elemento de texto.
Tempore illo qui placeat recusandae maiores dolor perspiciatis excepturi officiis! Minima.
Full BG image with overlay gradient. Image (1200x---)
Título y negrita, .headline-M
Ejemplo del bloque "Full BG image with overlay gradient. Image (1200x---)". Con una imagen de fondo y un gradiente lavado sobre la imagen (.bg-grad-lime-blue).
Y la propiedad force-white-text, que hace que todos los textos del contenedor se vean de color blanco.
Ejemplo de fila con 3 columnas (cols-3), y un gutter ancho que separa las columnas (with-gutter-wide).
Dentro de cada una de las columnas va un elemento de tipo "Elemento imagen / icono + texto genérico".
El "Elemento imagen / icono + texto genérico" soporta además que las imágenes no se "expandan" para rellenar el contenedor (responsive / no-responsive).
Este es un ejemplo de una caja de contenido con 3 columnas en las proporciones 16% / 58% / 25% (.cols-16-58-25). Las columnas tienen una separación (with-gutter).