Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen increíbles y pueden ser accesibles para cualquier dispositivo. En este artículo, aprenderemos sobre los conceptos básicos de las tarjetas .
Una tarjeta Foundation CSS generalmente contiene un encabezado, una imagen, una descripción y un pie de página. Se puede omitir cualquiera de estos elementos para hacer una tarjeta sin imagen ni pie de página. Se puede utilizar para mostrar múltiples piezas pequeñas de información en una página.
Clases de tarjetas Foundation CSS:
- tarjeta: esta clase se utiliza para crear un componente de tarjeta.
- card-divider: esta clase se utiliza para dividir la tarjeta en partes separadas. Se puede utilizar para crear el encabezado o pie de página de la tarjeta.
- card-section: Esto se usa para agregar relleno al contenido de la tarjeta. Se puede usar al agregar contenido a la tarjeta, ya que la tarjeta no tiene ningún relleno por sí sola. Esto ayuda a lograr el aspecto clásico de la tarjeta.
Sintaxis:
<div class="card">
<div class="card-divider">
...
</div>
<div class="card-section">
...
</div>
</div>
Ejemplo: este ejemplo muestra una tarjeta básica creada con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body style="padding: 20px;"> <h1 style="color: green"> GeeksforGeeks </h1> <b>Foundation CSS Card Basics</b> <div class="card" style="width: 300px;"> <div class="card-divider"> Japan Trip </div> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220209012810/cardbasicsimg-300x137.png"> <div class="card-section"> <h4>Osaka</h4> <p>You were here for 3 days</p> </div> <div class="card-divider"> 3 months ago </div> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo muestra dos tarjetas con un divisor y una sección.
HTML
<!DOCTYPE html> <html lang="en"> <head> <!-- Compressed CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <!-- Compressed JavaScript --> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> </script> </head> <body style="padding: 20px;"> <h1 style="color: green">GeeksforGeeks</h1> <b>Foundation CSS Card Basics</b> <div class="card" style="width: 300px;"> <div class="card-divider"> <b>DSA Course</b> </div> <div class="card-section"> Learn about data structures and algorithms in this course. </div> <div class="card-divider"> <b>Price:</b> 1499/- </div> </div> <div class="card" style="width: 300px;"> <div class="card-divider"> <b>Competitive Programming Course</b> </div> <div class="card-section"> Learn competitive programming in this course. </div> <div class="card-divider"> <b>Price:</b> 1299/- </div> </div> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/card.html#basics
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA