Card

<gstock-card> | GstockCard

Ejemplos

Básico

Una tarjeta básica con contenido simple.

Este es el contenido básico de una tarjeta.

<gstock-card>
  <p>Este es el contenido básico de una tarjeta.</p>
</gstock-card>

Encabezado

Utilice el slot header para agregar un encabezado a la tarjeta.

Título de la Tarjeta

Contenido de la tarjeta con un encabezado personalizado.

<gstock-card>
  <div slot="header">
    <strong>Título de la Tarjeta</strong>
  </div>
  <p>Contenido de la tarjeta con un encabezado personalizado.</p>
</gstock-card>

Pie de página

Utilice el slot footer para agregar acciones o contenido adicional al pie de la tarjeta.

Esta tarjeta incluye acciones en el pie de página.

Cancelar

Aceptar

<gstock-card>
  <p>Esta tarjeta incluye acciones en el pie de página.</p>
  <div slot="footer">
    <gstock-button variant="text">Cancelar</gstock-button>
    <gstock-button variant="primary">Aceptar</gstock-button>
  </div>
</gstock-card>

Imagen

Utilice el slot image para agregar una imagen en la parte superior de la tarjeta.

Tarjeta con Imagen

Esta tarjeta muestra una imagen en la parte superior.

<gstock-card class="card-with-image">
  <img slot="image" src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80" alt="Imagen de ejemplo">
  <div slot="header">
    <strong>Tarjeta con Imagen</strong>
  </div>
  <p>Esta tarjeta muestra una imagen en la parte superior.</p>
  <div slot="footer">
    <gstock-button variant="text">Ver más</gstock-button>
  </div>
</gstock-card>

<style>
  .card-with-image {
    max-width: 300px;
  }
</style>

Variantes

Utilice el atributo variant para cambiar el estilo visual de la tarjeta.

Default

Variante por defecto con borde simple.

Outlined

Variante con borde más pronunciado.

Elevated

Variante elevada con sombra.

<gstock-card variant="default" class="card-variant">
  <div slot="header">
    <strong>Default</strong>
  </div>
  <p>Variante por defecto con borde simple.</p>
</gstock-card>

<br>

<gstock-card variant="outlined" class="card-variant">
  <div slot="header">
    <strong>Outlined</strong>
  </div>
  <p>Variante con borde más pronunciado.</p>
</gstock-card>

<br>

<gstock-card variant="elevated" class="card-variant">
  <div slot="header">
    <strong>Elevated</strong>
  </div>
  <p>Variante elevada con sombra.</p>
</gstock-card>

<style>
  .card-variant {
    max-width: 300px;
  }
</style>

Padding

Utilice el atributo padding para controlar el espaciado interno de la tarjeta.

Sin Padding

Tarjeta sin padding por defecto (personalizado manualmente).

Small

Tarjeta con padding pequeño.

Medium (Default)

Tarjeta con padding mediano.

Large

Tarjeta con padding grande.

<gstock-card padding="none" class="card-padding">
  <div slot="header" class="custom-padding">
    <strong>Sin Padding</strong>
  </div>
  <p class="custom-padding">Tarjeta sin padding por defecto (personalizado manualmente).</p>
</gstock-card>

<br>

<gstock-card padding="small" class="card-padding">
  <div slot="header">
    <strong>Small</strong>
  </div>
  <p>Tarjeta con padding pequeño.</p>
</gstock-card>

<br>

<gstock-card padding="medium" class="card-padding">
  <div slot="header">
    <strong>Medium (Default)</strong>
  </div>
  <p>Tarjeta con padding mediano.</p>
</gstock-card>

<br>

<gstock-card padding="large" class="card-padding">
  <div slot="header">
    <strong>Large</strong>
  </div>
  <p>Tarjeta con padding grande.</p>
</gstock-card>

<style>
  .card-padding {
    max-width: 300px;
  }

  .custom-padding {
    padding: 1rem;
  }
</style>

Tarjeta completa

Ejemplo de una tarjeta con todos los elementos combinados.

Desarrollo Web Moderno

Aprende las últimas tecnologías y mejores prácticas para crear aplicaciones web modernas y escalables.

Nuevo

Gratis

<gstock-card class="card-complete">
  <img slot="image" src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80" alt="Computadora">
  <div slot="header">
    <gstock-typography variant="heading-h6" component="h3">
      Desarrollo Web Moderno
    </gstock-typography>
  </div>
  <p>
    Aprende las últimas tecnologías y mejores prácticas para crear aplicaciones web modernas y
    escalables.
  </p>
  <div class="badges">
    <gstock-badge color="primary">Nuevo</gstock-badge>
    <gstock-badge color="success">Gratis</gstock-badge>
  </div>
  <div slot="footer" class="footer-actions">
    <gstock-button variant="outlined" class="action-button">Más información</gstock-button>
    <gstock-button variant="primary" class="action-button">Comenzar</gstock-button>
  </div>
</gstock-card>

<style>
  .card-complete {
    max-width: 400px;
  }

  .badges {
    display: flex;
    gap: var(--gstock-space-gap-sm);
    margin-top: var(--gstock-space-gap-md);
  }

  .footer-actions {
    display: flex;
    gap: var(--gstock-space-gap-sm);
  }

  .action-button {
    flex: 1;
  }
</style>

Tarjeta interactiva

Ejemplo de una tarjeta interactiva con múltiples elementos y acciones.

Curso de TypeScript

Domina TypeScript desde cero hasta nivel avanzado. Incluye ejercicios prácticos y proyectos reales.

4.8 ⭐

2,456 estudiantes

<gstock-card variant="elevated" class="interactive-card">
  <img slot="image" src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=80" alt="Código">
  <div slot="header" class="card-header">
    <gstock-typography variant="heading-h6" component="h3">Curso de TypeScript</gstock-typography>
    <gstock-icon-button icon="bookmark" label="Guardar"></gstock-icon-button>
  </div>
  <p>
    Domina TypeScript desde cero hasta nivel avanzado. Incluye ejercicios prácticos y proyectos
    reales.
  </p>
  <div class="chips-container">
    <gstock-chip>4.8 ⭐</gstock-chip>
    <gstock-chip>2,456 estudiantes</gstock-chip>
  </div>
  <div slot="footer" class="card-footer">
    <gstock-button variant="outlined" class="footer-button">Vista previa</gstock-button>
    <gstock-button variant="primary" class="footer-button">Inscribirse</gstock-button>
  </div>
</gstock-card>

<style>
  .interactive-card {
    max-width: 350px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .chips-container {
    display: flex;
    gap: var(--gstock-space-gap-sm);
    margin-top: var(--gstock-space-gap-md);
  }

  .card-footer {
    display: flex;
    gap: var(--gstock-space-gap-sm);
  }

  .footer-button {
    flex: 1;
  }
</style>

Grid de tarjetas

Ejemplo de cómo organizar múltiples tarjetas en un grid responsive.

Tarjeta 1

Contenido de la primera tarjeta.

Tarjeta 2

Contenido de la segunda tarjeta.

Tarjeta 3

Contenido de la tercera tarjeta.

Tarjeta 4

Contenido de la cuarta tarjeta.

<div class="cards-grid">
  <gstock-card variant="elevated">
    <div slot="header">
      <gstock-typography variant="heading-h6" component="h3">Tarjeta 1</gstock-typography>
    </div>
    <p>Contenido de la primera tarjeta.</p>
    <div slot="footer">
      <gstock-button variant="text" size="small">Leer más</gstock-button>
    </div>
  </gstock-card>

  <gstock-card variant="elevated">
    <div slot="header">
      <gstock-typography variant="heading-h6" component="h3">Tarjeta 2</gstock-typography>
    </div>
    <p>Contenido de la segunda tarjeta.</p>
    <div slot="footer">
      <gstock-button variant="text" size="small">Leer más</gstock-button>
    </div>
  </gstock-card>

  <gstock-card variant="elevated">
    <div slot="header">
      <gstock-typography variant="heading-h6" component="h3">Tarjeta 3</gstock-typography>
    </div>
    <p>Contenido de la tercera tarjeta.</p>
    <div slot="footer">
      <gstock-button variant="text" size="small">Leer más</gstock-button>
    </div>
  </gstock-card>

  <gstock-card variant="elevated">
    <div slot="header">
      <gstock-typography variant="heading-h6" component="h3">Tarjeta 4</gstock-typography>
    </div>
    <p>Contenido de la cuarta tarjeta.</p>
    <div slot="footer">
      <gstock-button variant="text" size="small">Leer más</gstock-button>
    </div>
  </gstock-card>
</div>

<style>
  .cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--gstock-space-gap-lg);
  }
</style>