Cards Framework

1. Tradicional

Card clássico com header, body e footer. Modificadores de accent, filled, glass, hover e tamanho.

Base + Accent border topo

Relatório Mensal

Resumo de métricas e indicadores do período de março 2026.

Pagamento confirmado

Transação #9821 processada com sucesso. Valor: R$ 1.240,00.

Falha no servidor

O serviço db-primary não respondeu nos últimos 5 minutos.

Accent border esquerda

Deploy realizado

v2.4.1 em produção — 14:32 — sem erros

Uso de CPU elevado

web-02 em 87% — monitorando

Certificado SSL expirado

api.empresa.com.br — expirou há 2 dias

Filled, Glass e Hover interativo

Filled Primary

Fundo sólido na cor primária. Ideal para CTAs e destaques.

Glass Morphism

Fundo blur com transparência. Use sobre gradientes ou imagens.

Hover com Spring

Passe o mouse para ver o efeito. Animação spring cubic-bezier.

y2card-int + y2card-sha

2. Media / Blog Framework

Zoom na imagem no hover, overlay, categoria, autor e meta. Variante fullbleed com texto sobre a imagem.

Padrão

Design 5 min

Como criar sistemas de design escaláveis em 2026

Tokens, componentes atômicos e a metodologia que grandes times usam para manter consistência visual.

G

Gabriel Lima

16 Mar 2026

Dev

CSS Cascade Layers: o que mudou com @layer

Entenda como o CSS layers resolve conflitos de especificidade e permite arquiteturas muito mais limpas.

M

Marina Costa

12 Mar 2026

Performance 12 min

Core Web Vitals 2026: guia completo de otimização

LCP, INP e CLS explicados com estratégias práticas para melhorar o score do PageSpeed.

R

Rafael Souza

08 Mar 2026

Fullbleed — texto sobre imagem (.y2card-full)

Destaque

Y2 Framework 2.0 — O Framework chegou

Todas as novidades do maior update do framework.

16 Mar 2026 8 min de leitura

Tutorial

Construindo um design system do zero com CSS @layer

Do tokens à documentação, passo a passo completo.

10 Mar 2026 15 min de leitura

3. Produto (E-commerce) Framework

Quick actions aparecem no hover, botão de compra animado, badges de oferta, rating e preço com desconto.

Novo

Teclado Mecânico HyperX Alloy Origins RGB

★★★★★ (284)

R$ 549,90

-30% Hot

Monitor Dell UltraSharp 27" 4K IPS QHD

★★★★★ (1.248)

R$ 2.099,00 R$ 2.999,00 Economize R$ 900

Limitado

Headset Sony WH-1000XM5 ANC Wireless

★★★★★ (3.891)

R$ 1.799,00 R$ 2.199,00

Carregando...

4. Profile / Usuário Framework

Cover + avatar com indicador online, stats de seguidores, bio e links sociais.

Gabriel Lima

Full-stack Developer · Y2 Framework

Criando ferramentas que fazem a diferença. Apaixonado por CSS, performance e design systems.

248

Posts

12.4K

Seguidores

891

Seguindo

Marina Costa

UI/UX Designer · Freelancer

Design centrado no usuário, pesquisa e prototipagem. Portfólio com mais de 80 projetos entregues.

83

Projetos

4.2K

Seguidores

312

Seguindo

Rafael Souza

DevOps Engineer · AWS

Infraestrutura como código, Kubernetes e segurança cloud. Certificado AWS Solutions Architect.

156

Artigos

8.1K

Seguidores

204

Seguindo

5. Stat / Métrica Dashboard Framework

Ícone colorido, valor big, trend automático (↑/↓), ícone de fundo decorativo e sparkline.

+12,4%

48.291

Usuários ativos

vs. mês anterior: 42.950

+8,7%

R$ 248K

Receita mensal (MRR)

Meta: R$ 280K — 88,6%

-2,1%

3,84%

Taxa de churn

Meta: ≤ 2,5% — atenção

+5

72

NPS Score

Categoria: Excelente

6. Pricing / Plano Framework

Feature list com ✓ e ×, badge "Popular", destaque com scale e glow border.

Starter

R$ 0 por mês
para sempre

Para quem está começando e quer explorar.

3 projetos ativos

1 GB de armazenamento

Suporte por e-mail

API access

Analytics avançado

Exportação de dados

Mais popular

Pro

R$ 99 por mês
cobrado anual

Para times e profissionais que precisam de mais.

Projetos ilimitados

50 GB de armazenamento

Suporte prioritário 24/7

API access completo

Analytics avançado

Exportação de dados

Scale

R$ 349 por mês
cobrado anual

Para empresas com necessidades avançadas.

Projetos ilimitados

500 GB de armazenamento

SLA 99.99% + suporte dedicado

API access completo

Analytics avançado + custom

Exportação de dados

7. Horizontal

Imagem à esquerda + conteúdo à direita. Tamanhos sm/base/lg. Empilha no mobile.

Tutorial

Construindo um Kanban Board com CSS Grid e JS vanilla

Passo a passo completo para criar um quadro Kanban responsivo com drag and drop nativo.

10 min 14 Mar 2026 4.2K leituras

y2card-sm — card compacto horizontal

Imagem reduzida (8rem), padding menor. Ideal para listas de resultados.

08 Mar 2026

Destaque

y2card-lg — card horizontal espaçoso para features e destaques editoriais

Imagem maior (22rem), mais espaço para conteúdo. Use para hero cards e artigos em destaque.

Equipe Y2 16 Mar 2026

8. Feature Card

Para landing pages. Ícone animado no hover, link arrow, variante numerada e centrada.

Performance Extrema

CSS puro sem dependências, carrega em menos de 10kb. Zero JavaScript desnecessário.

Saiba mais →

Design Tokens Completos

200+ variáveis CSS semânticas cobrindo cores, tipografia, espaçamento e sombras.

Explorar tokens →

Acessibilidade Built-in

Focus rings, prefers-reduced-motion, contraste WCAG AA em todos os componentes.

Ver conformidade →

Grid Framework

Sistema de grid com 12 colunas, breakpoints PP–XXG e utilitários de flexbox e gap.

01

Variante numerada

Use y2card-num para substituir o ícone por número. Ideal para tutoriais e passos sequenciais.

Feature Filled

Combine y2card-ftr com y2card-fil-pri para criar feature cards coloridos de destaque.

9. Testimonial / Depoimento Framework

Aspas decorativas, rating em estrelas e variante destacada com gradiente sutil.

"O Y2 Framework transformou como estruturo meus projetos. A escala de animações e o sistema de scroll são de outro nível — nunca mais vou depender de bibliotecas externas."

G

Gabriel Lima

Full-stack Dev · São Paulo, SP

"Finalmente um framework CSS brasileiro que entende nossa realidade. A documentação é impecável e o sistema de tabela é o melhor que já vi — superou o Bootstrap e o Tailwind juntos."

M

Marina Costa

UI Designer · Rio de Janeiro, RJ

"Migrei todo o meu sistema de forms para o Y2 em um final de semana. A diferença de qualidade é absurda — switch com spring, floating label, segmented control — tudo nativo."

R

Rafael Souza

DevOps · Porto Alegre, RS

10. Notification Card Framework

Borda esquerda de status, ponto de não-lido, ícone colorido e botão de fechar no hover.

Deploy realizado com sucesso

v2.4.1 está em produção. 0 erros, 0 warnings. Tempo: 1m 42s.

agora

×

Pagamento confirmado

Pedido #10421 — R$ 1.890,00 — Nubank aprovado.

5 min

×

Uso de memória elevado

Servidor db-primary em 89% — considere aumentar a instância.

12 min

×

Falha na conexão com Redis

cache-01 não responde. Retry automático em andamento (tentativa 3/5).

28 min

×

Novo usuário cadastrado

Marina Costa — marina@empresa.com — Plano Pro.

1h

×

11. Task / Kanban Framework

Dot de prioridade, tags coloridas, progresso, avatars empilhados e data de vencimento.

⚡ Em andamento

Frontend Design

Criar sistema de cards para o Y2 Framework 2.0

11 tipos de card com CSS semântico, animações e documentação completa.

G

M

6/8

18 Mar

Backend

Implementar autenticação JWT com refresh token

R

2/5

15 Mar

🔍 Revisão

QA Docs

Revisar página de animações da documentação

Verificar todos os 30+ demos de animação e corrigir inconsistências.

M

G

R

9/10

20 Mar

✓ Concluído

Frontend

Sistema de forms completo com switch, range e file upload

G

12/12

✓ Entregue

12. Modernos & Decorativos Framework

Variantes avançadas e experimentais para interfaces focadas em IA, ferramentas hi-tech e imersão visual.

Aura Flutuante

O modificador y2card-aura converte o box-shadow tradicional em uma projeção difusa, tonalizada e radiante com base na cor primária. Passe o mouse para flutuar.

Borda Gradiente Animada

O modificador y2card-grd encapsula o conteúdo com uma borda falsa cônica rotatória. Perfeito para planos Premium, seções Pro e outputs de IA.