Spectre Cards nos ofrece diseñar cartas. Una tarjeta es un contenedor de contenido flexible y extensible. Incluye opciones para encabezados y pies de página, una amplia variedad de contenido, colores de fondo contextuales y potentes opciones de visualización.
Reemplaza los paneles de uso, pozos y miniaturas. Todo se puede usar en un único contenedor de contenido flexible llamado tarjeta. Para crear una tarjeta, debe agregar un elemento contenedor con la clase de tarjeta . Y agregue elementos secundarios con las clases card-image , card-header , card-body y card-footer .
Clases de cartas de espectro:
- tarjeta: esta clase se utiliza para crear el componente de la tarjeta.
- card-image: esta clase se utiliza para agregar imágenes a la tarjeta.
- card-header: esta clase se utiliza para contener el título de la tarjeta y la clase de subtítulos.
- card-title: Esta clase se utiliza para establecer el título de la tarjeta.
- card-subtitle: Esta clase se utiliza para establecer el subtítulo de la tarjeta.
- card-body: esta clase se utiliza para establecer el contenido del cuerpo de la tarjeta.
- card-footer: esta clase se utiliza para establecer el pie de página de la tarjeta.
Nota: La imagen de la tarjeta se puede colocar en cualquier parte de la tarjeta.
Sintaxis:
<div class="card">
<div class="card-image">
<img src="...">
</div>
<div class="card-header">
<div class="card-title">...</div>
<div class="card-subtitle">...</div>
</div>
<div class="card-body">
...
</div>
<div class="card-footer">
...
</div>
</div>
Ejemplo: El siguiente ejemplo ilustra las Cartas de Espectro.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
.card {
margin:5%;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<b><p> SPECTRE card class </p></b>
</center>
<div class="card">
<div class="card-image">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220123013311/gfg.png"
class="img-responsive">
</div>
<div class="card-header">
<div class="card-title h6 text-green">
GeeksforGeeks
</div>
<div class="card-subtitle text-gray">
A Computer Science Portal for Geeks
</div>
</div>
<div class="card-body">
<p>
We provide a variety of services for you
to learn, thrive and also have fun! Free
Tutorials, Millions of Articles, Live,
Online and Classroom Courses ,Frequent
Coding Competitions ,Webinars by Industry
Experts, Internship opportunities and Job
Opportunities. Knowledge is power!
</p>
</div>
<div class="card-footer">
<button class="btn btn-success">
Explore more
</button>
</div>
</div>
</body>
</html>
Producción:
Cartas de Espectro
Referencia: https://picturepan2.github.io/spectre/components/cards.html#cards
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA