Components

Cards Framework

11 tipos de card — do tradicional ao moderno. Accent borders, hover com spring, skeleton loading, cards de produto com quick actions, stat com sparkline, pricing com feature list, profile, kanban, testimonial e muito mais.

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.

is-int + is-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 Systems 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 em produtos complexos.
G
Gabriel Lima
16 Mar 2026
Development Dev
CSS Cascade Layers: o que mudou com @layer
Entenda como o CSS layers resolve conflitos de especificidade e permite arquiteturas de CSS muito mais limpas e previsíveis.
M
Marina Costa
12 Mar 2026
Grid System 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 Google PageSpeed de qualquer site.
R
Rafael Souza
08 Mar 2026

Fullbleed — texto sobre imagem (.is-full)

Y2 2.0 Release
Destaque
Y2 Framework 2.0 — O Framework chegou
Todas as novidades do maior update do framework: animações, scroll engine, tabelas e forms.
16 Mar 2026 8 min de leitura
Design Systems Tutorial
Tutorial
Construindo um design system do zero com CSS @layer
Do tokens à documentação, um passo a passo completo para criar seu próprio framework CSS.
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.

Teclado Mecânico
Novo
Teclado Mecânico HyperX Alloy Origins RGB
★★★★★ (284)
R$ 549,90
Monitor Dell UltraSharp
-30% Hot
Monitor Dell UltraSharp 27" 4K IPS QHD
★★★★☆ (1.248)
R$ 2.099,00 R$ 2.999,00 Economize R$ 900
Headset Sony WH-1000XM5
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.

Cover
Gabriel Lima
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
Cover
Marina Costa
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
Cover
Rafael Souza
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 e localStorage para persistência.
10 min 14 Mar 2026 4.2K leituras
is-sm — card compacto horizontal
Imagem reduzida (8rem), padding menor. Ideal para listas de resultados ou feeds compactos.
08 Mar 2026
Destaque
is-lg — card horizontal espaçoso para features e destaques editoriais
Imagem maior (22rem), mais espaço para conteúdo. Use para hero cards, listas de recursos e artigos em destaque na página inicial.
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, máxima velocidade de renderização.
Saiba mais ?
Design Tokens Completos
200+ variáveis CSS semânticas cobrindo cores, tipografia, espaçamento, sombras e muito mais. Customizável em um único arquivo.
Explorar tokens ?
Acessibilidade Built-in
Focus rings, prefers-reduced-motion, contraste WCAG AA em todos os componentes. Acessível por padrão, sem configuração.
Ver conformidade ?
Grid Framework
Sistema de grid com 12 colunas, breakpoints brasileiros PP?XXG e utilitários de flexbox e gap.
01
Variante numerada
Use .is-num para substituir o ícone por um número. Ideal para tutoriais e passos sequenciais.
Feature Filled
Combine .is-ftr com .is-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 de deploy: 1m 42s.
agora
X
Pagamento confirmado
Pedido #10421 — R$ 1.890,00 — Nubank aprovado.
5 min
X
Uso de memória elevado
Servidor db-primary em 89% — considere aumentar a instância.
12 min
X
Falha na conexão com Redis
cache-01 não responde. Retry automático em andamento (tentativa 3/5).
28 min
X
Novo usuário cadastrado
Marina Costa — marina@empresa.com — Plano Pro.
1h
X

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 extrema.

Aura Flutuante

O modificador .is-aura converte o box-shadow tradicional em uma projeção difusa, tonalizada e radiante com base na cor primária localizando-se na paleta de cores absolutas. Interaja via Hover para flutuar massivamente.

Borda Gradiente Animada

O modificador .is-grd encapsula o conteúdo mascarando uma borda falsa conectada a um pseudo-elemento cônico rotatório subjacente. Perfeito para destacar seções Premium, Planos Pro ou outputs de Inteligência Artificial.