Elementos
En este framework tienes dos formas para estructurar las secciones de cada una de las páginas. Puedes crear rejillas (basadas en gridlayout) o bloques (que funcionan con flex).
A continuación te explicamos como usar las cards en cada una de ellas.
Esta card la puedes usar dentro de los dos modos rejilla: .rejilla1x3 .rejilla2x3 .rejilla1x4 y .rejilla2x4
En dispositivos con pantallas pequeñas se transforman en modo columna.
Esta card la puedes usar dentro de los dos modos flex: .columnacentrada y .filas
En pantallas menores de 700px, al ser responsive, adopta la apariencia de la card vertical.
En este código puedes ver facilmente como utilizar las cards verticales. Si tienes dudas sobre como organizar tus secciones, consulta bloques y rejillas.
<div class="rejilla2x3"> <div class="rejilla-card_vertical"> <img src="https://picsum.photos/500/500" alt="foto producto"> <div><h2>Melones</h2> <h3>3€/kg</h3> <p>La mejor fruta de procedencia local, sin uso de pesticidas.</p> <a href="#" class="piedefoto">+info</a> <button class="botonverde"><div>Añadir</div><span class="material-symbols-outlined">add_shopping_cart</span></button></div> </div> <div class="rejilla-card_vertical"> <img src="https://picsum.photos/500/500" alt="foto producto"> <div><h2>Sandias</h2> <h3>3€/kg</h3> <p>La mejor fruta de procedencia local, sin uso de pesticidas.</p> <a href="#" class="piedefoto">+info</a> <button class="botonverde"><div>Añadir</div><span class="material-symbols-outlined">add_shopping_cart</span></button></div> </div> <div class="rejilla-card_vertical"> <img src="https://picsum.photos/500/500" alt="foto producto"> <div><h2>Melocotones</h2> <h3>3€/kg</h3> <p>La mejor fruta de procedencia local, sin uso de pesticidas.</p> <a href="#" class="piedefoto">+info</a> <button class="botonverde"><div>Añadir</div><span class="material-symbols-outlined">add_shopping_cart</span></button></div> </div> <div class="rejilla-card_vertical"> <img src="https://picsum.photos/500/500" alt="foto producto"> <div><h2>Naranjas</h2> <h3>3€/kg</h3> <p>La mejor fruta de procedencia local, sin uso de pesticidas.</p> <a href="#" class="piedefoto">+info</a> <button class="botonverde"><div>Añadir</div><span class="material-symbols-outlined">add_shopping_cart</span></button></div> </div> <div class="rejilla-card_vertical"> <img src="https://picsum.photos/500/500" alt="foto producto"> <div><h2>Limones</h2> <h3>3€/kg</h3> <p>La mejor fruta de procedencia local, sin uso de pesticidas.</p> <a href="#" class="piedefoto">+info</a> <button class="botonverde"><div>Añadir</div><span class="material-symbols-outlined">add_shopping_cart</span></button></div> </div> <div class="rejilla-card_vertical"> <img src="https://picsum.photos/500/500" alt="foto producto"> <div><h2>Fresas</h2> <h3>3€/kg</h3> <p>La mejor fruta de procedencia local, sin uso de pesticidas.</p> <a href="#" class="piedefoto">+info</a> <button class="botonverde"><div>Añadir</div><span class="material-symbols-outlined">add_shopping_cart</span></button></div> </div> </div>
La mejor fruta de procedencia local, sin uso de pesticidas.
En este código puedes ver facilmente como utilizar las cards horizontales. Recuerda que además de usarlas dentro de una sección de clase .filas, también las puedes usar dentro de una sección con clase .columnacentrada. Si tienes dudas sobre como organizar tus secciones, consulta bloques y rejillas.
<div class="filas"> <div class="flex-card_horizontal"> <img src="https://picsum.photos/500/500" alt="foto producto"> <div><h2>Melones</h2> <h3>3€/kg</h3> <p>La mejor fruta de procedencia local, sin uso de pesticidas.</p> <a href="#" class="piedefoto">+info</a> <button class="botonverde"><div>Añadir</div><span class="material-symbols-outlined">add_shopping_cart</span></button></div> </div> <div class="flex-card_horizontal"> <img src="https://picsum.photos/500/500" alt="foto producto"> <div><h2>Melones</h2> <h3>3€/kg</h3> <p>La mejor fruta de procedencia local, sin uso de pesticidas.</p> <a href="#" class="piedefoto">+info</a> <button class="botonverde"><div>Añadir</div><span class="material-symbols-outlined">add_shopping_cart</span></button></div> </div> <div class="flex-card_horizontal"> <img src="https://picsum.photos/500/500" alt="foto producto"> <div><h2>Melones</h2> <h3>3€/kg</h3> <p>La mejor fruta de procedencia local, sin uso de pesticidas.</p> <a href="#" class="piedefoto">+info</a> <button class="botonverde"><div>Añadir</div><span class="material-symbols-outlined">add_shopping_cart</span></button></div> </div> <div class="flex-card_horizontal"> <img src="https://picsum.photos/500/500" alt="foto producto"> <div><h2>Melones</h2> <h3>3€/kg</h3> <p>La mejor fruta de procedencia local, sin uso de pesticidas.</p> <a href="#" class="piedefoto">+info</a> <button class="botonverde"><div>Añadir</div><span class="material-symbols-outlined">add_shopping_cart</span></button></div> </div> <div class="flex-card_horizontal"> <img src="https://picsum.photos/500/500" alt="foto producto"> <div><h2>Melones</h2> <h3>3€/kg</h3> <p>La mejor fruta de procedencia local, sin uso de pesticidas.</p> <a href="#" class="piedefoto">+info</a> <button class="botonverde"><div>Añadir</div><span class="material-symbols-outlined">add_shopping_cart</span></button></div> </div> <div class="flex-card_horizontal"> <img src="https://picsum.photos/500/500" alt="foto producto"> <div><h2>Melones</h2> <h3>3€/kg</h3> <p>La mejor fruta de procedencia local, sin uso de pesticidas.</p> <a href="#" class="piedefoto">+info</a> <button class="botonverde"><div>Añadir</div><span class="material-symbols-outlined">add_shopping_cart</span></button></div> </div> </div>