02 / 04 · Component Library

Components.

12 component sets · ~62 variants · auto-layout · variables · text styles. Drag-and-drop do painel Assets no Figma. Trocar variant via right panel. Edit copy via instance overrides.

COMPONENT SETS
12
TOTAL VARIANTS
~62
AUTO-LAYOUT
100%
VARIABLES BOUND
all fills
Componente 01 / 12

Button

Primary action button. 3 variants × 2 sizes × 4 states.

VARIANTES 24
src/components/Button.astro
Componente 02 / 12

Tag

Label / chip. 3 variantes visuais × 2 estados.

VARIANTES 6
src/components/Tag.astro
mono amber cream
Componente 03 / 12

Breadcrumb

Wayfinding em /project/[slug] e /blog/[slug]. Light + Dark.

VARIANTES 2
src/components/Breadcrumb.astro
Componente 04 / 12

Nav

Navegação global. Transparent/solid × desktop/mobile.

VARIANTES 4
src/components/Nav.astro

Veja em uso: navegue pelas páginas do site (Nav aparece em /home, /about, /work, /process, /contact ou /blog).

Componente 05 / 12

Footer

Footer global. Desktop + mobile.

VARIANTES 2
src/components/Footer.astro

Veja em uso: navegue pelas páginas do site (Footer aparece em /home, /about, /work, /process, /contact ou /blog).

Componente 06 / 12

PageHero

Hero de páginas internas. Light/Dark × desktop/mobile + text props.

VARIANTES 4
src/components/PageHero.astro

Veja em uso: navegue pelas páginas do site (PageHero aparece em /home, /about, /work, /process, /contact ou /blog).

Componente 07 / 12

CtaBlock

Bloco de conversão final. Primary/secondary × desktop/mobile.

VARIANTES 4
src/components/CtaBlock.astro

Veja em uso: navegue pelas páginas do site (CtaBlock aparece em /home, /about, /work, /process, /contact ou /blog).

Componente 08 / 12

WorkCard

Card de case study. Default/featured × desktop/mobile.

VARIANTES 4
composição inline /work

Veja em uso: navegue pelas páginas do site (WorkCard aparece em /home, /about, /work, /process, /contact ou /blog).

Componente 09 / 12

Metric

Métrica numérica + label + sublabel. Card/inline.

VARIANTES 4
src/components/Metric.astro
−25% Lead time
+36% Eficiência
+29% Time-to-market
Componente 10 / 12

CaseListItem

Item de lista numerada para cases. Desktop + mobile.

VARIANTES 2
composição inline /home + /work

Veja em uso: navegue pelas páginas do site (CaseListItem aparece em /home, /about, /work, /process, /contact ou /blog).

Componente 11 / 12

PillarCard

Card numerado de pilar. Dark/light × desktop/mobile.

VARIANTES 4
composição inline /home + /about + /process

Veja em uso: navegue pelas páginas do site (PillarCard aparece em /home, /about, /work, /process, /contact ou /blog).

Componente 12 / 12

MobileDrawer

Drawer mobile full-screen aberto pelo Nav hamburger. 6 links 40px Bold.

VARIANTES 1
src/components/Nav.astro (drawer)

Veja em uso: navegue pelas páginas do site (MobileDrawer aparece em /home, /about, /work, /process, /contact ou /blog).