Bloque de imagen y texto en dos columnas para destacar características. Incluye variante invertida.
Descripción
La Sección feature sirve para mostrar una característica, función o beneficio de tu producto usando una imagen de un lado y texto del otro, en dos columnas.
Es un formato muy usado en landing pages modernas: el usuario entiende rápido qué hace algo porque el texto viene acompañado de una imagen clara.
Por dentro usa CSS Grid (un sistema para armar diseños en filas y columnas) con dos columnas iguales y un espacio generoso entre ellas. Una columna es la imagen, la otra es el texto.
En la versión normal, la imagen va a la izquierda y el texto a la derecha. En la versión invertida, el orden se da vuelta solo agregando la clase `feature-reverse` — no hace falta cambiar el HTML.
Ese "dar vuelta el orden" se logra con una propiedad CSS (direction) que voltea visualmente los elementos, y después se corrige para que el texto se siga leyendo de izquierda a derecha. Es un truco de CSS que evita duplicar código o usar JavaScript.
Si ponés varias secciones feature seguidas en la misma página (algo muy común en landings de producto), la variante `.feature-alt` tiene un fondo gris clarito distinto. Alternando entre el fondo normal y el alternativo, las secciones se separan visualmente sin necesitar líneas ni bordes.
La imagen mantiene siempre la misma proporción (ancho y alto), sin importar el tamaño real de la foto que uses. El contenedor de la imagen tiene las esquinas redondeadas automáticamente y un fondo gris que se ve mientras la imagen carga.
El bloque de texto tiene cuatro partes: una etiqueta de categoría en mayúsculas (por ejemplo "CARACTERÍSTICA"), el título, una descripción y un link para hacer algo. La etiqueta es chica y con letras bien separadas para no competir con el título.
El título cambia de tamaño según el ancho de la pantalla usando la función CSS clamp() (que define un tamaño mínimo, uno ideal y uno máximo, y el navegador elige el que corresponde).
Las cuatro partes del texto (etiqueta, título, descripción y link) están una debajo de la otra con un espacio parejo entre ellas, así todo se lee ordenado sin necesitar ajustes manuales.
El link de acción usa el color principal del proyecto, letra un poco más gruesa, y se pone más transparente al pasarle el mouse (hover). Ocupa solo el espacio de su propio texto, no toda la columna — se ve como un link, no como un botón grande. Si preferís un botón sólido, podés cambiarlo por cualquiera de los botones de Kodeval Pages.
Todos los colores están guardados en variables CSS (valores que definís una vez y reutilizás en todo el archivo): fondo normal, fondo alternativo, color de texto, color apagado y color de acento. Para un tema oscuro, alcanza con invertir el color de fondo y el de texto.
En pantallas de hasta 768 píxeles de ancho, las dos columnas pasan a ser una sola: primero la imagen, después el texto, uno debajo del otro. El espacio alrededor también se achica un poco en celular.
Este componente no necesita JavaScript ni librerías externas. Es solo CSS Grid y flexbox con variables que podés personalizar. Se puede usar en cualquier proyecto sin generar conflictos con otros estilos.
Es ideal para páginas de producto, servicios o aplicaciones, cuando necesitás mostrar visualmente qué hace algo. Combinado con el Hero simple y otros módulos de Kodeval Pages, arma una landing completa sin frameworks.
Para usar este módulo, pegá el HTML donde quieras que aparezca la sección y el CSS dentro de tu archivo de estilos (o en un <style> en el head). Necesitás también `base.css`, `fonts.css` y `layout.css` del proyecto para que se vea igual que en el ejemplo.
<!-- Variante normal: imagen a la izquierda -->
<section class="feature">
<div class="feature-inner">
<div class="feature-img">
<img src="imagen.jpg" alt="Descripción de la imagen">
</div>
<div class="feature-text">
<span class="feature-badge">Característica</span>
<h2>Un título que<br>explica el valor.</h2>
<p>Describí en pocas líneas qué hace esta característica y por qué le importa al usuario. Directo y sin vueltas.</p>
<a href="#" class="feature-link">Saber más →</a>
</div>
</div>
</section>
<!-- Variante invertida: imagen a la derecha -->
<!-- Agregá la clase "feature-reverse" al .feature-inner -->
<section class="feature feature-alt">
<div class="feature-inner feature-reverse">
<div class="feature-img">
<img src="imagen.jpg" alt="Descripción de la imagen">
</div>
<div class="feature-text">
<span class="feature-badge">Otra característica</span>
<h2>Otro título que<br>destaca algo.</h2>
<p>Describí esta segunda característica de forma directa y concisa.</p>
<a href="#" class="feature-link">Saber más →</a>
</div>
</div>
</section>
/*
|--------------------------------------------------------------------------
| Sección Feature — Kodeval Pages
|--------------------------------------------------------------------------
| Bloque de imagen + texto en dos columnas.
| Incluye variante invertida (imagen a la derecha).
| Sin dependencias externas.
|--------------------------------------------------------------------------
*/
/* =====================
VARIABLES
===================== */
.feature {
--feature-bg: #ffffff;
--feature-alt-bg: #f8fafc;
--feature-text: #0f172a;
--feature-muted: #64748b;
--feature-accent: #5865f2;
}
/* =====================
SECCIÓN
La variante .feature-alt tiene fondo diferente
para alternar entre secciones en la misma página.
===================== */
.feature {
background: var(--feature-bg);
padding: 5rem 2rem;
}
.feature.feature-alt {
background: var(--feature-alt-bg);
}
/* =====================
CONTENEDOR INTERNO
Dos columnas iguales separadas por un gap.
===================== */
.feature-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
/* =====================
VARIANTE INVERTIDA
flex-direction:row-reverse voltea el orden de las columnas
sin tener que reordenar el HTML.
===================== */
.feature-inner.feature-reverse {
direction: rtl; /* ← truco: invierte el orden sin JS */
}
.feature-inner.feature-reverse > * {
direction: ltr; /* restaurar el texto */
}
/* =====================
IMAGEN
===================== */
.feature-img {
border-radius: 16px;
overflow: hidden;
background: #e2e8f0;
aspect-ratio: 4 / 3;
}
.feature-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* =====================
TEXTO
===================== */
.feature-text {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* =====================
BADGE
===================== */
.feature-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--feature-accent);
width: fit-content;
}
/* =====================
TÍTULO
===================== */
.feature-text h2 {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--feature-text);
margin: 0;
}
/* =====================
DESCRIPCIÓN
===================== */
.feature-text p {
font-size: 1rem;
color: var(--feature-muted);
line-height: 1.7;
margin: 0;
}
/* =====================
LINK
===================== */
.feature-link {
color: var(--feature-accent);
text-decoration: none;
font-size: 0.9rem;
font-weight: 600;
width: fit-content;
transition: opacity 0.15s;
}
.feature-link:hover { opacity: 0.7; }
/* =====================
RESPONSIVE
En móvil apilamos las columnas.
===================== */
@media (max-width: 768px) {
.feature-inner,
.feature-inner.feature-reverse {
grid-template-columns: 1fr;
direction: ltr;
gap: 2rem;
}
.feature { padding: 3rem 1.5rem; }
}