Button

Botão base com 5 variantes (primary, secondary, ghost, danger, link), 3 tamanhos e estado loading.

Link

HTML

<button class="btn btn--primary">Primary</button>
<button class="btn btn--primary btn--lg">Large</button>
<button class="btn btn--primary is-loading">
  <span class="btn__spinner" aria-hidden="true"></span>
  <span>Enviando...</span>
</button>

Tokens usados

--accent-base--accent-text--accent-shadow--radius-md--tap-target--font-semibold

Badge

Rótulo inline para status, contadores e categorias. 6 variantes semânticas.

Neutral Novo Ativo Em revisão Erro Info SM

HTML

<span class="badge badge--success">Ativo</span>
<span class="badge badge--accent">Novo</span>

Tokens usados

--success-bg--success-text--accent-muted--text-accent--radius-sm

Pill

Rótulo arredondado para tags, filtros e status com dot pulsante.

Outlined Filled Soft Ghost Ao vivo

HTML

<span class="pill pill--soft pill--with-dot">
  <span class="pill__dot" aria-hidden="true"></span>
  Ao vivo
</span>

Tokens usados

--radius-full--accent-muted--text-accent--border-default

Input / Forms

Sistema completo de form fields: input, textarea, select, checkbox, radio, switch + input-group.

Email Não será compartilhado. País Mensagem

Valor

R$

Aceito os termos Sim Não Notificações

HTML

<label class="input-field">
  <span class="input-field__label">Email</span>
  <input class="input" type="email">
</label>
<label class="switch">
  <input type="checkbox"><span class="switch__track"></span>
</label>

Tokens usados

--bg-input--border-default--border-focus--focus-ring--radius-md

Card

Container de conteúdo agrupado. Variante warm-fixed mantém clareza dentro de seção dark.

Default

Card padrão com sombra suave e borda sutil.

Hoverable

Eleva no hover. Usado em grids interativos.

Highlight

Borda accent + shadow accent. Destaca oferta.

Warm-fixed

Permanece claro mesmo dentro de seção dark.

HTML

<article class="card card--hoverable">
  <h3 class="card__title">Título</h3>
  <p class="card__body">Conteúdo.</p>
</article>

Tokens usados

--bg-surface--bg-card--shadow-card--radius-xl--border-subtle

Alert

Bloco de mensagem semântica com border-left grossa + ícone + título + descrição.

Informação

Mensagem descritiva.

Sucesso

Operação concluída.

Atenção

Verifique antes de prosseguir.

Erro

Falha na operação.

HTML

<div class="alert alert--success" role="status">
  <span class="alert__icon" aria-hidden="true">✓</span>
  <div class="alert__content">
    <p class="alert__title">Sucesso</p>
    <p class="alert__desc">Operação concluída.</p>
  </div>
</div>

Tokens usados

--success-bg--success-text--danger-bg--info-bg--radius-md

Toast

Notificação não-modal flutuante. Top-right desktop, bottom mobile. (Aqui renderizado inline para preview.)

Salvo

Suas alterações foram salvas.

Info

Nova versão disponível.

Falhou

Tente novamente em alguns instantes.

HTML

<div class="toast-container" role="region">
  <div class="toast toast--success" role="status">
    <span class="toast__icon">✓</span>
    <div class="toast__content">
      <p class="toast__title">Salvo</p>
      <p class="toast__desc">...</p>
    </div>
    <button class="toast__close">×</button>
  </div>
</div>

Tokens usados

--toast-width--toast-padding--z-toast--shadow-lg

Modal

Usa elemento nativo <dialog>. Foco trap + ESC close pelo browser.

HTML

<dialog class="modal" id="confirm">
  <header class="modal__header">...</header>
  <div class="modal__body">...</div>
  <footer class="modal__footer">...</footer>
</dialog>
<script>document.getElementById('confirm').showModal()</script>

Tokens usados

--modal-max-width--modal-padding--modal-backdrop-bg--shadow-xl

Accordion / FAQ

100% nativo via <details>/<summary> com animação smooth (Chrome 129+).

Como funciona o período de teste?

Você tem 7 dias para testar todas as funcionalidades. Cancele a qualquer momento sem custo.

Posso cancelar quando quiser?

Sim, sem multa ou burocracia. Basta acessar suas configurações.

Como recebo suporte?

Suporte por email em até 24h e chat ao vivo em horário comercial.

HTML

<div class="accordion">
  <details class="accordion__item">
    <summary class="accordion__summary">
      Pergunta?<span class="accordion__chevron"></span>
    </summary>
    <div class="accordion__panel"><p>Resposta.</p></div>
  </details>
</div>

Tokens usados

--border-subtle--bg-hover--radius-lg--duration-base

Tabs

Navegação por abas com roles ARIA. JS mínimo para alternar.

Conteúdo da Visão Geral. Lorem ipsum dolor sit amet.

HTML

<div class="tabs">
  <div class="tab-list" role="tablist">
    <button class="tab" role="tab" aria-selected="true">Visão</button>
    <button class="tab" role="tab" aria-selected="false" tabindex="-1">Detalhes</button>
  </div>
  <div class="tab-panel" role="tabpanel">...</div>
  <div class="tab-panel" role="tabpanel" hidden>...</div>
</div>

Tokens usados

--accent-base--text-accent--border-default--font-medium

Dropdown

Menu suspenso via <details> nativo — zero JS necessário.

HTML

<details class="dropdown">
  <summary class="dropdown__trigger">Opções</summary>
  <div class="dropdown__menu" role="menu">
    <a class="dropdown__item" role="menuitem" href="#">Editar</a>
    <hr class="dropdown__divider">
    <button class="dropdown__item dropdown__item--danger">Excluir</button>
  </div>
</details>

Tokens usados

--z-dropdown--shadow-lg--radius-md--bg-surface

Tooltip

CSS-only via [data-tooltip]. Aparece em :hover e :focus-visible. Zero JS.

HTML

<button data-tooltip="Salvar" class="btn">Salvar</button>
<span data-tooltip="Texto" data-tooltip-pos="bottom">Item</span>

Tokens usados

--tooltip-bg--tooltip-text--tooltip-padding--z-tooltip

Breadcrumb

Trilha de navegação hierárquica. Variantes default e chevron.

HTML

<nav aria-label="Você está em">
  <ol class="breadcrumb">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="/">Início</a>
      <span class="breadcrumb__separator">/</span>
    </li>
    <li class="breadcrumb__item" aria-current="page">Atual</li>
  </ol>
</nav>

Tokens usados

--text-secondary--text-accent--text-muted

Pagination

Navegação entre páginas com prev/next + números + ellipsis. Tap target 44px.

HTML

<nav class="pagination" aria-label="Paginação">
  <a class="pagination__btn pagination__btn--prev" href="?p=1">‹</a>
  <a class="pagination__btn pagination__btn--active" aria-current="page">2</a>
  <span class="pagination__ellipsis">…</span>
</nav>

Tokens usados

--tap-target--accent-base--radius-md--radius-full

Navbar

Sticky com logo + menu + CTA + drawer mobile. Frosted-glass via backdrop-filter.

HTML

<header class="navbar">
  <div class="navbar__inner">
    <a class="navbar__logo" href="/">Marca</a>
    <nav class="navbar__menu" aria-label="Principal">
      <a class="navbar__link" href="#">Recursos</a>
    </nav>
    <a class="navbar__cta" href="#">Começar</a>
  </div>
</header>

Tokens usados

--z-navbar--container-max--bg-base--accent-base

Avatar

Imagem de perfil redonda com 4 tamanhos e stack sobreposto.

JD

+3

HTML

<span class="avatar avatar--md">
  <img src="/u/jane.avif" alt="Jane Doe">
</span>
<div class="avatar-stack">
  <span class="avatar avatar--sm">...</span>
  <span class="avatar avatar--sm">+3</span>
</div>

Tokens usados

--space-6--space-8--space-11--space-16--radius-full

Blockquote

Citação editorial com border-left de acento e tipografia accent.

O design é como uma piada: se você precisa explicar, não é bom.
— Martin LeBlanc

Menos é mais.
— Mies van der Rohe

HTML

<blockquote class="blockquote">
  <p>Texto da citação.</p>
  <cite class="blockquote__cite">— Autor</cite>
</blockquote>

Tokens usados

--font-accent--accent-base--text-2xl--leading-snug

Rating Stars

5 estrelas com modos readonly e interactive. 3 tamanhos.

HTML

<div class="rating rating--md rating--readonly" role="img" aria-label="4 de 5">
  <svg class="rating__star is-on" viewBox="0 0 24 24"><path d="..."/></svg>
  <!-- 5x estrelas, .is-on para acesas -->
</div>

Tokens usados

--warning-text--text-muted--tap-target

Countdown

Timer 4 unidades (Dias/Horas/Min/Seg). JS externo atualiza os valores.

07Dias

12Horas

45Min

22Seg

07d

12h

45m

HTML

<div class="countdown" data-countdown="2026-12-31T23:59:59">
  <div class="countdown__unit">
    <span class="countdown__value" data-unit="days">00</span>
    <span class="countdown__label">Dias</span>
  </div>
  <!-- horas/min/seg -->
</div>

Tokens usados

--accent-muted--border-accent--text-display-sm--font-extrabold

Divider

<hr> base + variantes com label/ícone central.

OU

HTML

<hr class="divider">
<div class="divider divider--label">
  <span class="divider__label">OU</span>
</div>

Tokens usados

--border-default--text-muted--text-accent

Marquee Ticker

Texto rolante horizontal via animação CSS pura. Pausa em prefers-reduced-motion.

Marca A Marca B Marca C Marca D Marca E

HTML

<div class="marquee" aria-label="Marcas">
  <div class="marquee__track">
    <span class="marquee__item">Marca A</span>
    <!-- duplicar conteúdo para loop -->
    <span class="marquee__item" aria-hidden="true">Marca A</span>
  </div>
</div>

Tokens usados

--space-12--font-heading--text-lg

Section Header

Eyebrow + título display + sub. Estrutura repetida no topo de seções.

Recursos

Tudo o que você precisa

Uma plataforma completa para entregar páginas que convertem.

Centralizado

Variante --center

Conteúdo alinhado ao centro.

HTML

<header class="section-header">
  <span class="section-header__eyebrow">Recursos</span>
  <h2 class="section-header__title">Título</h2>
  <p class="section-header__sub">Subtítulo.</p>
</header>

Tokens usados

--text-display-lg--font-bold--tracking-display--container-narrow

Footer

Rodapé com grid de 4 colunas + bottom-bar. Variante minimal.

HTML

<footer class="footer">
  <div class="footer__grid">
    <div class="footer__col footer__brand">...</div>
    <nav class="footer__col">...</nav>
  </div>
  <div class="footer__bottom">
    <small class="footer__copy">© 2026</small>
  </div>
</footer>

Tokens usados

--bg-deep--section-md--container-max--border-subtle

Progress

Barra de progresso horizontal + indicador multi-step.

1
2
3
4

HTML

<div class="progress" role="progressbar" style="--progress: 60">
  <div class="progress__bar"></div>
</div>
<ol class="progress-multistep">
  <li class="progress-multistep__step is-complete"><span>1</span></li>
  <li class="progress-multistep__step is-active"><span>2</span></li>
</ol>

Tokens usados

--accent-base--success-text--bg-surface-raised--step-size

Skeleton

Placeholder de carregamento com shimmer.

HTML

<div aria-busy="true" aria-live="polite">
  <div class="skeleton skeleton--text" style="width: 70%"></div>
  <div class="skeleton skeleton--avatar"></div>
  <div class="skeleton skeleton--card"></div>
</div>

Tokens usados

--bg-surface-raised--bg-surface-overlay--radius-md--radius-full

Spinner

Indicador circular de loading. 3 tamanhos + modifier on-cta.

HTML

<span class="spinner" role="status" aria-label="Carregando"></span>
<button class="btn btn--primary" disabled>
  <span class="spinner spinner--sm spinner--on-cta"></span>
  Enviando...
</button>

Tokens usados

--accent-base--accent-text--border-subtle--duration-slowest

Loading Bar

Barra indeterminada fixa no topo da página (estilo NProgress). Renderizada aqui inline.

HTML

<div class="loading-bar" role="progressbar" aria-label="Carregando">
  <div class="loading-bar__progress"></div>
</div>

Tokens usados

--accent-base--accent-muted--z-toast--ease-in-out

Guarantee Box

Selo de garantia (escudo + headline + sub). Background warm para destaque.

HTML

<aside class="guarantee-box">
  <div class="guarantee-box__icon"><svg>...</svg></div>
  <div class="guarantee-box__body">
    <h3 class="guarantee-box__title">Garantia</h3>
    <p class="guarantee-box__sub">Devolução integral.</p>
  </div>
</aside>

Tokens usados

--bg-warm--accent-muted--accent-base--radius-xl

Ribbon

Faixa diagonal no canto sup-direito de card. Variantes semânticas.

Novo

Plano Inicial

Ribbon accent (default).

-30%

Promoção

Ribbon success.

Últimas

Limitado

Ribbon danger (urgência).

HTML

<article class="card" style="position:relative; overflow:hidden;">
  <span class="ribbon ribbon--corner">Novo</span>
  ...
</article>

Tokens usados

--accent-base--success-text--danger-text--shadow-sm

Hero

Seção principal acima da dobra. 3 variantes: split, center, bg-image.

Lançamento 2026

Construa páginas que convertem

Sistema de design completo para landing pages de alta performance.

Começar grátis Saber mais

HTML

<section class="hero hero--split">
  <div class="hero__body">
    <span class="hero__eyebrow">Lançamento</span>
    <h1 class="hero__title">Headline</h1>
    <p class="hero__sub">Subtítulo.</p>
    <div class="hero__cta"><a class="btn btn--primary">CTA</a></div>
  </div>
  <div class="hero__media"><img src="..." alt=""></div>
</section>

Tokens usados

--section-lg--container-narrow--text-display-lg--accent-muted

Feature Card

Card de benefício (ícone + título + texto). Grid responsivo 1/2/3 cols.

Rápido

Performance excepcional com LCP abaixo de 2.5s.
Saber mais →
No prazo

Entregas dentro do cronograma combinado.
Saber mais →
Seguro

Stack enterprise com tracking server-side dedicado.
Saber mais →

HTML

<ul class="feature-grid">
  <li class="feature-card">
    <div class="feature-card__icon"><svg>...</svg></div>
    <h3 class="feature-card__title">Título</h3>
    <p class="feature-card__desc">Descrição.</p>
    <a class="feature-card__link" href="#">Saber mais →</a>
  </li>
</ul>

Tokens usados

--bg-surface--accent-muted--text-accent--shadow-card--radius-xl

Testimonial Card

Depoimento com autor + avatar. Variante featured com foto lateral grande.

HTML

<figure class="testimonial-card">
  <blockquote class="testimonial-card__quote">Texto.</blockquote>
  <figcaption class="testimonial-card__author">
    <img class="testimonial-card__avatar" src="..." alt="">
    <span class="testimonial-card__meta">
      <span class="testimonial-card__name">Nome</span>
      <span class="testimonial-card__role">Cargo</span>
    </span>
  </figcaption>
</figure>

Tokens usados

--bg-surface--accent-base--font-accent--shadow-card

Stat Card

Número grande + label (KPI). Suporta indicador de tendência.

12.500 Alunos formados

R$ 2,4M ↑ 23% Receita 2025

98% Satisfação

HTML

<div class="stat-card">
  <span class="stat-card__value">12.500</span>
  <span class="stat-card__label">Alunos</span>
</div>

Tokens usados

--text-display-sm--font-extrabold--success-bg--danger-bg

Pricing Card

Plano de preço com features + CTA. Variante featured com badge "Mais popular".

R$ 47/mês

Até 3 páginas
SSL grátis
Suporte por email

Começar

R$ 97/mês

Páginas ilimitadas
Tracking enterprise
Suporte 24h
A/B testing

Assinar Pro

Custom

Tudo do Pro
SLA dedicado
Account manager

Falar com vendas

HTML

<article class="pricing-card pricing-card--featured" data-badge="Mais popular">
  <header class="pricing-card__header">
    <h3 class="pricing-card__title">Pro</h3>
  </header>
  <div class="pricing-card__price">
    <span class="pricing-card__amount">R$ 97</span>
    <span class="pricing-card__period">/mês</span>
  </div>
  <ul class="pricing-card__features"><li>Feature</li></ul>
  <a class="pricing-card__cta btn btn--primary" href="#">Assinar</a>
</article>

Tokens usados

--accent-base--accent-shadow--success-text--text-display-md--radius-2xl

Timeline / Process

Passos sequenciais. Horizontal desktop, vertical mobile.

1
Cadastro
Crie sua conta em 30s.
2
Configuração
Personalize o projeto.
3
Deploy
Publique em 1 clique.

HTML

<ol class="timeline">
  <li class="timeline__step">
    <span class="timeline__marker">1</span>
    <div class="timeline__content">
      <h4 class="timeline__title">Cadastro</h4>
      <p class="timeline__desc">...</p>
    </div>
  </li>
</ol>

Tokens usados

--accent-base--accent-text--space-8--shadow-sm

Comparison Table

"Nós vs eles" com check/x. Scroll horizontal natural no mobile.

	Nosso	Concorrente A	Concorrente B
Tracking server-side	✓	×	✓
Free tier	✓	×	×
Suporte 24h	✓	✓	×
A/B testing	✓	×	×

HTML

<div class="comparison-table-wrap">
  <table class="comparison-table">
    <thead><tr><th></th><th class="comparison-table__col--us">Nosso</th></tr></thead>
    <tbody>
      <tr><th scope="row">Feature</th><td><span class="comparison-table__check">✓</span></td></tr>
    </tbody>
  </table>
</div>

Tokens usados

--accent-muted--text-accent--success-bg--success-text

Trust Section

Logos de clientes + selos de segurança. Grayscale por default, colore no hover.

Quem já confiou em nós

HTML

<section class="trust-section">
  <p class="trust-section__label">Quem confiou</p>
  <ul class="trust-section__grid">
    <li class="trust-section__item">
      <img class="trust-section__logo" src="..." alt="">
    </li>
  </ul>
</section>

Tokens usados

--section-sm--text-muted--tracking-widest

Social Proof Toast

Notificação live (canto inf-esq). "Maria comprou há 2min". Aqui renderizado com classe --visible.

HTML

<aside class="social-proof-toast" role="status">
  <img class="social-proof-toast__avatar" src="..." alt="">
  <div class="social-proof-toast__body">
    <p class="social-proof-toast__text"><strong>Maria</strong> comprou</p>
    <span class="social-proof-toast__time">há 2 min</span>
  </div>
</aside>
<!-- JS toggle: .social-proof-toast--visible -->

Tokens usados

--bg-surface--shadow-lg--radius-xl--duration-slow

Split Feature

Bloco 2-col (imagem + texto). Variante reverse troca a ordem no desktop.

Recurso

Tracking server-side enterprise

Stack completo com sGTM + 8 CAPIs + Firestore. Match Quality ≥ 7.0 garantido.

Conhecer

HTML

<section class="split-feature">
  <div class="split-feature__media"><img src="..." alt=""></div>
  <div class="split-feature__body">
    <span class="split-feature__eyebrow">Recurso</span>
    <h2 class="split-feature__title">Título</h2>
    <p class="split-feature__desc">Descrição.</p>
    <a class="split-feature__cta btn btn--primary">CTA</a>
  </div>
</section>

Tokens usados

--container-wide--section-md--text-display-sm--radius-2xl

Video Section

Thumbnail clicável com play overlay ou embed responsivo 16:9.

HTML

<section class="video-section">
  <button class="video-section__thumbnail" data-video-id="abc123">
    <img src="thumb.jpg" alt="">
    <span class="video-section__play"><svg>...</svg></span>
  </button>
</section>
<!-- Variante embed -->
<div class="video-section__embed"><iframe src="..."></iframe></div>

Tokens usados

--play-btn-size--play-btn-bg--shadow-md--radius-lg

Announcement Bar

Faixa fina no topo com mensagem promocional + botão fechar opcional. Renderizada inline.

Frete grátis hoje · Use o cupom BEMVINDO10

HTML

<div class="announcement-bar" role="region">
  <p class="announcement-bar__text">Aviso. <strong>Destaque</strong></p>
  <button class="announcement-bar__close"><svg>...</svg></button>
</div>

Tokens usados

--announcement-bg--announcement-text--announcement-height--z-raised

Sticky CTA Bar

Barra fixed bottom com CTA. Aparece após scroll via JS. Renderizada inline com classe --visible.

Oferta termina em 2h

Garantir agora

HTML

<div class="sticky-cta-bar" role="region">
  <p class="sticky-cta-bar__text">Oferta termina em 2h</p>
  <a class="sticky-cta-bar__cta btn btn--primary">Garantir agora</a>
</div>
<!-- JS toggle: .sticky-cta-bar--visible após scroll -->

Tokens usados

--z-overlay--sticky-cta-height--sticky-cta-shadow--duration-slow

Cookie Banner

Banner LGPD/Consent Mode v2 com 3 ações. Variantes bottom e corner.

HTML

<div class="cookie-banner" role="dialog">
  <div class="cookie-banner__content">
    <h2 class="cookie-banner__title">Sua privacidade</h2>
    <p class="cookie-banner__text">Usamos cookies...</p>
  </div>
  <div class="cookie-banner__actions">
    <button class="btn btn--primary">Aceitar todos</button>
  </div>
</div>

Tokens usados

--z-modal--bg-surface--text-accent--border-default

Form Multistep

Wizard com indicador no topo + animação slide entre steps.

HTML

<form class="form-multistep" data-current="1">
  <ol class="form-multistep__progress">
    <li class="form-multistep__step" data-step="active">
      <span class="form-multistep__bullet">1</span>
      <span class="form-multistep__label">Dados</span>
    </li>
  </ol>
  <div class="form-multistep__steps">
    <fieldset class="form-step" data-step="active">...</fieldset>
  </div>
</form>

Tokens usados

--step-size--step-active-bg--success-text--container-narrow

Lead Form Inline

Form compacto horizontal (1 campo + CTA). Estados error/success.

HTML

<form class="lead-form-inline">
  <div class="lead-form-inline__field">
    <input class="lead-form-inline__input" type="email">
  </div>
  <button class="lead-form-inline__cta btn btn--primary">Receber</button>
  <p class="lead-form-inline__feedback" role="status"></p>
</form>

Tokens usados

--bg-input--accent-base--danger-text--success-text

Corner-cut Card Brand opt-in

Variante de .card com 1 canto reto. Assinatura geométrica. Requer ativar --radius-cut-* nos tokens do projeto.

Top-left cut

Padrão jpinverno.online.

Top-right cut

Variante espelhada.

Diagonal

Top-left + bottom-right.

HTML

<article class="card card--corner-cut">
  <h3 class="card__title">Título</h3>
</article>
<!-- Para ativar, em theme.css: -->
<!-- :root { --radius-cut-md: 16px; } -->

Tokens usados

--radius-cut-sm--radius-cut-md--radius-cut-lg--radius-lg

Hero Sequence Brand opt-in

Animação em cascata via nth-child puro CSS. Sem JS. Origem: kathleensantos.com.br.

Sequência

Entrada cascata sem JS

Cada filho direto recebe delay incremental via nth-child.

Ver demo

HTML

<section class="hero hero--sequence">
  <span class="hero__eyebrow">Eyebrow</span>       <!-- delay 0 -->
  <h1 class="hero__title">Headline</h1>            <!-- delay 150ms -->
  <p class="hero__sub">Subtítulo</p>                <!-- delay 300ms -->
  <div class="hero__cta">...</div>                 <!-- delay 450ms -->
</section>

Tokens usados

--delay-2--delay-4--delay-6--duration-slow--ease-out

Pull Quote Editorial Brand opt-in

Blockquote premium para artigos longos. Origem: portadamente.com.br.

Toda decisão de design carrega uma hipótese sobre o leitor.

Editorial — Edição 12

Menos é mais quando o resto faz sentido.

Variante center

A tipografia carrega o tom antes da palavra.

Variante accent-bg

HTML

<figure class="pull-quote">
  <blockquote class="pull-quote__quote">Citação.</blockquote>
  <figcaption class="pull-quote__cite">Fonte</figcaption>
</figure>

Tokens usados

--font-accent--accent-base--accent-muted--text-display-md

Camadas do Design System

Tokens

Utilities

Motion

Components

Button

Badge

Pill

Input / Forms

Card

Default

Hoverable

Highlight

Warm-fixed

Alert

Toast

Modal

Accordion / FAQ

Tabs

Dropdown

Tooltip

Breadcrumb

Pagination

Navbar

Avatar

Blockquote

Rating Stars

Countdown

Divider

Marquee Ticker

Section Header

Footer

Progress

Skeleton

Spinner

Loading Bar

Guarantee Box

Ribbon

Plano Inicial

Promoção

Limitado

Hero

Construa páginas que convertem

Feature Card

Rápido

No prazo

Seguro

Testimonial Card

Stat Card

Pricing Card

Timeline / Process

Cadastro

Configuração

Deploy

Comparison Table

Trust Section

Social Proof Toast

Split Feature

Tracking server-side enterprise

Video Section

Announcement Bar

Sticky CTA Bar

Cookie Banner

Form Multistep

Lead Form Inline

Corner-cut Card Brand opt-in

Top-left cut

Top-right cut

Diagonal

Hero Sequence Brand opt-in

Entrada cascata sem JS

Pull Quote Editorial Brand opt-in