Contratos públicos para consumidores externos.

Pacotes iniciais: tokens, css, ui, web e patterns. A lista abaixo cruza padrões de composição com renderers HTML portáteis.

renderBrandSectionpen-brand-section, pen-brand-section__eyebrow

Seção editorial base para conteúdos de brand guide em consumidores sem React.

renderFeatureCardpen-feature-card, pen-feature-card__eyebrow

Card de feature de marketing com título, apoio e eyebrow opcional.

renderMarketingCta

pen-marketing-cta, pen-marketing-cta__content, pen-marketing-cta__actions, pen-button, pen-button--primary, pen-button--secondary, pen-button--accent, pen-button--cta-free, pen-button--md, pen-button--lg, pen-button__badge, pen-button__arrow

Bloco de chamada para conversão com ações portáteis em HTML.

renderMarketingHero

pen-marketing-hero, pen-marketing-hero__content, pen-marketing-hero__actions, pen-marketing-hero__visual, pen-button, pen-button--primary, pen-button--secondary, pen-button--accent, pen-button--cta-free, pen-button--md, pen-button--lg, pen-button__badge, pen-button__arrow

Hero assimetrico para landing pages de marketing.

renderBenefitSectionpen-benefit-section, pen-benefit-section__header, pen-benefit-section__grid

Seção de benefícios composta por feature cards.

renderFaqSectionpen-faq-section, pen-faq-section__items, pen-faq-item

Seção de perguntas frequentes com detalhes HTML nativos.

renderProofStrippen-proof-strip

Faixa curta para prova social, selos e claims de confianca.

renderNavbar

pen-navbar, pen-brand-logo, pen-brand-logo--image, pen-brand-logo__image, pen-navbar--proenem-red, pen-navbar--collapsible, pen-navbar--open, pen-navbar__menu, pen-navbar__toggle, pen-navbar__toggle-line, pen-navbar__links, pen-navbar__link, pen-navbar__link--active, pen-navbar__actions, pen-navbar__action, pen-navbar__action--primary, pen-navbar__action--secondary

Barra de navegacao superior com marca, links, estado ativo e acoes.

renderHeroSection

pen-hero-section, pen-hero-section--home, pen-hero-section--first-fold, pen-hero-section__stage, pen-hero-section__image, pen-hero-section__title, pen-hero-section__title--pro-method, pen-hero-section__title-line, pen-hero-section__title-line--left, pen-hero-section__title-line--center, pen-hero-section__title-line--right, pen-hero-section__emphasis, pen-hero-section__emphasis--stroke, pen-hero-section__ornament, pen-hero-sticker

Secao hero editorial com imagem opcional, ornamentos, stickers e titulo fragmentado.

renderHeroActionBar

pen-hero-action-bar, pen-hero-action-bar--compact, pen-hero-action-bar--lp, pen-hero-action-bar__action, pen-hero-action-bar__action--top-curve, pen-button, pen-button__arrow

Faixa de acao complementar ao hero visual, com texto contextual e CTA.

renderMarquee

pen-marquee, pen-marquee--lp, pen-marquee--flat, pen-marquee--animated, pen-marquee__track, pen-marquee__item, pen-marquee__separator

Faixa de letreiro para campanhas, com variante LP reta, leve e animada.

renderPillarsSection

pen-pillars-section, pen-pillars-section--slider, pen-pillars-section__cards, pen-pillars-slider, pen-pillars-slider__viewport, pen-pillars-slider__track, pen-pillars-slider__control, pen-pillars-slider__badge, pen-step-card, pen-step-card--featured, pen-step-card--active, pen-step-card--previous, pen-step-card--next, pen-step-card--hidden

Secao para pilares, etapas ou fundamentos com cards numerados.

renderProofSection

pen-proof-section, pen-proof-section__students, pen-proof-section__badge, pen-proof-section__badge--students, pen-proof-section__strip, pen-proof-section__strip--proof-red, pen-proof-section__logos, pen-proof-section__logo

Secao de prova social com mosaico opcional e faixa de resultados.

renderFeatureGridpen-feature-grid-section, pen-feature-grid

Grade de cards para dores, beneficios, recursos ou argumentos editoriais.

renderBlogIndex

pen-blog-index, pen-blog-hero, pen-post-card, pen-post-card--featured, pen-post-card__media, pen-post-card__content, pen-post-card__arrow, pen-post-category-badge, pen-post-meta, pen-blog-filter-bar, pen-blog-category-tabs, pen-blog-category-tabs__item, pen-blog-sort-select, pen-post-grid, pen-pagination, pen-pagination__control, pen-pagination__pages, pen-pagination__item

Pagina inicial de blog com hero, post em destaque, filtros, grade editorial e paginacao.

renderBlogArticle

pen-blog-article, pen-article-hero, pen-article-cover, pen-article-body, pen-article-figure, pen-article-quote, pen-article-callout, pen-article-share-bar, pen-article-share-bar__links, pen-article-share, pen-latest-posts-section, pen-latest-posts-section__header, pen-latest-posts-section__action

Pagina de artigo com hero, imagem de capa, corpo editorial, compartilhamento e ultimas postagens.

renderPainSection

pen-pain-section, pen-pain-section__title, pen-pain-grid, pen-pain-card, pen-pain-card__icon, pen-pain-card--blue, pen-pain-card--yellow, pen-pain-card--red, pen-pain-section__statement, pen-pain-section__action, pen-section-transition--scallop, pen-section-transition--red-pattern, pen-section-decoration--blue-square, pen-section-decoration--pink-square

Secao de dores da home com cards iconizados, statement, CTA e transicao scalloped.

renderPlatformShowcase

pen-platform-showcase, pen-platform-showcase__header, pen-platform-showcase__badge, pen-platform-showcase__panel, pen-platform-showcase__tabs, pen-platform-showcase__item, pen-platform-showcase__icon, pen-platform-showcase__arrow, pen-platform-showcase__screen, pen-platform-showcase__mock, pen-platform-showcase__star

Showcase de plataforma com navegacao lateral e painel de recurso ativo.

renderQuestionBankSectionpen-question-bank-section, pen-subject-grid

Secao para banco de questoes, categorias de conteudo ou listas de disciplinas.

renderPricingSectionpen-pricing-section, pen-plan-grid, pen-plan-card

Secao de planos com cards de oferta e destaque opcional.

renderAudienceSectionpen-audience-section, pen-audience-section__intro, pen-feature-grid

Secao para publico especifico, segmento ou proposta institucional.

renderSiteFooter

pen-site-footer, pen-site-footer__content, pen-site-footer__title, pen-site-footer__body, pen-site-footer__links, pen-site-footer__column, pen-site-footer__column-title, pen-site-footer__bottom, pen-site-footer__copyright, pen-site-footer__signature

Rodape institucional com chamada editorial, colunas de links e barra inferior.

Brand sectionbrand-section

Seção editorial base para conteúdos de brand guide.

Feature cardfeature-card

Card de feature para explicar benefícios e diferenciais de marketing.

Marketing CTAmarketing-cta

Bloco de conversao para campanhas, paginas editoriais e landing pages.

Marketing heromarketing-hero

Primeira dobra assimetrica para landing pages de marketing.

Benefit sectionbenefit-section

Seção de benefícios composta por cards e cabeçalho editorial.

FAQ sectionfaq-section

Seção de perguntas frequentes com interação nativa e sem dependência de JS.

Proof stripproof-strip

Faixa de prova social para claims curtos, selos e marcos de confianca.

Testimonial cardtestimonial-card

Card de prova social com frase, pessoa e metadado de aprovacao.

Pillar cardpillar-card

Card de etapa do metodo com variantes compacta e expandida.

Marqueemarquee

Faixa de movimento para slogans, prova social e mensagens de campanha.

Navbarnavbar

Barra de navegacao superior com marca, links e acao principal.

Hero sectionhero-section

Hero editorial com imagem, stickers, headline fragmentado e CTA lateral.

Pillars sectionpillars-section

Secao para pilares, etapas ou fundamentos com cards numerados.

Proof sectionproof-section

Mosaico opcional e faixa de prova social para resultados ou aprovados.

Feature gridfeature-grid

Grade de cards para dores, beneficios, recursos ou argumentos editoriais.

Blog indexblog-index

Pagina inicial de blog com hero editorial, destaque, filtros, grid de posts e paginacao.

Blog articleblog-article

Pagina de artigo com hero vermelho, capa, corpo tipografico, compartilhamento e posts relacionados.

Pain sectionpain-section

Secao de dores da home com cards iconizados, statement, CTA e transicao scalloped.

Platform showcaseplatform-showcase

Showcase de plataforma com navegacao lateral e painel demonstrativo.

Question bank sectionquestion-bank-section

Secao para banco de questoes, categorias de conteudo ou listas de disciplinas.

Pricing sectionpricing-section

Secao de planos com cards de oferta e destaque opcional.

Audience sectionaudience-section

Secao para publico especifico, segmento ou proposta institucional.

Site footersite-footer

Rodape institucional com marca, texto e links.