Volver a Components

Card

<sg-card> v0.1.1

Contenedor flexible para mostrar contenido agrupado. Soporta m煤ltiples variantes, iconos, acciones y estados.

Ejemplos

B谩sico

Card content goes here. You can add any content.
example.html 
<sg-card card-title="Card Title" subtitle="This is a subtitle">
  <p>Card content goes here. You can add any content.</p>
</sg-card>

Variantes de color

Primary variant card

Success variant card

Warning variant card

Error variant card
example.html 
<sg-card variant="primary" card-title="Primary">Content</sg-card>
<sg-card variant="success" card-title="Success">Content</sg-card>
<sg-card variant="warning" card-title="Warning">Content</sg-card>
<sg-card variant="error" card-title="Error">Content</sg-card>

Con icono

You have 24 active users in your team.
example.html 
<sg-card
  card-title="Users"
  subtitle="Active team members"
  icon="user"
  variant="primary">
  <p>You have 24 active users.</p>
</sg-card>

Con acci贸n

Your plan is active until Dec 2025.
example.html 
<sg-card
  card-title="Subscription"
  subtitle="Pro Plan"
  variant="success"
  action-label="Upgrade Plan">
  <p>Your plan is active until Dec 2025.</p>
</sg-card>

Hoverable y Clickable

Click this card to navigate.
example.html 
<sg-card
  card-title="Dashboard"
  subtitle="View analytics"
  icon="chart"
  variant="info"
  hoverable
  clickable>
</sg-card>

Variantes especiales

Beautiful gradient background

Clean outlined style
example.html 
<sg-card variant="gradient" card-title="Gradient">...</sg-card>
<sg-card variant="outlined" card-title="Outlined">...</sg-card>

Loading State

example.html 
<sg-card loading></sg-card>

Playground

Edita el c贸digo y ve los cambios en tiempo real:

HTML

API Reference

Propiedades

17
Prop Tipo Default Descripci贸n
card-title string undefined T铆tulo de la tarjeta
subtitle string undefined Subt铆tulo debajo del t铆tulo
header string undefined Texto de badge en el header
variant 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info' | 'gradient' | 'outlined' 'default' Variante visual
size 'sm' | 'md' | 'lg' 'md' Tama帽o del padding y tipograf铆a
icon string undefined Nombre del icono (usa sg-icon)
icon-size number | string 48 Tama帽o del icono en p铆xeles
icon-color string undefined Color del icono
action-label string undefined Texto del bot贸n de acci贸n
action-variant 'primary' | 'secondary' | 'ghost' 'primary' Variante del bot贸n
href string undefined URL para navegaci贸n
target string '_self' Target del enlace
flat boolean false Elimina la sombra
hoverable boolean false Efecto de elevaci贸n al hover
clickable boolean false Hace la tarjeta clickeable
disabled boolean false Desactiva la tarjeta
loading boolean false Muestra skeleton de carga

Eventos

2
Evento Tipo Descripci贸n
sgClick CustomEvent<void> Emitido cuando se hace click en la tarjeta (si es clickable)
sgAction CustomEvent<void> Emitido cuando se hace click en el bot贸n de acci贸n

Slots

5
Slot Descripci贸n
(default) Contenido principal de la tarjeta
header Contenido personalizado del header
footer Contenido personalizado del footer
icon Icono personalizado
media Contenido multimedia (imagen/video) en la parte superior

C贸mo usar

Escuchar eventos

events.js 
const card = document.querySelector('sg-card');

card.addEventListener('sgClick', () => {
  console.log('Card clicked!');
});

card.addEventListener('sgAction', () => {
  console.log('Action button clicked!');
});

Con slots personalizados

slots.html 
<sg-card variant="gradient">
  <img slot="media" src="cover.jpg" alt="Cover" />
  <div slot="header">
    <sg-badge variant="success">New</sg-badge>
  </div>
  <p>Custom content here</p>
  <div slot="footer">
    <sg-button variant="primary">Custom Action</sg-button>
  </div>
</sg-card>