Veja como fazer #cards de status modernos usando #Bootstrap 5 e Bootstrap Icons. Os cards incluem:

Principais características:

  1. Sistema de Grid Responsivo - Layout que se adapta em diferentes tamanhos de tela (col-lg-4 col-md-6)
  2. 7 Status Principais:
    • Success (Verde) - com ícone de check
    • Danger (Vermelho) - com ícone de alerta e animação pulse
    • Info (Azul) - com ícone de informação
    • Warning (Amarelo) - com ícone de exclamação
    • Dark (Escuro) - com ícone de lua/estrelas
    • Light (Claro) - com ícone de sol
    • Neutral (Cinza) - com ícone de traço
  3. Elementos Visuais Modernos:
    • Bordas arredondadas (border-radius: 15px)
    • Sombras suaves com efeito hover
    • Gradientes nos ícones
    • Animação de elevação no hover
    • Badges coloridos para status
    • Footer com timestamp
  4. Extras:
    • Cards horizontais como variação
    • Animação pulse para status críticos
    • Fundo com gradiente
    • Ícones do Bootstrap Icons
    • Sistema totalmente responsivo

Os cards são perfeitos para dashboards, painéis administrativos, ou qualquer interface que precise mostrar diferentes tipos de status de forma visual e atrativa.